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. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. jQuery
  4. 2 Child grid with URL adapter and custom template not working as expected.

2 Child grid with URL adapter and custom template not working as expected.

Hello, I have one parent-child gird like this, I want to convert it to 2 child grids like shown in below link

https://www.syncfusion.de/forums/131880/hierarchy-grid-with-2-child-grid

This is my previous grid example where it has one child grid.  so i want to add 2nd child gird same like first one with all the features same.

@(Html.EJ().Grid("ProductRange")
                                                .Datasource(datasource => datasource.Json((IEnumerable
                                            )Model)
                                            .UpdateURL(@Url.Action("UpdateProductRange")).InsertURL(@Url.Action("CreateProductRange"))
                                            .Adaptor(AdaptorType.RemoteSaveAdaptor))
                                            .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowEditOnDblClick(false).EditMode(EditMode.InlineForm).ShowConfirmDialog(true).TitleColumn("Name"); })
                                            .ToolbarSettings(toolbar =>
                                            {
                                                if (CurrentUser.HasFullPageControl(Permission.Products))
                                                {
                                                    toolbar.ShowToolbar().ToolbarItems(items =>
                                                    {
                                                        items.AddTool(ToolBarItems.Add);
                                                    });
                                                }
                                            })
                                            .AllowFiltering()
                                            .AllowSorting()
                                            .AllowPaging()
                                            .AllowResizing()
                                            .EnableHeaderHover()
                                            .EnableRowHover()
                                            .AllowSelection()
                                               .PageSettings(builder => builder.PageSizeList(new List
                            { 50, 200, 500, 10000 }))
                            .PageSettings(p => p.PageSize(50))
                            .FilterSettings(filter => { filter.MaxFilterChoices(int.MaxValue); filter.FilterType(FilterType.Excel); })
                            .Locale("en-GB")
                            .Columns(col =>
                            {
                                col.Field(x => x.Id)
                                .HeaderText("Id").Visible(false)
                                .TextAlign(TextAlign.Left)
                                .Add();
                                col.Field(x => x.Name)
                                .TextAlign(TextAlign.Left)
                                .Add();
                                col.HeaderText("Actions")
                                .Template(CurrentUser.HasFullPageControl(Permission.Products) ? "{{if Name !='Specials'}} Edit{{/if}}"
                                : "")
                                .TextAlign(TextAlign.Center)
                                .Width(70).
                                Add();
                            })
                                .ClientSideEvents(events =>
                                {
                                    events.ActionFailure("mrp.productRanges.productRangeActionFailure");
                                    events.ActionComplete("mrp.productRanges.productRangeActionComplete");
                                })
                                .ChildGrid
                                (child =>
                                {
                                    child.Datasource(datasource => datasource.URL(@Url.Action("GetAllProductCodeCombinationsRangeId"))
.UpdateURL(@Url.Action("UpdateProductCodeCombination"))
.InsertURL(@Url.Action("CreateProductCodeCombination")).RemoveURL(@Url.Action("RemoveProductCodeCombination"))
                        .Adaptor(AdaptorType.UrlAdaptor))
                        .QueryString("Id").EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowDeleting().AllowEditOnDblClick(false)
                        .EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#productCodeCombinations").ShowConfirmDialog(true).TitleColumn("Content"); })
                        .ToolbarSettings(toolbar =>
                        {
                            if (CurrentUser.HasFullPageControl(Permission.Products))
                            {
                                toolbar.ShowToolbar().ToolbarItems(items =>
                                {
                                    items.AddTool(ToolBarItems.Add);
                                });
                            }
                        })
                        .CssClass("childGridBackgroundColor childGrid60PercentWidth")
                        .AllowPaging(false)
                        .Locale("en-GB")
                        .Columns(col =>
                        {
                            col.Field(x => x.Id).Visible(false)
                .TextAlign(TextAlign.Left)
                .Add();

                            col.Field(x => x.RangeId).Visible(false)
                .TextAlign(TextAlign.Left)
                .Add();
                            col.Field(x => x.ProductCount)
                                      .AllowSorting(false)
                                      .AllowFiltering(false).AllowEditing(true)
                                      .Width(80)
                                      .Template("[{{:ProductCount}}]")
                                      .TextAlign(TextAlign.Center)
                                      .Add();
                            col.Field(x => x.Content)
                .TextAlign(TextAlign.Left).DefaultValue("[ProductCode]")
                .Add();
                            col.HeaderText("Actions")
                .Template(CurrentUser.HasFullPageControl(Permission.Products) ? "Edit" +
                "  Delete" : "")
                .TextAlign(TextAlign.Center)
                .Width(100).
                Add();
                        }).ClientSideEvents(events =>
                        {
                            events.ActionComplete("mrp.productRanges.productCodeCombinationActionComplete");
                            events.ActionFailure("mrp.productRanges.productRangeActionFailure");
                            events.RowDataBound("mrp.productRanges.productCodeCombinationRowDataBound");
                        });
                                })
)

   



