1. Home
  2. Forum
  3. ASP.NET MVC
  4. Hierarchy Grid - Multiple open records

Hierarchy Grid - Multiple open records

Hi there, I have a hierarchy grid right now that works fine but I have a small issue when multiple child records are open for editing.  Is there a way to only have 1 child record open for edit at a time?  Either by closing the other records when a user selects another record for editing or force the user to hit 'cancel' before opening up another record.

Thanks

9 Replies
MS Manivel Sellamuthu Syncfusion Team July 30, 2018 12:07 PM UTC

Hi Anthony Tran, 

Thanks for contacting Syncfusion. 

We have  analyzed your query and achieved your requirement by using recordDoubleClick  ,toolbarClick and actionBegin events in Grid. The recordDoubleClick  will trigger when double click the record, and toolbarClick  will trigger when we click toolbar options.so  we can check the other child grid is in edited state. If any child grid record is in edited state other than  target we can close editing by calling endEdit() method in Grid. 
                                                   
<div> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).AllowPaging().Columns(col => 
        { 
.. 
 
        }).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Load("load").ToolbarClick("checkParent").RecordDoubleClick("checkParent").Render() 
</div> 
 
var gridid,gridobj; 
    function load(args) { 
        var grid = document.getElementById('Grid').ej2_instances[0] 
        grid.childGrid = { 
            dataSource: data, 
            queryString: 'EmployeeID', 
            editSettings: { allowEditing: true, allowAdding: true,allowDelting: true}, 
            allowPaging: true, 
            actionBegin: function (args) {  
//stores the id for childgrid when triggers 
                gridid = this.element.id; 
                gridobj = document.getElementById(gridid).ej2_instances[0]; 
            }, 
            recordDoubleClick: checkIsEditable, 
            toolbar: ["Add", "Edit", "Update", "Cancel", "Delete"], 
            toolbarClick: checkIsEditable, 
            pageSettings: { pageSize: 6, pageCount: 5 }, 
            columns: [ 
                { field: 'EmployeeID', headerText: 'Employee ID',isPrimaryKey:true, textAlign: 'Right', width: 120 }, 
                { field: 'FirstName', headerText: 'FirstName', width: 120 }, 
                
            ], 
        } 
    } 
    function checkIsEditable(args) { 
        var grid = document.getElementById('Grid').ej2_instances[0]; 
        if (gridid && (this.element.id != gridid && gridobj.isEdit)) { 
//condition check for whether clicked record is from same grid or not 
            gridobj.endEdit(); 
        } 
        if (gridobj && grid.isEdit) { 
                grid.endEdit(); 
        } 
    } 
    function checkParent(args){ 
        if (gridobj) { 
//condition check for whether clicked record is any record is editable in childgrid or not 
            if (gridobj.isEdit) { 
                gridobj.endEdit(); 
            } 
        } 
    } 


Documentation link for recordDoubleClick , toolbarClick and actionBegin event in grid. 



We have also prepared a sample based on the above query and the same can be available from the below  

Please let us know if you need further assistance.  

Regards, 
Manivel S 


AT Anthony Tran - NO LONGER THERE July 30, 2018 03:50 PM UTC

I'm working out of .NET but I tried to include what you have here into my application.

I'm getting stopped at 

gridobj = document.getElementById(gridid).ej2_instances[0]; 

in the actionBegin function.

VA Venkatesh Ayothi Raman Syncfusion Team August 1, 2018 10:18 AM UTC

Hi Anthony, 
 
 
Thanks for the update. 
 
We went through your code example that you have shared with us and gridid was stored globally in the actionBegin event while editing the corresponding grid. This gridid is used to find the last focused grid which is in editable state or not when we are editing another child grid or parent grid. If the last focused grid is in an editable state, then we can close that edit state by calling the endEdit method. Please refer to the following code example, 
 
actionBegin: function (args) {   
//stores the id for childgrid when triggers  
                gridid = this.element.id; //here we can store the last focused grid id as globally for future use 
                gridobj = document.getElementById(gridid).ej2_instances[0];  
            },  
 
 
Please let us know if you have any further assistance on this. 
 
 
Regards, 
Venkatesh Ayothiraman. 


AT Anthony Tran - NO LONGER THERE August 1, 2018 03:21 PM UTC

I'll post everything relevant that I've done this time.

