1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Treegrid checkbox selection load and save from controller

Treegrid checkbox selection load and save from controller

Hi, i am using .NET Core EJ2 TreeGrid component, i have Create.cshtml page which is i am loading from the controller by passing in a viewmodel, it is a form page. so i can populate the TreeGrid with a list of product group object, the product group class is as follows:
          
          public class ProductGroup
    {
        public int ProductGroupID { get; set; }
        public int? ParentID { get; set; }
        public string GroupName { get; set; }
        public bool Archive { get; set; }
        public bool isParent => (ParentID != null);
        public bool isSelected { get; set; }
        
        [ForeignKey("ParentID")]
        public virtual ProductGroup Parent { get; set; }

        public virtual ICollection<ProductGroup> Children { get; set; }
    }

the TreeGrid loads fine, but how can i bind the checkbox values to isSelected so i can load and send back all the checkbox values back to the controller within a form? and how can i enable autocheckhierarchy maintaining this layout?
i have currently got this treegrid snippet:

           <ejs-treegrid id="TreeGrid" dataSource="@Model.ProductGroups" idMapping="ProductGroupID" parentIdMapping='ParentID' treeColumnIndex="2">
                <e-treegrid-selectionsettings persistSelection="true" ></e-treegrid-selectionsettings>
                <e-treegrid-columns>
                    <e-treegrid-column type="checkbox" field="isSelected" width="20"></e-treegrid-column>
                    <e-treegrid-column field="ProductGroupID" isPrimaryKey="true" visible="false" headerText="ProductGroup ID" textAlign="Right"></e-treegrid-column>
                    <e-treegrid-column field="GroupName" headerText="Product Groups" width="180"></e-treegrid-column>
                </e-treegrid-columns>
            </ejs-treegrid>

7 Replies 1 reply marked as answer
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 18, 2020 03:59 PM UTC

Hi Yasin, 
 
Thanks for contacting Syncfusion Support. 

Query#:- how can i bind the checkbox values to isSelected so i can load and send back all the checkbox values back to the controller within a form.  

We have checked your query and based on isSelected(either true or false) property, row will be selected on Initial Load with checkbox Selection. You can either get the checkbox values either from DataBound or BeforeDataBound event on Initial rendering of the TreeGrid and pass it to server end for further actions. 

Refer to the code below:- 
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" idMapping="TaskId" parentIdMapping='ParentId' allowPaging="true" treeColumnIndex="1" beforeDataBound="beforeDataBound"> 
            <e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings> 
            <e-treegrid-selectionsettings persistSelection="true"></e-treegrid-selectionsettings> 
            <e-treegrid-columns> 
                <e-treegrid-column type="checkbox" field="isSelected" width="20"></e-treegrid-column> 
                <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column> 
                   .    .   . 
               <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column> 
            </e-treegrid-columns> 
        </ejs-treegrid> 
 
        <script> 
            function beforeDataBound(args) { 
               var Data = args.result.filter(data => data.isSelected)  //get the checkbox selected value in beforeDataBound event 
                
               var ajax = new ej.base.Ajax({    
                      url: "/Home/rebindData", 
                      type: "POST", 
                       contentType: "application/json", 
                       datatype: "json", 
                      JSON.stringify({ data: Data })    //pass the data to server end 
                  }); 
                ajax.send(); 
               ajax.onSuccess = function (result) { 
                    alert("Success") 
               }   
                
            } 
        </script> 


Screenshot:- 
 
Refer to the API Link:- 

Query#:- how can i enable autocheckhierarchy maintaining this layout? 

From your query we suspect that you need to display type checkbox column to behave like autoCheckHierarchy. In our TreeGrid we can have checkbox column support(supports hierarchy) by enabling autoCheckHierarchy property as true. It is also possible to select the rows hierarchically using checkboxes in TreeGrid. 

Refer to the documentation and Demo Links:- 

If we misunderstood your query please share detail Explanation/Screenshots of you requirement to proceed further. 

Regards, 
Farveen sulthana T 


Marked as answer
YA Yasin December 18, 2020 04:33 PM UTC

Hi,

thanks for your reply and workaround but i cannot account the sample project link you have provided. can you please change the access level so i can access it?

thanks
Yasin

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 21, 2020 02:49 PM UTC

Hi Yasin, 
 
Sorry for the inconvenience caused. 
 
We have re-attached the sample for your reference. Refer to the sample below:- 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Farveen sulthana T 


