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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

119503 Jul 1,2015 03:05 AM Apr 27,2016 01:21 AM ASP.NET MVC 7
loading
Tags: Grid
Carlo
Asked On July 1, 2015 03:05 AM

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 [Syncfusion]
Replied On July 2, 2015 06:01 AM

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
Replied On July 13, 2015 04:05 AM

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 [Syncfusion]
Replied On July 14, 2015 01:08 AM

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
Replied On April 22, 2016 12:26 PM

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 [Syncfusion]
Replied On April 25, 2016 11:05 AM

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, 
  
  
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, 
  
 
Refer to the below link for more clarification, 
 
http://help.syncfusion.com/js/api/ejgrid#members:detailstemplate 
  
Regards, 
  
Gowthami V. 


Carlo
Replied On April 26, 2016 12:01 PM

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

Ragavee U S [Syncfusion]
Replied On April 27, 2016 01:21 AM

Hi Carlo, 

Thanks for your update. 

We are happy that your requirement is achieved. 

Regards, 
Ragavee U S. 


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.

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.

;