It says 'gridid' is undefined when I check after it is assigned.


@(Html.EJ().Grid<object>("HierarchyGrid")
            .Datasource(Model)//.CrudURL("/CS_JobInfo/CrudUpdate").RemoveURL("/CS_JobInfo/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor))
            .AllowFiltering()
            .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
            .Columns(col =>
            {
                col.Field("Date").HeaderText("Date").Format("{0:MM/dd/yyyy}").Add();

            })
            .ChildGrid(child =>
            {
                child.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dates).UpdateURL("/CS_JobInfo/CrudDailypl").Adaptor(AdaptorType.RemoteSaveAdaptor))
                .QueryString("Date")
                .EditSettings(edit => { edit.AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#template"); })
                .AllowTextWrap()
                .TextWrapSettings(wrap => { wrap.WrapMode(WrapMode.Both); })
                .Columns(col =>
                {
                    ....

                })
                .ClientSideEvents(eve => eve.ActionComplete("complete")).ClientSideEvents(eve => eve.ActionBegin("storeID")).ClientSideEvents(eve => eve.ToolbarClick("checkIsEditable")).ClientSideEvents(eve => eve.RecordDoubleClick("checkIsEditable"));
            })
            .ClientSideEvents(eve => eve.ToolbarClick("checkParent")).ClientSideEvents(eve => eve.RecordDoubleClick("checkParent"))

)



<script>
    var gridid;
    var gridobj;
    function storeID(args) {
        
        gridid = this.element.id;
        alert(gridid);
        gridobj = document.getElementById(gridid).ej2_instances[0];
    }

    function checkIsEditable(args) {
        var grid = document.getElementById('HierarchyGrid').ej2_instances[0];
        if (gridid && (this.element.id != gridid && gridobj.isEdit)) {
            //condition check for whether clicked record is from same grid or not 
            gridobj.endEdit();
        }
        if (gridobj && grid.isEdit) {
            grid.endEdit();
        }
    }

    function checkParent(args) {
        if (gridobj) {
            //condition check for whether clicked record is any record is editable in childgrid or not 
            if (gridobj.isEdit) {
                gridobj.endEdit();
            }
        }

    }

PK Prasanna Kumar Viswanathan Syncfusion Team August 2, 2018 12:38 PM UTC

Hi Anthony, 

Sorry for the inconvenience caused. 

In EJ2 the Grid ID can be obtained using this.element.id and grid instance can be obtained using  gridobj = document.getElementById(gridid).ej2_instances[0]. But in EJ1 the grid Id and the grid instances can be obtained using below code example. 


@(Html.EJ().Grid<object>("HierarchyGrid") 
        .Datasource((IEnumerable<object>)ViewBag.data) 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
 
                  …... 
 
         .ClientSideEvents(eve => eve.ToolbarClick("checkParent")).ClientSideEvents(eve => eve.RecordDoubleClick("checkParent")) 
        .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(datasource => datasource.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Home/Update") 
                   .InsertURL("/Home/Insert").RemoveURL("/Home/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                        .QueryString("EmployeeID") 
 
                                          …... 
 
                        .Columns(col => 
                        { 
                            col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                            col.Field("CustomerID").HeaderText("CustomerID").Width(100).Add(); 
                            col.Field("Freight").Width(120).Add(); 
                            col.Field("ShipCity").Width(100).Add(); 
 
                        }) 
                        .ClientSideEvents(eve => eve.ActionComplete("complete")).ClientSideEvents(eve => eve.ActionBegin("storeID")).ClientSideEvents(eve => eve.ToolbarClick("checkIsEditable")).ClientSideEvents(eve => eve.RecordDoubleClick("checkIsEditable")); 
                 }) 
) 
<script> 
    var gridid; 
    var gridobj; 
    function storeID(args) { 
        gridid = this.element.attr('id'); 
        alert(gridid); 
        gridobj = $("#" + gridid).ejGrid("instance"); 
    } 
    function checkIsEditable(args) { 
        var grid = $("#HierarchyGrid").ejGrid("instance"); 
 
        if (gridid && (this.element.attr('id') != gridid && gridobj.isEdit)) { 
            //condition check for whether clicked record is from same grid or not 
            gridobj.endEdit(); 
        } 
        if (gridobj && grid.isEdit) { 
            grid.endEdit(); 
        } 
    } 
    function checkParent(args) { 
        if (gridobj) { 
            //condition check for whether clicked record is any record is editable in childgrid or not 
            if (gridobj.isEdit) { 
                gridobj.endEdit(); 
            } 
        } 
    } 