YA Yasin December 21, 2020 02:58 PM UTC

Hi,

thankyou for that. i have noticed a bug with treegrid control, if dialog mode is defined then when adding an data to the treegrid via the dialog form, if the Enter key is pressed instead of the Save button then the page is redirected to the controller action with the added parameters and then it calls the save action. so if my controller is called ProductGroups and my page and action is called Index then pressing Enter key redirects page to '/ProductGroups/Index?GroupName=somegroupname'.

currently i had to use jquery to temporary fix this:
$(document).ready(function () {
        $(window).keydown(function (event) {
            if (event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
    });

can you please fix this?
thanks
Yasin

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 22, 2020 04:32 PM UTC

Hi Yasin, 

Thanks for your update. 

Query#:- i have noticed a bug with treegrid control, if the Enter key is pressed instead of the Save button then the page is redirected to the controller action with the added parameters and then it calls the save action. 
 
By default, while pressing the Enter key (when TreeGrid is in EditMode) it will perform the save action which is considered behavior(Keyboard actions supported in TreeGrid) not Bug. Refer to the documentation LinK about keyboard shortcuts for TreeGrid actions:- 
 
If you want to prevent this Keyboard action on Saving the record, we can achieve it by using ActionComplete event of the TreeGrid. In ActionComplete event we have bind keydown event  for input elements of Dialog when requestType as beginEdit and prevent save on pressing Enter key and also we have remove the keydown event on ActionBegin event of TreeGrid.  
 
Refer to the code below:- 
<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" idMapping="TaskId" actionBegin="actionBegin" actionComplete="actionComplete"    parentIdMapping='ParentId' allowPaging="true" treeColumnIndex="1"> 
         
                 .   .    . 
 
</ejs-treegrid> 
 
<script> 
 
 
    function keydownHandler(e) { 
       if (e.keyCode == 13) { 
            e.preventDefault();  //prevent save action on pressing Enter Key          
             e.stopPropagation(); 
            return; 
      } 
 
    } 
    function actionBegin(args) { 
        if (args.requestType == "save") { 
            Array.from(args.dialog.element.querySelectorAll("input")).map(input => input.removeEventListener("keydown", keydownHandler));   //remove keydown event for input 
        } 
    } 
 
    function actionComplete(args) { 
        if (args.requestType == "beginEdit") { 
             Array.from(args.dialog.element.querySelectorAll("input")).map(input => input.addEventListener("keydown", keydownHandler));   //bind keydown event for input 
 
        } 
    } 
 
<script> 
 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Farveen sulthana T 


YA Yasin December 22, 2020 05:01 PM UTC

Hi, thanks for your reply. you have misunderstood what i stated. i understand the default action if Enter key is pressed which is fine, however if the CRUD actions are handled on a 'actionComplete' javascript  function, in my scenario i have different ajax calls for update, create, delete within the 'actionComplete' javascript function which are determined by the 'args.action' - so update action invokes POST ajax call to a Update method in the controller, delete action invokes POST ajax call to a Delete method in the controller, create action invokes POST ajax call to a Create method in the controller, after ajax call is made then another ajax call is made to get the refreshed data from the controller. What i am trying to explain is that when a dialog box is open within the TreeGrid and you enter some data and press Enter key, suppose you are on page called Index within a controller - the Index (or whatever page you are on) method is called within the controller first with the data i entered passed in as parameters, once that method executes it then calls the relevant method in the controller so Create/Update/Delete - however by that time when the 2nd relevant method (to the controller) is called the page is already reloaded and the TreeGrid isn't reloaded with correct data - this is incorrect, it should just call the relevant Create/Update/Delete first and not call the Index method at all.

does that make sense?

thanks
Yasin

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 23, 2020 04:13 PM UTC

Hi Yasin, 

Query#:- it should just call the relevant Create/Update/Delete first and not call the Index method at all. 

We have checked your query and we are unable to reproduce the problem at our end(Pressing Enter key calls the update method alone).  Refer to the sample Link:- 
 
We need some more additional details to find the cause of the issue. Share us the following details. 
 
  1. Complete TreeGrid code example(both client and server) and handling actions at ActionComplete event.
  2. Screenshot/Video Demo to replicate the issue.
  3. If possible replicate the issue in the above sample and revert us back.
  4. Syncfusion package version details.
 
Regards, 
Farveen sulthana T 


Loader.
Up arrow icon