We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Grouped DropDown in ej:grid

Thread ID:

Created:

Updated:

Platform:

Replies:

126105 Sep 23,2016 04:05 PM UTC Sep 29,2016 11:57 AM UTC ASP.NET Web Forms 5
loading
Tags: DropDownList
Michael Lambert
Asked On September 23, 2016 04:05 PM UTC

How do I bind a entity to a DDL in ej:grid that is Group by a category.  I'm using ASP web forms.

Thanks,
Mike

Kasithangam C [Syncfusion]
Replied On September 26, 2016 11:22 AM UTC

Hi Michael, 
Thanks for contacting Syncfusion support. 
We have a “fields” property member called “groupBy” which is used to group the DropDownList items. Please find the API link for the same:  
We have prepared the sample based on your requirement and it is available under the following link: 
Sample: Sample 
In this above sample, we have bound the entity framework to DropDownList and specified the “groupBy” member of fields property in the complete event of the grid as shown below code: 
<code> 
<script type="text/javascript"> 
        function complete(args) { 
            if (args.requestType == "add" || args.requestType == "beginedit") { 
                var data = JSON.parse('<%= new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.DropData)%>'); 
                $("#OrdersGridShipCity").ejDropDownList({ dataSource: data, fields: { text: "ShipCity", value: "ShipCity", groupBy: "ShipCountry" } }); 
            } 
        } 
    </script> 
</code> 
Regards, 

Kasithangam 


Michael Lambert
Replied On September 26, 2016 06:08 PM UTC

Hi Kasithanga,
Still a little confused, maybe I could explain it better.  I have ej:grid that has a column with it's edittype="dropdown",  I can fill the list with data but have no idea how to set it's group by property since there is no GroupBy property in ej:Column.  How would I set that in the the column definition or JS?  Thanks.

                                <ej:Column Field="BU" HeaderText="BU" EditType="Dropdown"  >
                                    <ValidationRule>
                                        <ej:KeyValue Key="required" Value="true" />
                                    </ValidationRule>
                                </ej:Column>


Kasithangam C [Syncfusion]
Replied On September 27, 2016 11:15 AM UTC

Hi Michael,  
 
We can’t able to set “groupBy” for the dropdownlist directly in the grid column. As per your provided code, DropDownList will be rendered when edit the grid row(“EditType=’Dropdown’”). In that, grid ActionComplete event will be triggered. So you can set the “groupBy” for the DropDownList in the complete event of grid control as updated in the previous update. Please find the code for the same: 
 
<code> 
 
<ej:Grid ID="OrdersGrid" runat="server" ClientIDMode="Static" AllowPaging="True" IsResponsive="true" EnableResponsiveRow="true"> 
            <ClientSideEvents EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" ActionComplete="complete" /> 
            <Columns> 
                <ej:Column Field="ShipCity" HeaderText="Ship City" Width="100" EditType="Dropdown" Priority="4"/> 
            </Columns> 
   
        </ej:Grid> 
 
 
<script type="text/javascript">  
        function complete(args) {  
            if (args.requestType == "add" || args.requestType == "beginedit") {  
                var data = JSON.parse('<%= newSystem.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.DropData)%>');  
                $("#OrdersGridShipCity").ejDropDownList({ dataSource: data, fields: { text: "ShipCity", value: "ShipCity",groupBy: "ShipCountry" } });  
            }  
        }  
    </script>  
 
 
</ej:Grid> 
 
</code> 
 
Please find the below API link for the actionComplete event in the grid: 
 
Could you please check the sample which is updated in our previous update? In that sample, we have showcased groupBy functionality in the grid “ShipCity” column. If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. This will help us to serve you better.  
 
Regards, 
Kasithangam 


Michael Lambert
Replied On September 28, 2016 03:15 PM UTC

Hi Kasithangam ,
How do I achieve this when I bind the list from the code behind.
I tried changing it to:

   $("#OrdersGridShipCity").ejDropDownList({ fields: { text: "ShipCity", value: "ShipCity",groupBy: "ShipCountry" } }); 
and deleting this line since I bind the data in the code behind:
   var data = JSON.parse('<%= newSystem.Web.Script.Serialization.JavaScriptSerializer().Serialize(this.DropData)%>');

Though doesn't work. Do I need to assign the grouping at time of binding, and if so, is this possible in the code behind.


Here is the code behind code:
             Session["MBO"] = context.MBOs.OrderBy(a=>a.BU).ThenBy(a=>a.MBO1).Select(o => new { text = Name, value = o.MBO1, bu=o.BU}).ToList();  //BU is the groupby field
....
            var idxMBOs = this.grdBudget.Columns.FindIndex(col => col.Field == "MBO");
            this.grdBudget.Columns.ElementAt(idxMBOs).DataSource = Session["MBO"];
 

Kasithangam C [Syncfusion]
Replied On September 29, 2016 11:57 AM UTC

Hi Michael, 
 
We can’t set the “groupBy” via codebehind because while you give (“EditType=’Dropdown’”), the dropdown element will be rendered dynamically. So we can’t access the dynamic element in code behind. In the grid, dropdown will be render in the actionComplete event. We can bind the “groupBy” field for DropDownList in the actionComplete event. 
 
In your provided code, you have get the dataSource by binding text as name and value as MBO1 and assigned that dataSource to grid Column. 
 
<code> 
  Session["MBO"] = context.MBOs.OrderBy(a=>a.BU).ThenBy(a=>a.MBO1).Select(o => new { text = Name, value = o.MBO1, bu=o.BU}).ToList();  //BU is the groupby field 
</code> 

If you get the dataSource(Session["MBO"]) with text and value, then you no need specify the text and value in DropDownList which is specified in script side code as shown below: 

<code> 
$("#OrdersGridShipCity").ejDropDownList({ fields: { text: "ShipCity", value: "ShipCity"} });   
</code> 

Also, please make sure whether you have bound proper field for groupBy in DropDownList which is resides in the Session[“MBO”] datasource. Please find the code for same: 

<code> 
$("#OrdersGridShipCity").ejDropDownList({ fields: { text: "ShipCity", value: "ShipCity",groupBy: "ShipCountry" } });   
 
  Session["MBO"] = context.MBOs.OrderBy(a=>a.BU).ThenBy(a=>a.MBO1).Select(o => new { text = Name, value = o.MBO1, bu=o.BU}).ToList();  //BU is the groupby field 
 
</code> 

If still you face the problem, please share us the screenshot for which is get the “Session[“MBO”]” and revert us by modifying the sample which is updated in our first update based on your application along with replication procedure. This will help us to serve you better. 
 
Regards             
Kasithangam  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;