Grid - Master Detail - Batch Update

[Prasanth]

Hi there,

I have a requirement where I need to display set of employees on a grid where fields such as First Name are displayed and edited using batch edit functionality. This is straight forward and I was able to follow it without any issues.

But there is added requirement of being able to turn on and off departments which the employees belong to.

1. Employee can belong to more than one department
2. Department are tree structured (only 2 levels), so it is possible to have an employee in two or more different departments

Here I am thinking it is possible to have Master Details concept where Detail grid shows all the possible departments (flatten no tree structure) where the users can simply by clicking an Active checkbox column in the Details grid to update whether the selected employee from Master grid belong to certain Department shown on the Details grid. I am having difficulty building this up as I don't know how I could pass on the selected Employee ID back into BatchDataSource server controller method.

Master Grid cshtml tag

@(Html.EJ().Grid("EmployeeGrid")

.AllowFiltering().FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

.Datasource(ds => ds.URL("BatchEmployeeDataSource").BatchURL("BatchEmployeeUpdate").Adaptor(AdaptorType.UrlAdaptor))

.EditSettings(edit => { edit.AllowAdding().AllowEditing().EditMode(EditMode.Batch); })

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Update);

items.AddTool(ToolBarItems.Cancel);

});

})....

Detail Grid cshtml tag

@(Html.EJ().Grid("EmployeeDepartmentGrid")

.AllowFiltering().FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

.Datasource(ds => ds.URL("BatchEmployeeDepartmentDataSource").BatchURL("BatchEmployeeDepartmentUpdate").Adaptor(AdaptorType.UrlAdaptor))

.EditSettings(edit => { edit.AllowAdding().AllowEditing().EditMode(EditMode.Batch); })

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Update);

items.AddTool(ToolBarItems.Cancel);

});....

I am not even sure whether this is right approach for the requirement. I even contemplated whether I should have a dropdown list in the Employee Grid (where the last column could be Drop down with the Tree View which has check boxes to indicate which departments the employee belongs to and users can update the association), but this seems even harder.

Regards

Prasanth

[Saravanan Arunachalam]

Hi Prasanthan,

We understood from your query, you need to select multiple Deparments for each Employee record. We have achieved your requirement by using “EditTemplate” feature of Grid control. In the EditTemplate, we have render the DropdownList box with checkbox which enables you to select multiple data from the DropdownList. Please refer to the below code example and online documentation link.

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

           .Datasource(ds => ds.URL("Event").BatchURL("BatchUpdate").Adaptor(AdaptorType.UrlAdaptor))

      

              . . .

        .Columns(col =>

        {

            . . .

            col.Field("Dept").HeaderText("Department List").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).Add();

           

        }))

<script type="text/javascript">

    var dropData = @Html.Raw(Json.Encode(ViewData["data"]))

    function create(args) {

        return "<input>";

    }

    function read(args) {

        return args.ejDropDownList("getValue");

    }

    function write(args) {

        var selIndex = [];

        if (args.rowdata != undefined)

        {

            for (i = 0; i < args.rowdata["Dept"].length; i++)

            for (j = 0; j < dropData.length; j++){

                if (args.rowdata["Dept"][i] == dropData[j].value) {

                    selIndex.push(j);

                    break;

                }

            }

        }

        args.element.ejDropDownList({ width: "100%", dataSource: dropData, fields: { id: "text", text: "text", value: "value" }, showCheckbox: true, allowMultiSelection: true, selectedItems: args.rowdata !== undefined ? selIndex : "" });

    }

</script>

https://www.syncfusion.com/kb/4809/how-to-set-the-multi-select-dropdown-as-edit-type-for-a-column

We have created a sample that can be downloaded from the below link.

http://www.syncfusion.com/downloads/support/forum/121569/ze/F121569-1887317148

Regards,

Saravanan A.

[Prasanth]

Hi Saravanan,

Thanks for the reply and solution.  I have managed to use your sample and the link to update my solution.   Works great in fact it is a good solution rather than having two grids when you already have an established table data and trying to create one to many relationship.  Now I have got an additional question regarding the solution.  Is it possible to display the drop down check boxes as TreeView (I have got the departments in parent - child tree structure).  If this isn't possible that's OK we could live with the current solution.

Also with another scenario we definitely need a Master Detail Grids, because we have got Departments at two levels so the top level departments can be added & edited using Master grid while child departments could be added in the details grid.  If this is possible just quick sample would be appreciated.

Once again thanks for the solution, Wishing you a happy new year.

Regards

Prasanth

[Prasanth]

