Hierarchical - Parent and Child Select

[Prasanth]

Hi there,

Not sure whether Grid is the right control or if there is any other syncfusion control that can be used for my requirement.  The requirement is that I have 2 tables with Parent : Child relationship.  For example let's say we have Department and Employee tables where each employ belongs to a department.  

If we want to store information regarding department and employee participation in project (couple of relationships here Project : Department and Project : Employee).  I was thinking I could use something like Hierarchical solution to display Departments where users can select it by clicking on the check box or something on grid row, so relationship between Project and Department is updated/stored.  And once that's done Employees within the selected department can be chosen (via check box on grid row) in the child grid.  Perhaps this can be done on Master-Details or TreeGrid or TreeView controls too?

Any suggestions would be appreciated.

Regards

Prasanth

[Jayaprakash Kamaraj]

Hi Prasanth,
Thanks for contacting Syncfusion support.
Hierarchy Grid feature is used to render the Grid inside the grid row. To view the child grid, we use the expand button in each row of the parent grid. The child grid data has been bound based on the foreign key field to querystring property.
Please find the code example, screenshot and sample:

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

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

        .AllowSorting()

        .AllowFiltering()

        .Columns(col =>

        {

            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("FirstName").HeaderText("First Name").Width(100).Add();

            col.Field("Title").Width(120).Add();

            col.Field("City").Width(100).Add();

            col.Field("Country").Width(100).Add();

        })

                 .ChildGrid(child =>

                 {

                     child.Datasource((IEnumerable<object>)ViewBag.datasource2)

                        .QueryString("EmployeeID")

                        .AllowPaging()

                        .AllowSorting()

                        .Columns(col =>

                        {

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

                            col.Field("ShipCity").HeaderText("ShipCity").Width(100).Add();

                            col.Field("Freight").Width(120).Add();

                            col.Field("ShipName").Width(100).Add();

                        });
                 }))

Screenshot:


Sample: http://www.syncfusion.com/downloads/support/forum/121558/ze/Sample145862508394122
Hierarchy Grid: http://help.syncfusion.com/aspnetmvc/grid/hierarchy-grid
Refer the online sample for hierarchy grid
Online Sample: http://mvc.syncfusion.com/demos/web/grid/hierarchygrid
If we misunderstood your query, please confirm the following details.

1.       Do you need to render the checkbox in the child grid?
Query : “And once that's done Employees within the selected department can be chosen (via check box on grid row) in the child grid?”
Could you please elaborate the above query?, it will help us to provide the prompt solution.
Query: Perhaps this can be done on Master-Details or TreeGrid or TreeView controls too?
Treeview control will be well suited for your requirement as TreeGrid control is designed to load values across multiple columns.
Regards,
Jayaprakash K

[Prasanth]

Hi Jayaprakash,

Wishing you a Happy New Year and thanks for the reply & source code. Appreciated and sorry for not explaining properly earlier.  Below is the sample data structure and query regarding my requirement.

Primary Tables

Employee

ID

Name

DepartmentID

Department

ID

Name

Project

ID

Name

Relationship Tables

ProjectDepartment

ID

ProjectID

DepartmentID

Active

 

ProjectEmployee

ID

ProjectID

EmployeeID

Active

 

Basically for each project I want to be able to display Departments in the main grid while showing employees within the sub grid.  Now this is doable with the primary tables (employee and department) using hierarchical grid as per the example on the syncfusion website.  However I want to incorporate the data stored in the relationship tables as well in the grids (i.e. showing a checkbox to indicate whether each department is associated with the project as well as each employee within the department is associated with the project).  By unchecking the check box just simply set the Active columns to false.

ID (from ProjectDepartment)	Project	Checkbox
1	First Project	Yes
ID (from ProjectEmployee)	Employee	Checkbox
1	Krishna	No
2	Rama	Yes
ID (from ProjectDepartment)	Project	Checkbox
2	Second Project	No
ID (from ProjectEmployee)	Employee	Checkbox
1	David	No

 

Regards

Prasanthan

[Prasanna Kumar Viswanathan]

Hi Prasanth,

Thanks for your New Year wishes and please accept the same from us.

We have analyzed your question and identified the following requirements. Would you review this and let us know if we have missed anything?

1.       Do you want to display the relationship tables in the hierarchical grid and the project Department is to be in the main grid?

