Child Grid binding issue in asp.net mvc and JS

[zawar]

I am facing the problem in binding the child gird with custom ajax call. I am not getting any error, but my sub grid is not showing any data.

please help me out.

this is my razor code.

@(Html.EJ().Grid<UMS.ViewModels.CourseSectionViewModel>("grdCorSection")

                .Datasource(ds => ds.UpdateURL(UMSCommonMethod.GetAbsoluteUrl("~/coursesection/Edit")).InsertURL(UMSCommonMethod.GetAbsoluteUrl("~/coursesection/Create")).RemoveURL(UMSCommonMethod.GetAbsoluteUrl("~/coursesection/Delete")).Adaptor(AdaptorType.RemoteSaveAdaptor))

                .EnableAltRow()

                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().ShowDeleteConfirmDialog().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); })

                .AllowPaging().AllowSorting()

                .IsResponsive(true)

                .ClientSideEvents(e =>

                {

                    e.ColumnDrag("d");

                })

                .ToolbarSettings(toolbar =>

                {

                    toolbar.ShowToolbar().ToolbarItems(items =>

                    {

                        items.AddTool(ToolBarItems.Add);

                        items.AddTool(ToolBarItems.Edit);

                        items.AddTool(ToolBarItems.Delete);

                        items.AddTool(ToolBarItems.Search);

                    });

                })

            .Columns(col =>

            {

                col.Field("ID").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Left).ValidationRules(v => v.AddRule("required", true)).Width(90).Add();

                col.Field("SectionName").HeaderText("Section Name").IsPrimaryKey(false).TextAlign(TextAlign.Left).ValidationRules(v => v.AddRule("required", true)).Width(90).Add();

                col.Field("Capacity").HeaderText("Capacity").Width(60).ValidationRules(v => v.AddRule("required", true).AddRule("number", true)).Add();

                col.HeaderText("").AllowEditing(false).Width(35).Template("<a rel='nofollow' href='/Course/Details/{{:ID}}' >Sub Section</a>").Add();

            })

        .ClientSideEvents(eve =>

        {

            eve.ActionComplete("actionComplete");

            eve.DetailsExpand("DetailsExpand");

        })

        .ChildGrid<UMS.ViewModels.CourseSectionEmphasisViewModel>(child =>

        {

            child.Datasource(ds => ds.UpdateURL(UMSCommonMethod.GetAbsoluteUrl("~/courseSubsection/Edit")).InsertURL(UMSCommonMethod.GetAbsoluteUrl("~/courseSubsection/Create")).RemoveURL(UMSCommonMethod.GetAbsoluteUrl("~/courseSubsection/Delete")).Adaptor(AdaptorType.RemoteSaveAdaptor))

                .EnableAltRow()

                .QueryString("ID")

                .EditSettings(edit => { edit.AllowAdding().AllowDeleting().ShowDeleteConfirmDialog().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); })

                .AllowPaging().AllowSorting()

                .IsResponsive(true)

                .ClientSideEvents(e =>

                {

                    e.ColumnDrag("d");

                })

                .ToolbarSettings(toolbar =>

                {

                    toolbar.ShowToolbar().ToolbarItems(items =>

                    {

                        items.AddTool(ToolBarItems.Add);

                        items.AddTool(ToolBarItems.Edit);

                        items.AddTool(ToolBarItems.Delete);

                        items.AddTool(ToolBarItems.Search);

                    });

                })

            .Columns(col =>

            {

                col.Field("ID").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Left).ValidationRules(v => v.AddRule("required", true)).Width(90).Add();

            })

               .ClientSideEvents (ev => {

                   ev.Load("loadChild");

               });

        })

            )

this is my JavaScript code

this is success call back function after ajax calling

function successCallbackSectionCourseEmphasis(subGrid, resp) {

    debugger;

    var subGridObj = $("#" + subGrid).data("ejGrid");

    var dataSource = gridObj.model.dataSource.dataSource;

  

    var resultData = resp.Data; // this will return the array of objects

    subGridObj.model.dataSource.dataSource.json = resultData.result;

    subGridObj.refreshContent();

}

[Saravanan Arunachalam]

Hi Zawar, 