Hi Saravanan,

Thanks for the reply and solution.  I have managed to use your sample and the link to update my solution.   Works great in fact it is a good solution rather than having two grids when you already have an established table data and trying to create one to many relationship.  Now I have got an additional question regarding the solution.  Is it possible to display the drop down check boxes as TreeView (I have got the departments in parent - child tree structure).  If this isn't possible that's OK we could live with the current solution.

Also with another scenario we definitely need a Master Detail Grids, because we have got Departments at two levels so the top level departments can be added & edited using Master grid while child departments could be added in the details grid.  If this is possible just quick sample would be appreciated.

Once again thanks for the solution, Wishing you a happy new year.

Regards

Prasanth

Hi Saravanan, 

It seems the drop down check boxes aren't checked for existing data.  For example if employee 1 has relationship with department 1 while rendering the grid department 1 is displayed on the gird column but I click on the column and in drop down corresponding item (department 1) is unchecked.

Regards

Prasanth

[Saravanan Arunachalam]

Hi Prasanthan,

Query 1: Dropdown check boxes aren't checked for existing data.

We are able to reproduce the reported issue when edit the same Department column more than one time. Because the “read” method of EditTemplate is returned the selected values of Dropdownlist box as a single string. So, please returns the selected values in an array and refer to the below code example.

    function read(args) {

        var data = args.ejDropDownList("getSelectedValue")

        return data.split(",");

    }

Query 2: Display the drop down check boxes as TreeView

In the “EditTemplate” of Grid, we can render only the form elements but ejTreeView control render with the help of “ul” tag.  So, we can not render the “ejTreeView” on the EditTemplate of Grid.

Query 3: Need a Master Detail Grids.

We understood from your query,  you need to update the detail Grid based on the edited details on Master Grid and created sample for this requirement that can be download from the below link.

http://www.syncfusion.com/downloads/support/forum/121569/ze/F1215691372481277

In the above sample, we have added the department and sublevel for each employee. While edit the record in master Grid we have updated that modified record on the details grid with department and its sub level field.

If we misunderstood your requirement, please provide the following details regarding your query?

1.       Clear replication procedure of your requirement.

2.       Screenshot of expected output.

3.       Confirm whether the Main Grid is rendered with Employee data or Department data.

4.       Confirm whether you need to update details Grid with Master data or Master Grid with details data.

Regards,

Saravanan A.

[Prasanth]

Hi Saravanan 

Thanks for the reply and source code.   