2.       If the checkbox is checked in the parent grid, you want to display the child grid. The checkbox indicates the relationship between the two tables.

3.       Do you want the checkbox in the child grid?

4.       Do you need to uncheck the checkbox in editing state?

5.       Can you please elaborate the checkbox function that you require?

Regards,
Prasanna Kumar N.S.V

---

PR Prasanth January 5, 2016 12:32 PM UTC

Hi Prasanna,

Thanks for the reply 

Regarding the questions,

1.        Do you want to display the relationship tables in the hierarchical grid and the project Department is to be in the main grid?

I think I might have not explained it well in the previous post.  I will try to explain further belwo

2.       If the checkbox is checked in the parent grid, you want to display the child grid. The checkbox indicates the relationship between the two tables.  Yes

3.       Do you want the checkbox in the child grid? YES

4.       Do you need to uncheck the checkbox in editing state? YES

5.       Can you please elaborate the checkbox function that you require?

View Models

Departmental Project

ID

Project Name

Department Name

Active

 

Employees in Project

Department Name

Project Name

Employee Name

Active

Let’s say we visit a project’s page which displays the information regarding the department’s involved in it and also provides ability to add / remove departments association with the project.

Also I want to be able to attach employees to the project (but employees belong to department so it will be nice to group them – hierarchical grid under departments)

So the envisaged hierarchical grid design is as per below table.  Basically check box is meant to be in the last column for both parent (Department involved with the Project) and child (Employ working on Project) to indicate whether the entity (employee or department) is currently involved/working on the project.

Department		Department involved with the Project
Sales		Yes
	Employee	Employ working on Project
	Krishna	No
	Rama	Yes
Research Development
	Employee	Employ working on Project
	David	No

Initially I thought I could list the entire department in the system on top level of the hierarchical grid while displaying the employees within the department under each department.  

So the check box is merely maps to a boolean (Active) field on the corresponding entity relationship (department or employee) view model

Hope this helps explaining things better, apologies for not explaining on previous post

Regards

Prasanth

---

PK Prasanna Kumar Viswanathan Syncfusion Team January 6, 2016 09:59 AM UTC

Hi Prasanth,

Thanks for providing additional information.

Your requirement has been achieved using rowDataBound and detailExpand events of ejGrid. rowDataBound event triggers every time a request is made to access particular row information and we can get the row details in the arguments. Using that, we check the condition with column value and hide the expand button by adding the class name.

In detailExpand, event we can get the data in the arguments. Using we check the condition with Active and hide the details row element.

Please find the code example and sample:

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

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

        .AllowSorting()

        .EditSettings( edit => edit.AllowEditing())

        .ClientSideEvents( eve => eve.RowDataBound("querycell").DetailsExpand("expand"))

        .Columns(col =>

        {

            col.Field("SupplierID").HeaderText("Supplier ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("CompanyName").HeaderText("Company Name").Width(100).Add();

            col.Field("ContactName").HeaderText("Contact Name").Width(100).Add();

            col.Field("Active").HeaderText("Active").Width(100).EditType(EditingType.Boolean).Add();

        })

                 .ChildGrid(child =>

                 {

                     child.Datasource((IEnumerable<object>)ViewBag.datasource2)

                        .QueryString("SupplierID")

                        .AllowPaging()

                        .EditSettings(edit => edit.AllowEditing())

                        .AllowSorting()

                        .Columns(col =>

                        {

                            col.Field("ProductID").Width(120).IsPrimaryKey(true).Add();

                            col.Field("ProductName").Width(100).Add();

                            col.Field("CategoryID").Width(100).Add();

                            col.Field("Discontinued").Width(100).Add();

                        });

                 })

                 )

<script type="text/javascript">

    function querycell(args) {

            if (!args.data.Active) {

                args.row.find(".e-icon").addClass("e-hide");

        }

    }

    function expand(args) {

        if (!args.masterData.Active) {

            args.cancel = true;

            args.detailsRow.hide();

        }

    }
</script>

Sample: http://www.syncfusion.com/downloads/support/forum/121558/ze/Sample145862185212000

Refer to the Help documents for the rowDataBound and detailExpand events.

http://help.syncfusion.com/js/api/ejgrid#events:rowdatabound

http://help.syncfusion.com/js/api/ejgrid#events:detailsexpand