Thanks for contacting Syncfusion’s support. 

We understood from your query, you need to fetch the data from server to render the child Grid control and we suggest you to use the UrlAdaptor of DataManager in the child Grid control which is used to fetch the data from server for the child Grid control. Please refer to the below code example. 

  @(Html.EJ().Grid<object>("FlatGrid") 

       . . . 

        .ChildGrid(child => 

        { 

            child.Datasource(ds=> ds.Adaptor(AdaptorType.UrlAdaptor).URL("DataSource")) 

            .QueryString("EmployeeID") 

            .AllowPaging() 

            . . . 

        }) 

         

    ) 

[Controller] 

public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 

        { 

            IEnumerable DataSource = OrderRepository.GetAllRecords().ToList(); 

            DataResult result = new DataResult(); 

            DataOperations obj = new DataOperations(); 

            if(dm.Where != null) 

            { 

                 //Filter based on the querystring 

                DataSource = obj.PerformWhereFilter(DataSource, dm.Where, dm.Where[0].Operator); 

            } 

            result.count = DataSource.AsQueryable().Count(); 

            if (dm.Skip != 0) 

            { 

                DataSource = obj.PerformSkip(DataSource, dm.Skip); 

            } 

            if (dm.Take != 0) 

            { 

                DataSource = obj.PerformTake(DataSource, dm.Take); 

            } 

            result.result = DataSource; 

             

            return Json(result, JsonRequestBehavior.AllowGet); 

        } 

And we have created a sample that can be downloaded from the below link. 

http://www.syncfusion.com/downloads/support/forum/130250/ze/F1302501116052230  

If it is not your requirement, could you please provide the below details? 

1.       Did you perform anyother functionality in Ajax call other than that fetching data from server? 

2.       In which event, you have performed Ajax post-back call? 

3.       Why don’t you use UrlAdaptor? 

4.       Provide clear details of your requirement. 

5.       Share the screenshot of the exact issue. 

6.       Share consloe page with call stack, if any exception throws. 

 

Note: If you perform the ajax post-back on DetailsExpand event, the child Grid will render after complete the DetailsExpand event and we can’t bound the data to the Grid before render. So, we suggest you to perform ajax post-back after render the Grid control. Please refer to the below code example. 

@(Html.EJ().Grid<object>("FlatGrid") 

       . . . 

        .ClientSideEvents(e=>e.DetailsExpand("onDetailsExpand")) 

    ) 

 

function onDetailsExpand(args){ 

        setTimeout(function(){ 

            //Ajax post back 

        },1000) 

        debugger 

         

    } 

 

Regards, 

Saravanan A. 

[zawar]

1.       Did you perform anyother functionality in Ajax call other than that fetching data from server?  (Yes, actually i am calling the web api, when i call the web api, i have to send the special access token to it. that why i am using my own web api calling method through Ajax)

3.       Why don’t you use UrlAdaptor?  (same as 1)

[Saravanan Arunachalam]

Hi Zawar, 

We have analyzed your query, we suspect that you have performed Ajax post-back (fetch the data for child grid) in the DetailsExpand event of parent Grid control and the child Grid control will be render after triggering the DetailsExpand event. The cause of the issue is that you have tried to set the dataSource in child Grid model before it is rendered completely.  

So, we suggest you to set the dataSource and refresh it after rendering the child Grid. Please refer to the below code example. 

@(Html.EJ().Grid<object>("FlatGrid") 

       . . . 

        .ClientSideEvents(e=>e.DetailsExpand("onDetailsExpand")) 

    ) 

 

function onDetailsExpand(args){ 

        setTimeout(function(){ 

            //Ajax post back 

        },100)         

    } 

 

 If you were not perform Ajax post-back on DetailsExpand event, we suggest to use DataBound event of child Grid control and please refer to the below code example. 

@(Html.EJ().Grid<object>("FlatGrid") 

       . . . 

        .ChildGrid(child => 

        { 

            . . . 

            .ClientSideEvents(e=>e.DataBound("onDataBound")) 

        }) 

         

    ) 

 

<script type="text/javascript"> 

    function onDataBound(e) { 

       //Do ajax post-back action here 

    } 

</script> 

Regards, 

Saravanan A.