I have checked out the query 1 solution seems to be working.  Only concern is that there is an issue with displaying selected item(s).  If I select an item once the item is selected the column only displays the id not the name (text), even though on the drop down only the text is shown.  I guess I could use the names to identify unique records (technically we shouldn't have duplicate names anyway)

basically cshmtl script tag is something like this .  Just let me know if I am doing something out of order.

var dropData = @Html.Raw(Json.Encode(ViewData["departmentDataSource"]))

    function create(args) {

        return "<input>";

    }

    function read(args) {

        var data = args.ejDropDownList("getSelectedValue")

        return data.split(",");

    }

    function write(args) {

        var selIndex = [];

        if (args.rowdata != undefined)

        {

            for (i = 0; i < args.rowdata["DepartmentList"].length; i++)

                for (j = 0; j < dropData.length; j++) {

                    if (args.rowdata["DepartmentList"][i] == dropData[j].value) {

                        selIndex.push(j);

                        break;

                    }

                }

        }

        args.element.ejDropDownList({

            width: "100%",

            dataSource: dropData,

            fields: { id: "Id", text: "DepartmentName", value: "Id" },

            showCheckbox: true,

            allowMultiSelection: true,

            selectedItems: args.rowdata !== undefined ? selIndex : ""

        });

    }

I will definitely look into the query 3 sample you have provided, if I have any issues will contact you.  Again I think your solution would solve my issue

Thanks for providing the support so far with my queries.

Regards

Prasanth

[Saravanan Arunachalam]

Hi Prasanthan,

Query 1: Selected the column only displays the id not the name (text).

If you want to display the “Text” in Grid column instead of “Value”, we suggest you to use the “getValue” method instead of “getSelectedValue” method of DropdownList control and refer to the below code example.

function read(args) {

        //To select the text field of Dropdownlist

        var data = args.ejDropDownList("getValue")

        return data.split(",");

    }

Query 2: If I have any issues will contact you

We will wait to hear from you.

Regards,

Saravanan A.

[Prasanth]

Hi Saravanan,

Sorry for the late reply and I hope this reaches you on time before the weekend.  And sorry about putting this late on Friday.

I have had some issues and I think mainly it is from my lack of understanding.  I have attached a sample solution with a grid page.  The grid is a simple page with User grid where Name, contact details and the departments (drop down list) to which users are associated is marked with checkbox input.  I have attached a word document (GridDropdown.docx) with the same content (as I wasn't sure whether the screenshots would be copied into this message) and the sample solution as well

Issues

1.       I am still having trouble with displaying the text (department name rather it seems I am displaying the id value). I am beginning to think this may not be possible since we only have List of Ids (department Ids) within the User object (maybe we need to store Department view models rather than ids)

 

But soon as I click on the field drop down is visible and I am able to see the appropriate department name

public class UserViewModel

    {

public IList<string> DepartmentList { get; set; }

 

2.       Selection issues

When selecting the records it seems the items are appropriately separated with commas

However soon as I tab out the commas seems to disappear

And when I revisit the records none of the selected records are ticked off in the Drop down (expecting Sales and Marketing to be ticked off)

Basically I am just trying to link the Employees and Departments (N:N)

Regards

Prasanth 

Attachment: SampleGridDropDown_5f6645cb.zip

[Saravanan Arunachalam]

Hi Prasanthan,

Query 1: Need to store Department view models rather than ids.

We have achieved your requirement by using “CustomAdaptor” of the DataManager. In the custom adaptor, we have extended the “batchRequest” method of “UrlAdaptor” and modified the changed data of DepartmentList as array of objects based on the selected data of the DropdownList.  Please refer to the below code example and online documentation link.

@(Html.EJ().Grid<UserViewModel>("UserGrid")

       .Datasource(ds => ds.URL("BatchUserDataSource").BatchURL("BatchUsersUpdate"))

        . . .

            .ClientSideEvents(eve => { eve.RowSelected("rowSelected").QueryCellInfo("queryCell").Load("gridLoad"); })

)

<script type="text/javascript">

var extendAdaptor = new ej.UrlAdaptor().extend({

        // To post the Deparment list object to server side

        //Overriding default batchRequest function

        batchRequest: function (dm, changes, e) {

            var selecteddata = [];

            for (var i = 0; i < changes.changed[0].DepartmentList.length; i++) {

                for (var j = 0; j < dropData.length; j++) {

                    if (dropData[j]["DepartmentName"] == changes.changed[0].DepartmentList[i])

                        selecteddata.push(dropData[j]);

                }

            }

            changes.changed[0].DepartmentList = selecteddata;

            return {

                type: "POST",

                url: dm.dataSource.batchUrl || dm.dataSource.crudUrl || dm.dataSource.url,

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                data: JSON.stringify({

                    changed: changes.changed,

                    added: changes.added,

                    deleted: changes.deleted,

                    action: "batch",

                    table: e.url,

                    key: e.key

                })

            }

        }

    });

function gridLoad(args) {

        //Set the extended adaptor to the Grid datasource

        this.model.dataSource.adaptor = new extendAdaptor();

      

    }

</script>

[Controller]

public class UserViewModel

    {

        . . .

        public IList<DepartmentViewModelcs> DepartmentList { get; set; }

    }

http://help.syncfusion.com/js/datamanager/data-adaptors#custom-adaptor

Query 2: Trouble with displaying the text and saving the list type column.

We have achieved this requirement by using “QuerryCellInfo” event of Grid control and refer to the below code example and online documentation link.

@(Html.EJ().Grid<UserViewModel>("UserGrid")

     

        . . .

            .ClientSideEvents(eve => { eve.RowSelected("rowSelected").QueryCellInfo("queryCell").Load("gridLoad"); })

)

<script type="text/javascript">

. . .

function queryCell(args) {

        //For showing the selected value on the Grid

        var selecteddata = [];

        if (args.column.field == "DepartmentList") {

            for (var i = 0; i < args.data.DepartmentList.length;i++)

                selecteddata.push(args.data.DepartmentList[i].DepartmentName);

            args.cell.innerText = selecteddata;

        }

      

     }

. . .

</script>

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

We have modified your sample that can be downloaded from the below link.

http://www.syncfusion.com/downloads/support/forum/121569/ze/F121569-1642479703

Regards,

Saravanan A.

[Prasanth]

Hi Saravanan,

Thanks for the reply and code, much appreciated.   I have managed to meet the requirement with your sample source code

Regards

Prasanth

[Saravanan Arunachalam]

Hi Prasanthan,

Thanks for your update.          

We are happy that the provided information helped you.

Regards,

Saravanan A.