Regards,
Prasanna Kumar N.S.V

SIGN IN To post a reply.

• 5 Replies
• 3 Participants
• Want to subscribe?
  SIGN IN
• Created by
  PR Prasanth
• Platform
  ASP.NET MVC
• Control
  Grid
• Created On
  Dec 30, 2015 08:44 PM UTC
• Last Activity On
  Jan 6, 2016 09:59 AM UTC

[Prasanth]

Hi Prasanna,

Thanks for the reply 

Regarding the questions,

1.        Do you want to display the relationship tables in the hierarchical grid and the project Department is to be in the main grid?

I think I might have not explained it well in the previous post.  I will try to explain further belwo

2.       If the checkbox is checked in the parent grid, you want to display the child grid. The checkbox indicates the relationship between the two tables.  Yes

3.       Do you want the checkbox in the child grid? YES

4.       Do you need to uncheck the checkbox in editing state? YES

5.       Can you please elaborate the checkbox function that you require?

View Models

Departmental Project

ID

Project Name

Department Name

Active

 

Employees in Project

Department Name

Project Name

Employee Name

Active

Let’s say we visit a project’s page which displays the information regarding the department’s involved in it and also provides ability to add / remove departments association with the project.

Also I want to be able to attach employees to the project (but employees belong to department so it will be nice to group them – hierarchical grid under departments)

So the envisaged hierarchical grid design is as per below table.  Basically check box is meant to be in the last column for both parent (Department involved with the Project) and child (Employ working on Project) to indicate whether the entity (employee or department) is currently involved/working on the project.

Department		Department involved with the Project
Sales		Yes
	Employee	Employ working on Project
	Krishna	No
	Rama	Yes
Research Development
	Employee	Employ working on Project
	David	No

Initially I thought I could list the entire department in the system on top level of the hierarchical grid while displaying the employees within the department under each department.  

So the check box is merely maps to a boolean (Active) field on the corresponding entity relationship (department or employee) view model

Hope this helps explaining things better, apologies for not explaining on previous post

Regards

Prasanth

[Prasanna Kumar Viswanathan]

Hi Prasanth,

Thanks for providing additional information.

Your requirement has been achieved using rowDataBound and detailExpand events of ejGrid. rowDataBound event triggers every time a request is made to access particular row information and we can get the row details in the arguments. Using that, we check the condition with column value and hide the expand button by adding the class name.

In detailExpand, event we can get the data in the arguments. Using we check the condition with Active and hide the details row element.

Please find the code example and sample:

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

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

        .AllowSorting()

        .EditSettings( edit => edit.AllowEditing())

        .ClientSideEvents( eve => eve.RowDataBound("querycell").DetailsExpand("expand"))

        .Columns(col =>

        {

            col.Field("SupplierID").HeaderText("Supplier ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("CompanyName").HeaderText("Company Name").Width(100).Add();

            col.Field("ContactName").HeaderText("Contact Name").Width(100).Add();

            col.Field("Active").HeaderText("Active").Width(100).EditType(EditingType.Boolean).Add();

        })

                 .ChildGrid(child =>

                 {

                     child.Datasource((IEnumerable<object>)ViewBag.datasource2)

                        .QueryString("SupplierID")

                        .AllowPaging()

                        .EditSettings(edit => edit.AllowEditing())

                        .AllowSorting()

                        .Columns(col =>

                        {

                            col.Field("ProductID").Width(120).IsPrimaryKey(true).Add();

                            col.Field("ProductName").Width(100).Add();

                            col.Field("CategoryID").Width(100).Add();

                            col.Field("Discontinued").Width(100).Add();

                        });

                 })

                 )

<script type="text/javascript">

    function querycell(args) {

            if (!args.data.Active) {

                args.row.find(".e-icon").addClass("e-hide");

        }

    }

    function expand(args) {

        if (!args.masterData.Active) {

            args.cancel = true;

            args.detailsRow.hide();

        }

    }
</script>

Sample: http://www.syncfusion.com/downloads/support/forum/121558/ze/Sample145862185212000

Refer to the Help documents for the rowDataBound and detailExpand events.

http://help.syncfusion.com/js/api/ejgrid#events:rowdatabound

http://help.syncfusion.com/js/api/ejgrid#events:detailsexpand

Regards,
Prasanna Kumar N.S.V