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

Child Grid binding issue in asp.net mvc and JS

Thread ID:

Created:

Updated:

Platform:

Replies:

130250 May 2,2017 12:25 PM UTC May 4,2017 05:49 AM UTC ASP.NET MVC 3
loading
Tags: Grid
zawar
Asked On May 2, 2017 12:25 PM UTC

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 [Syncfusion]
Replied On May 3, 2017 10:37 AM UTC

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. 
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
Replied On May 3, 2017 12:52 PM UTC

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 [Syncfusion]
Replied On May 4, 2017 05:49 AM UTC

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. 


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

;