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.

Hierarchical - Parent and Child Select

Thread ID:

Created:

Updated:

Platform:

Replies:

121558 Dec 30,2015 03:44 PM Jan 6,2016 04:59 AM ASP.NET MVC 5
loading
Tags: Grid
Prasanth
Asked On December 30, 2015 03:44 PM

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 [Syncfusion]
Replied On December 31, 2015 05:38 AM

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
Replied On January 1, 2016 01:29 AM

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 [Syncfusion]
Replied On January 4, 2016 12:38 PM

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


Prasanth
Replied On January 5, 2016 07:32 AM

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 [Syncfusion]
Replied On January 6, 2016 04:59 AM

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



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.

;