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

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

Thread ID:

Created:

Updated:

Platform:

Replies:

142567 Feb 11,2019 01:24 AM UTC Feb 11,2019 12:37 PM UTC JavaScript 1
loading
Tags: ejGrid
Sandip
Asked On February 11, 2019 01:37 AM UTC

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.

Vignesh Natarajan [Syncfusion]
Replied On 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 
 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

;