Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Steve Pasha
115
Master/Detail example using WebDataGrid
posted

Hi,

I am new to the whole web development platform (I come from winforms background).  I am trying to develop a Master/Detail user control for DotNetNuke using WebDataGrid for the Master as well as the Detail grid.  The examples that I saw do not use a webdatagrid as the detail.  I would appreciate it if anyone can post a simple sample.

Thanks,

Steve

  • 12679
    Suggested Answer
    posted
    Hello Steve,
    I’ve put together a small sample Implementation of MasterDetail with two grids

    Anyway, the main points in the sample are as follows :

    In order to run it you must have Northwind database. Just setup the connection string and run the sample.

    The code – behind used for the sample is this one:

    public partial class _Default : System.Web.UI.Page
    {

       private List<Customer> _customers;
       private List<Order> _orders;
        
        protected void Page_Load(object sender, EventArgs e)
        {
            // Take the needed data form the db and put them in the session.
            if (!IsPostBack)
            {
                using(NorthwindModel.NorthwindEntities context = new NorthwindModel.NorthwindEntities())
                     {
                    _orders = new List<Order>();
                    _customers = new List<Customer>();
                    foreach (var customer in context.Customers)
                    {
                        _customers.Add(customer);         
                    }
                    foreach (var order  in context.Orders)
                    {
                        _orders.Add(order);
                    }
                     }
                this.Page.Session["customers"] = _customers;
                this.Page.Session["orders"] = _orders;
            }

            if (this.Page.Session["customers"] != null)
                this.MasterGrid.DataSource = 
                        this.Page.Session["customers"] as List<Customer>;
        }

     
        protected void MasterGrid_RowSelectionChanged(object sender, 
    Infragistics.Web.UI.GridControls.SelectedRowEventArgs e)
        {
            //Put the customerId in the session for later use. Based on this id I will filter the second grid.
            this.Page.Session["CustomerID"] = e.CurrentSelectedRows[0].Items[0].Value;
            //Send this property to the client 
            //in order to indicate that the filtering for the second grid  is allowed
            ((WebDataGrid)sender)
                .GridResponse.AdditionalProperties.Add("allowFiltering", true);   
        }

        //Since the button is inside updatePanel 
        //we know that this event will be raised in response of AJAX Postback
        protected void Button1_Click(object sender, EventArgs e)
        {
          string value = string.Empty;
          if(this.Page.Session["CustomerID"] !=null)
                  value = this.Page.Session["CustomerID"] as string;

          if (this.Page.Session["orders"] != null)
              _orders = this.Page.Session["orders"] as List<Order>;

           //Filter the second grid and bind it.
           List<Order> filteredResult = _orders
                                        .Where(p => p.CustomerID == value)
                                        .ToList<Order>();

          this.DetailGrid.DataSource = filteredResult;
          this.DetailGrid.DataBind();
        }
    }
     
     
    Client – side:

       <script type="text/javascript">
        function AJAXResponseHandler(sender, args) {
            var Properties = args.get_gridResponseObject().AdditionalProperties;
            var allowFiltering = Properties.allowFiltering;
            // If this handler is raised in response of completed response of  
            // RowSelectionChanged event of the grid, trigger an AJAX postback 
            //by the updatePanel and filter the DetailGrid             
            if (allowFiltering == true) {
                var b = document.getElementById('<%=Button1.ID %>');
                b.click();
            }
        }
    
    </script>

    The result is :

    AJAX is used to update the Detail grid , as you are able to see below the selected customer is Bottom-Dolar Markets and all orders made by this customer are returned in the second grid.

    Please note that I've removed ig_res folder form the website due to upload size limitation.

    Hope this hels.

    MasterDetail (2).zip