First steps with NHibernate using ASP.NET MVC syncfusion hierarchical datagrid

[Carlo]

Greetings everyone. We're starting a new project at our company, and so I was checking out the ASP.NET MVC samples bundled with your product. It looks like that pretty much any sample regarding the datagrid works through the entity framework, instead, I need to bind a hierarcical datagrid to a list of objects which comes from NHibernate, for example:

let's say that for a certain syncfusion 3-level Hierarchical datagrid I get a List<Person> from NHibernate, which is defined as follows:

Person

{

string Name;

string Surname;

List<Purchase> Purchases;

}

Purchase

{

string Description;

int Amount;

List<Item> Items;

}

Item

{

string Code;

int Cost;

}

basically, each Purchase relative to each person is contained in a list in the object person; and, again, each purchase contains a list of items relative to that purchase. Of course, this is done by NHibernate who automatically queries our DB. This way I don't have to consider primary/foreign keys because it abstracts those results from that concepts. I've been able to pass a simple List<Person> (where each person doesn't contain List<Purchase> Purchases) and bind it to a single level datagrid, but I couldn't figure out how to proceed with a hierarchical one, nor I could find any specific example.

[Madhu Sudhanan P]

Hi Carlo,

Thanks for using Syncfusion products.

Query: “I've been able to bind it to a single level datagrid, but I couldn't figure out how to proceed with a hierarchical one, nor I could find any specific example”

From the information provided we understood that you want to bind the List<Purchase> as the child grid of the Person row. If so we can achieve your requirement as shown in the below code snippet.

@(Html.EJ().Grid<object>("Grid") //Main grid - Binds `Person`

      .Datasource((IEnumerable<object>)ViewBag.griddata)

      .Columns(col =>

        {

            col.Field("Name").HeaderText("Name").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("SurName").HeaderText("SurName").Width(80).Add();

        })

        //Level one grid - Binds List<Purchase>

      .ChildGrid(child1 =>

       {

           child1.QueryString("")

                .Columns(col =>

                            {

                                col.Field("Description").HeaderText("Description").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

                                col.Field("Amount").HeaderText("Amount").Width(80).Add();

                            })

               //Level two grid - Binds List<Item>

               .ChildGrid(child2 => child2.QueryString("")

                                        .Columns(col =>

                                           {

                                               col.Field("Code").HeaderText("Code").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

                                               col.Field("Cost").HeaderText("Cost").Width(80).Add();

                                           })

               )

               .ClientSideEvents(evt => evt.DetailsExpand("OnChild2Expand"));

      }

            )
            .ClientSideEvents(evt => evt.DetailsExpand("OnChild1Expand"))

In the above we have specified two level of child grid(one binds-List<Purchase> and another binds with List<Item>) and also for the child grids,  Datasource must not be specified and QueryString has to specified as empty string since the same datasource is used by the child level grids.  

And now in the DetailsExpand event of the parent and the level grid, we have to assign the datasource of their corresponding child grids as follows.

/* DetailsExpand event will be trigged before child grid rendered

     * The current Purchase list will be assigned as datasource to the child grid.*/

    function OnChild1Expand(args) {

        this.model.childGrid.query = new ej.Query();

        this.model.childGrid.dataSource = args.masterData["Purchases"];

    }

    function OnChild2Expand(args) {

        this.model.childGrid.query = new ej.Query();

        this.model.childGrid.dataSource = args.masterData["Item"];
    }

For your convenience we have created a simple sample with the above code and the same can be downloaded from the below location.

Sample Location: http://www.syncfusion.com/downloads/support/forum/119503/ze/MultiLevelGrid1538078671

The result grid will be as follows.



Please let us know if you have any queries.

Regards,
Madhu Sudhanan. P

[Carlo]

Thanks a lot for this professional advice. You've been very kind in taking the time to write a custom sample for us. The approach you suggested seems to be working. Cheers

[Alan Sangeeth S]

Hi Carlo,

Thanks for the update.

We are happy to hear that your requirement has been achieved.

Please let us know if you need any further assistance. We will be happy to help you out.

Regards,
Alan Sangeeth S

[Carlo]

Greetings. I have a further requirement related to this old topic.

Let's say that I have the following entities:

Person

{

int id;

string Name;

string Surname;

List<Purchase> Purchases;

List<Address> Addresses;

}

Purchase

{

int id;

string Description;

int Amount;

}

Address

{

     int id;

     string City;

     string PostalCode;

}

Now, this needs to be mapped to a 2-level Hierarchical datagrid, where each parent row should contain 2 child grids (instead of 1): one for "Purchases" and one for "Addresses". This way, by expanding a "Person" row, I should be able to see 2 child grids, one with the person Purchases and the other for the person Addresses. Is it possible to achieve such a requirement with syncfusion mvc grid (I'm using the last version as of now). Thanks a lot for your kind help, as always.

[Gowthami V]

Hi Carlo, 

  

We can achieve requirement “Displaying two grids under single parent” using “detailTemplate” concept. 

  

We have created a sample and the same can be downloaded from the following link, 

  

http://www.syncfusion.com/downloads/support/directtrac/119503/SAMPLE~4-1225630579.ZIP 

  

Refer to the below code example, 

  

(Html.EJ().Grid<object>("DetailTemplate") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

. . . . 

. . . . 

.DetailsTemplate("#tabGridContents") 

.ClientSideEvents(eve => { eve.DetailsDataBound("detailGridData"); }) 

) 

  

<script id="tabGridContents" type="text/x-jsrender"> 

    <div class="tabcontrol" id="Test"> 

        <ul> 

            <li><a rel='nofollow' href="#gridTab1{{:Id}}">Grid1</a></li> 

            <li><a rel='nofollow' href="#gridTab{{:Id}}">Stock Grid</a></li> 

        </ul> 

        <div id="gridTab1{{:Id}}"> 

            <div id="detailGrid1"> 

            </div> 

            </div> 

            <div id="gridTab{{:Id}}"> 

                <div id="detailGrid"> 

                </div> 

            </div> 

        </div> 

</script> 

<script type="text/javascript"> 

    function detailGridData(e) { 

        var filteredData = e.data["Id"]; 

         

        var data = ej.DataManager(e.data.Purchases).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); 

        e.detailsElement.find("#detailGrid").ejGrid({ 

            dataSource: data, 

            allowSelection: false, 

            allowPaging:true, 

. . . . 

. . . . 

        }); 

        e.detailsElement.css("display", ""); 

       

        var data1 = ej.DataManager(e.data.Addresses).executeLocal(ej.Query().where("Id", "equal", parseInt(filteredData), true)); 

        e.detailsElement.find("#detailGrid1").ejGrid({ 

            dataSource: data1, 

            . . . . 

            . . . . 

  

        }); 

        e.detailsElement.find(".tabcontrol").ejTab({ selectedItemIndex: 0 }); 

    } 

</script> 

  

In the above sample we have rendered the parent grid “Person” with the two child grids “Purchase” and “Address”. While expanding the parent grid, we have displayed the child grids in a tab control based on the primary key of the parent grid. 

  

Refer to the below online sample demo for more clarification, 

  

http://mvc.syncfusion.com/demos/web/grid/detailtemplate 

 

Refer to the below link for more clarification, 

 

http://help.syncfusion.com/js/api/ejgrid#members:detailstemplate 

  

Regards, 

  

Gowthami V. 

[Carlo]

Perfect! The solution you provided satisfied my requirements. Thanks again for your excellent support!

[Ragavee U S]

Hi Carlo, 

Thanks for your update. 

We are happy that your requirement is achieved. 

Regards, 

Ragavee U S.