</script> 

We have prepared a sample for your convenience which can be downloaded from the below location. 


Regards, 
Prasanna Kumar N.S.V 


AT Anthony Tran - NO LONGER THERE August 2, 2018 05:03 PM UTC

This works for child records in the same parent record, which is great cause I also need this.  But I was hoping for a similar solution for when 2 child records are open for edit in 2 different parent records.  Let me know if I need to explain more.


Thanks again

PK Prasanna Kumar Viswanathan Syncfusion Team August 3, 2018 12:39 PM UTC

Hi Anthony, 

Thanks for the update.  

Based on your query we understand that you need to one record to be in edit state while perform editing a Hierarchy when multiple child Grid are open.  

We have modified the previously provided to achieve your requirement by calling the endEdit method based on a condition (i.e) while editing a record in actionBegin event when requestType is beginEdit if the Grid has edit form then you can use cancelEdit/endEdit method to cancel/save the edited data. 

Refer the below code example 


@(Html.EJ().Grid<object>("HierarchyGrid") 
        .Datasource((IEnumerable<object>)ViewBag.data) 
        .                        .                .                  .                 .  
        }) 
         .ClientSideEvents(eve => eve.ToolbarClick("checkParent")).ClientSideEvents(eve => eve.RecordDoubleClick("checkParent")) 
        .Columns(col => 
        { 
.                .                 .                      .                  . 
 
 
        }) 
                 .ChildGrid(child => 
                 { 
                     child.Datasource(datasource => datasource.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Home/Update") 
                   .InsertURL("/Home/Insert").RemoveURL("/Home/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                        .QueryString("EmployeeID") 
.                         .                     .                   .                  .  
                        .Columns(col => 
                        { 
                            col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                            col.Field("EmployeeID").HeaderText("EmployeeID").Visible(false).Width(100).Add(); 
                            col.Field("CustomerID").HeaderText("CustomerID").Width(100).Add(); 
                            col.Field("Freight").Width(120).Add(); 
                            col.Field("ShipCity").Width(100).Add(); 
 
                        }) 
                        .ClientSideEvents(eve => eve.ActionComplete("complete")).ClientSideEvents(eve => eve.ActionBegin("storeID")).ClientSideEvents(eve => eve.ToolbarClick("checkIsEditable")).ClientSideEvents(eve => eve.RecordDoubleClick("checkIsEditable")); 
                 }) 
 
) 
 
 
 
<script> 
    var gridid; 
    var gridobj; 
    function storeID(args) { 
 
        gridid = this.element.attr('id'); 
        gridobj = $("#" + gridid).ejGrid("instance"); 
        if (args.requestType == "save") { 
            args.rowData; 
        } 
    } 
 
    function checkIsEditable(args) { 
        var grid = $("#HierarchyGrid").ejGrid("instance"); 
        if (gridid && (this.element.attr('id') != gridid)) { 
            //condition check for whether clicked record is from same grid or not 
            grid.endEdit(); 
        } 
        if (gridobj && gridobj.model.isEdit) { 
            grid.endEdit();            
        } 
        if(grid.getContentTable().find(".gridform").length > 0) 
            $("#" + gridid).ejGrid("endEdit"); 
 
    } 
 
    function checkParent(args) { 
        if (gridobj) { 
            //condition check for whether clicked record is any record is editable in childgrid or not 
            if (gridobj.model.isEdit) { 
                gridobj.endEdit(); 
            } 
        } 
 
    } 
 
</script> 
        
For your convenience we have prepared a sample which can be downloaded from below link 

  
Refer our help documentation for your reference 


Regards, 
Prasanna Kumar N.S.V 
 


AT Anthony Tran - NO LONGER THERE August 3, 2018 03:35 PM UTC

This works exactly as I expected. 

Thank you for your assistance.

PK Prasanna Kumar Viswanathan Syncfusion Team August 6, 2018 04:45 AM UTC

Hi Anthony, 
 
We are happy to hear that your issue has been solved. 
 
Please let us know if you need any further assistance. 
 
Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon