Grouped DropDown in ej:grid

[Michael Lambert]

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]

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:  

https://help.syncfusion.com/js/api/ejdropdownlist#members:fields-groupby 

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]

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]

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: 

https://help.syncfusion.com/js/api/ejgrid#events:actioncomplete 

 

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]

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]

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