I have tried to convert my HTML to like this. as shown in example

@(Html.EJ().Grid("ProductRange")
                                                .Datasource(datasource => datasource.Json((IEnumerable
                                            )Model)
                                            .UpdateURL(@Url.Action("UpdateProductRange")).InsertURL(@Url.Action("CreateProductRange"))
                                            .Adaptor(AdaptorType.RemoteSaveAdaptor))
                                            .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowEditOnDblClick(false).EditMode(EditMode.InlineForm).ShowConfirmDialog(true).TitleColumn("Name"); })
                                            .ToolbarSettings(toolbar =>
                                            {
                                                if (CurrentUser.HasFullPageControl(Permission.Products))
                                                {
                                                    toolbar.ShowToolbar().ToolbarItems(items =>
                                                    {
                                                        items.AddTool(ToolBarItems.Add);
                                                    });
                                                }
                                            })
                                            .AllowFiltering()
                                            .AllowSorting()
                                            .AllowPaging()
                                            .AllowResizing()
                                            .EnableHeaderHover()
                                            .EnableRowHover()
                                            .AllowSelection()
                                               .PageSettings(builder => builder.PageSizeList(new List
                            { 50, 200, 500, 10000 }))
                            .PageSettings(p => p.PageSize(50))
                            .FilterSettings(filter => { filter.MaxFilterChoices(int.MaxValue); filter.FilterType(FilterType.Excel); })
                            .DetailsTemplate("#tabGridContents")
                            .Locale("en-GB")
                            .Columns(col =>
                            {
                                col.Field(x => x.Id)
                                .HeaderText("Id").Visible(false)
                                .TextAlign(TextAlign.Left)
                                .Add();
                                col.Field(x => x.Name)
                                .TextAlign(TextAlign.Left)
                                .Add();
                                col.HeaderText("Actions")
                                .Template(CurrentUser.HasFullPageControl(Permission.Products) ? "{{if Name !='Specials'}} Edit{{/if}}"
                                : "")
                                .TextAlign(TextAlign.Center)
                                .Width(70).
                                Add();
                            })
                                .ClientSideEvents(events =>
                                {
                                    events.ActionFailure("mrp.productRanges.productRangeActionFailure");
                                    events.ActionComplete("mrp.productRanges.productRangeActionComplete");
                                    events.DetailsDataBound("mrp.productRanges.productRangeDetailsDataBound");
                                })
)

   

   


And my Javascript is:

 function productRangeDetailsDataBound(args) {
      
      

        args.detailsElement.find("#detailGrid").ejGrid({
            dataSource: ej.DataManager({ url: "/ProductRanges/GetAllProductCodeCombinationsRangeId", updateUrl: "/ProductRanges/UpdateProductCodeCombination", insertUrl: "/ProductRanges/CreateProductCodeCombination", removeUrl: "/Home/RemoveProductCodeCombination", adaptor: "UrlAdaptor" }),
            queryString: "Id",
            allowPaging: false,
            cssClass: "childGridBackgroundColor childGrid60PercentWidth",
            editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, AllowEditOnDblClick: false, editMode: "InlineFormTemplate", inlineFormTemplateID: "#productCodeCombinations",showConfirmDialog:true,titleColumn:"Content" },
            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] },
            allowFiltering: false,
            allowSorting: false,
            actionComplete: "mrp.productRanges.productCodeCombinationActionComplete",
            actionFailure: "mrp.productRanges.productRangeActionFailure",
            rowDataBound: "mrp.productRanges.productCodeCombinationRowDataBound",
            columns: [
                { field: "Id", isPrimaryKey: true, visible: false, textAlign: ej.TextAlign.Right },
                { field: "RangeId", visible: false },
                { field: "ProductCount", headerText: "Products", width: 80, textAlign: ej.TextAlign.Center, template: "[{{:ProductCount}}]" },
                { field: "Content", headerText: "Content", validationRules: { required: true }, textAlign: ej.TextAlign.Left, defaultValue: "[ProductCode]" },
                { headerText: 'Actions', template: "Edit  Delete", textAlign: ej.TextAlign.Center, width: 100 }
            ]
        }).ejGrid("instance");

        args.detailsElement.find("#seconddetailGrid").ejGrid({
            dataSource: ej.DataManager({ url: "/ProductRanges/GetAllProductCodeCombinationsRangeId", updateUrl: "/ProductRanges/UpdateProductCodeCombination", insertUrl: "/ProductRanges/CreateProductCodeCombination", removeUrl: "/Home/RemoveProductCodeCombination", adaptor: "UrlAdaptor" }),
            queryString: "Id",
            allowPaging: false,
            cssClass: "childGridBackgroundColor childGrid60PercentWidth",
            editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true, AllowEditOnDblClick: false, editMode: "InlineFormTemplate", inlineFormTemplateID: "#productCodeCombinations", showConfirmDialog: true, titleColumn: "Content" },
            toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add] },
            allowFiltering: false,
            allowSorting: false,
            actionComplete: "mrp.productRanges.productCodeCombinationActionComplete",
            actionFailure: "mrp.productRanges.productRangeActionFailure",
            rowDataBound: "mrp.productRanges.productCodeCombinationRowDataBound",
            columns: [
                { field: "Id", isPrimaryKey: true, visible: false, textAlign: ej.TextAlign.Right },
                { field: "RangeId", visible: false },
                { field: "ProductCount", headerText: "Products", width: 80, textAlign: ej.TextAlign.Center, template: "[{{:ProductCount}}]" },
                { field: "Content", headerText: "Content", validationRules: { required: true }, textAlign: ej.TextAlign.Right, defaultValue: "[ProductCode]" },
                { headerText: 'Actions', template: "Edit  Delete", textAlign: ej.TextAlign.Center, width: 100 }
            ]
        }).ejGrid("instance");
    }


