MVC Syncfusion Hierarchy grid - child grid is not loading properly

[seethapriyanka peddada]

Hi,

I am using Syncfusion Hierarchy grid for ASP.Net MVC application. The parent grid is binding properly. But some child grids are not loading properly . i am attaching the print screen and code snippets.

syncfusion_Grid_issue_3daaadd5.zip

[Abdul Matin M]

Hi Seethapriyanka,

 

Thanks for your interest in Syncfusion products.

 

We have created a sample to your requirement in the incident ID #115484. Could you please follow up the incident.

 

Could you please use that sample and get back to us if you have any queries.

 

Please let us know if you need any further assistance.

 

Regards,

Abdul Matin M

[sc]

Hi I have the same issue. The child grid does not load properly. It loads properly for the first time but, when I click on the second child grid, nothing shows up.

I cud not find the issue with ID # 115484. 

Thanks in advance...Need help as early as possible.

Thanks

[Abdul Matin M]

Hi SC,

 

Thanks for using Syncfusion products.

 

In incident #115484 non-primary key values was used to build hierarchical relationship, so we have used primary key value to build hierarchy and the issue got resolved.

 

Could you please provide us with your sample or some information about the issue you are getting so that we can able to sort out the cause of the issue and provide you with better solution quickly?. The information provided would be a great help for us to resolve this issue.

 

Please let us know if you need any further assistance.

 

Regards,

Abdul Matin M

[sc]

Hi Abdul Matin M, Thanks for the reply.

This is my view. 

@model Models.Detail

<div>

    @(Html.Syncfusion().Grid<Models.Detail.DetailList>("Grid")

                        .Datasource((IEnumerable<Models.Detail.DetailList>)Model.DetailList)

        .Caption("Detail List")

        .EnableSorting()

        .EnablePaging()

        .PageSettings(settings => settings.PageSize(15))

        .AllowResizing(false)

        .AllowAutoWrap(true)

        .EnableRowHover(true)

        .Column(cols =>

        {

            cols.Add(c => c.Firstname).HeaderText("First Name").TextAlign(TextAlignment.Center);

            cols.Add(c => c.Lastname).HeaderText("LastName").TextAlign(TextAlignment.Center).AllowEditing(false);

              cols.Add(c => c.Address).HeaderText("Address").AllowEditing(false).TextAlign(TextAlignment.Center);

            cols.Add(c => c.Address).Visible(false);

        })

        .ChildGrid(child =>

        {

            child.ChildGridTemplate(Html.Syncfusion().Grid<Models.Detail.DetailList>("ChildGrid_${FieldNo}")

            .Caption("Child Grid")

            .Column(c =>

            {

                c.Add(p => p.Field).HeaderText("Field").TextAlign(TextAlignment.Center);

                c.Add(p => p.NewData).HeaderText("Data").TextAlign(TextAlignment.Center);

                c.Add(p => p.PreviousData).HeaderText("Previous Data").TextAlign(TextAlignment.Center);

            })

            .AutoFormat(Skins.Marble)

            .EnableSorting()

            .EnablePaging()

            .Mappers(map =>

            {

                map.Action("ChildGrid", new {key = Request["Key"] });

            })

            

            .ToChildGridTemplate());

        })

        })

    )

</div>

I am binding the model to this view in the controller action method.

Controller:

 [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult ChildGrid(PagingParams args, int Key)

        {

          //poulate the model

            return data.GridActions<Models.Detail.DetailList>();

        }

I tried but unable to fix the issue.

Please reply at the earliest. Thanks in advance.

[Abdul Matin M]

Hi SC,

 

Thanks for your update.

 

Query #1:

In the code snippet you have provided you have used [ChildGrid_${FieldNo}] FieldNo but you have not used any FieldNo in your parent grid. We suspect that this may be the cause of the issue. This FieldNo should be primary key i.e. it should be unique value only then hierarchy can be created. If you don’t want the FieldNo to be visible in grid you can set its visible property to false.

child.ChildGridTemplate(Html.Syncfusion().Grid<Models.Detail.DetailList>("ChildGrid_${FieldNo}")

 

Query #2:

In mapper action you have used [ map.Action("ChildGrid", new {key = Request["Key"] }); ] Request[“Key”] but we are not able to get how you are processing the key value in your controller and passing it. Can you please provide us with a simple sample that replicates the issue.

 

Query #3:

Provide us with the stack trace or error description of the error so that we could able to sort out the cause of this issue and provide you a better solutions quickly?. The information provided would be a great help for us to resolve this issue.

 

Please let us know if you need any further assistance.

 

Regards,

Abdul Matin M

[sc]

Hi,

Thanks for the help. Child grid is loading properly now when I used primary key.

I also need help on the following:

1. I want to have all child grids expanded by default.

2. Export option which exports the hierarchical grid.

3. Change the color of the child grid header i.e., I do not want to have the parent grid header and child grid header to have the same color for column header.

Please help with the above things as early as u can.

Thanks,

sc

[Abdul Matin M]

Hi SC,

 

Thanks for your update.

 

Query #1: I want to have all child grids expanded by default.

 

To achieve this we suggest you to use client-side event RowDataBound. Please refer the below code snippet.

[JavaScript]

function OnRowDataBound(sender, args)

    {

        if (typeof args.Data.OrderID == "number")

        {

            args.Expanded = true;

        }       

    }

 

Query #2: Export option which exports the hierarchical grid.

 

Please refer to online documentation link and online sample link.

Documentation link: http://help.syncfusion.com/UG/ASP.NET%20MVC/Grid/documents/exporting1.htm

Sample: http://mvc.syncfusion.com/demos/ui/grid/exporting/GridExport#

 

Query #3: Change the color of the child grid header i.e., I do not want to have the parent grid header and child grid header to have the same color for column header.

 

This can be achieved by using CustomCss. Define the themes that you require and apply it to the grid.

 

We have prepared a sample demonstrating all the three requirements. You can download the sample from the link below.

 

Please use the sample and get back to us if you have any other queries.

 

Please let us know if you need any further assistance.

 

Regards,

Abdul Matin M

JHierarchySample_5ad7f19e.zip