I am facing 1 main issue here.
1 st:  on the server side method I am not getting the Id of parent grid while calling GetAllProductCodeCombinationsRangeId which I was used to get earlier. how to pass the Id in where query in server side same like parent child grid.
I believe I am doing something wrong in javascript but not quite figured out what is wrong.

1 Reply
VN Vignesh Natarajan Syncfusion Team February 11, 2019 12:37 PM UTC

Hi Sandip, 
 
Thanks for contacting Syncfusion Support. 
 
Query#1:- This is my previous grid example where it has one child grid.  so i want to add 2nd child grid same like first one with all the features same. 
 
We have checked your query and in this code example you have used Hierarchy Grid to show the child Grid, so that you can get the queryString on serverside using QueryString property of the Grid. In the below demo Link, you can use 2 child Grid for the parent Grid. 
 
Please refer to the Online Demo Link 
 
 
Query#2:- In the server side method I am not getting the Id of parent grid while calling GetAllProductCodeCombinationsRangeId which I was used to get earlier. how to pass the Id in where query in server side same like parent child grid. 
 
While checking your code example, you have used DetailsTemplate property to render the childGrids. There is no queryString property for detailTemplate. If you want to pass the ID of the queryString to serverside, you can pass through addParams” property of query API of ejGrid using actionBegin event of the Grid. 
 
Please refer to the code example:- 
 
@(Html.EJ().Grid<object>("FlatGrid") 
        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).Adaptor(AdaptorType.RemoteSaveAdaptor)) 
         .AllowPaging() 
         .DetailsTemplate("#tabGridContents") 
         .ClientSideEvents(eve => { eve.DetailsDataBound("detailGridData"); }) 
        .Columns(col => 
        { 
            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
              .   .   . 
       })) 
</div> 
 
<script id="tabGridContents" type="text/x-jsrender"> 
    <div class="tabcontrol"> 
        <div> 
            <div id="detailGrid"> 
            </div><br /> 
            <div id="seconddetailGrid"> 
            </div> 
        </div> 
    </div> 
</script> 
 
<script type="text/javascript"> 
    function detailGridData(e) { 
       var filteredData = e.data["EmployeeID"]; 
        // the datasource "window.ordersView" is referred from jsondata.min.js 
         e.detailsElement.find("#detailGrid").ejGrid({ 
            dataSource: ej.DataManager({ 
                url: "/Grid/DataSource", 
                updateUrl: "/Grid/Update", 
                insertUrl: "/Grid/Insert", 
                removeUrl: "/Grid/Delete", 
                adaptor: "UrlAdaptor" 
            }), 
            allowSelection: false, 
            actionBegin: function (args) { 
              args.model.query.addParams("EmployeeID", filteredData); 
            }, 
            columns: [ 
                    { field: "OrderID", key: true, headerText: "Order ID", width: 80, textAlign: ej.TextAlign.Right }, 
                    .    .      . 
           ] 
        }); 
        e.detailsElement.find("#seconddetailGrid").ejGrid({ 
              dataSource: ej.DataManager({ 
                url: "/Grid/DataSource1", 
                updateUrl: "/Grid/Update", 
                insertUrl: "/Grid/Insert", 
                removeUrl: "/Grid/Delete", 
                adaptor: "UrlAdaptor" 
            }), 
 
            allowSelection: false, 
            actionBegin: function (args) { 
              args.model.query.addParams("EmployeeID", filteredData); 
            }, 
 
        }); 
 
    } 
 
Serverside:- 
 
     public ActionResult DataSource(DataManager dataManager, int EmployeeID) 
        { 
            BindDataSource(); 
            var DataSource = order.ToList(); 
            var id = EmployeeID; 
            DataSource = DataSource.Where(ID => ID.EmployeeID == id).Take(5).ToList(); 
            .   .     . 
            return Json(result, JsonRequestBehavior.AllowGet); 
        } 
 
Refer to the Demo and documentation Link 
 
 
 
We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive and lightweight. 
We suggest you look into our following product page for more details. 
 
 
Demo page for ej2 Grid  
 
 
Please get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan 
 


Loader.
Live Chat Icon For mobile
Up arrow icon