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. Image for the cookie policy date

Show checkbox and start with rows collapsed

Hi,

I have two questions about the MVC TreeGrid control....

1. Is it possible to show a column as a checkbox (read only)? (I can bind the data to a bool)

2. Is it possible to make the control start with all the rows collapsed?
(At the moment it starts with everything expanded)

Thanks

6 Replies

JR John Rajaram Syncfusion Team February 16, 2015 10:09 AM UTC

Hi Neil,

Thanks for using Syncfusion products.

Query

Syncfusion Comments

Is it possible to show a column as a checkbox (read only)? (I can bind the data to a bool)

Yes, It is possible to render a column with checkbox in TreeGrid control with the help of Column Template and JS RENDER. Please refer the below code snippets for more details.

<body style="position: static; margin: 0px; padding: 2px">

<script type="text/x-jsrender" id="customColumnTemplate">

<div style="margin-left:20px;">{{if State}} <input class="customCheckbox" type="checkbox" checked="checked" value="" />{{else}} <input class="customCheckbox" type="checkbox" value="" />{{/if}}div>

script>

@(Html.EJ().TreeGrid("Tree")

//...

.Columns(co =>

{

//...

co.Field("State").headerText("State").IsTemplateColumn(true).TemplateID("customColumnTemplate").EditType(TreeGridEditingType.Boolean).Add();

}

)

.Datasource((System.Collections.IEnumerable)ViewBag.datasource)

)

@(Html.EJ().ScriptManager())

body>

Is it possible to make the control start with all the rows collapsed?

(At the moment it starts with everything expanded)

Yes, it is possible to collapse all rows while loading TreeGrid at the initial stage by enabling the property “EnableCollapseAll” as true.

Please refer the below code snippets for more details.

Code snippets:

<body style="position: static; margin: 0px; padding: 2px">

@(Html.EJ().TreeGrid("Tree")

//...

.EnableCollapseAll(true)

.Datasource((System.Collections.IEnumerable)ViewBag.datasource)

)

@(Html.EJ().ScriptManager())

body>

We have also prepared a sample based on this. Please find the sample from the following location.

Sample: http://www.syncfusion.com/downloads/support/directtrac/118236/TreeGridSampleMVC_checkboxColumn-213388283.zip

Please let us know if you require further assistance on this.

Regards,
John. R




ME Megatron August 16, 2016 08:20 PM UTC

Hello, I am following this sample for checkbox with Treegrid, this sample and documentation do not have help on getting the selected/checked nodes in the hierarchy, with drag and drop enabled

  • I need help with how to get the selected /checked hierarchy items for a strongly typed model, with drag and drop enabled. Basically
    get the Selected nodes checkbox on the ASP MVC POST action as a strongly typed hierarchy view model. I would also like to include font-awesome icon to the column.
  • Can you show me how to allow only dropping nodes under root nodes.

Can you please show this with

thanks
M


ME Megatron August 16, 2016 08:27 PM UTC

please updated to webpages 3 with current libs for 4.5.2

Server Error in '/' Application.

Compilation Error

Description:An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message:CS1660: Cannot convert lambda expression to type 'System.Collections.Generic.List<Syncfusion.JavaScript.Models.TreeGridColumn>' because it is not a delegate type

Source Error:


Line 36:        .ChildMapping("Children")
Line 37:        .TreeColumnIndex(1)
Line 38:        .Columns(co =>
Line 39:            {
Line 40:                co.Field("TaskId").headerText("Task Id").EditType(TreeGridEditingType.Numeric).Width(45).Add();





JS Jonesherine Stephen Syncfusion Team August 17, 2016 04:29 PM UTC

Hi Megatron, 
Thanks for contacting Syncfusion support 
Query1:  need help with how to get the selected /checked hierarchy items for a strongly typed model, with drag and drop enabled. Basically get the selected nodes checkbox on the ASP MVC POST action as a strongly typed hierarchy view model.  
Solution: 
By using the column template property we can add custom checkbox in TreeGrid. We have prepared the work around and retrieved the checked records in server side from client side. 
Please find the code snippet below: 
    <script type="text/x-jsrender" id="customColumnTemplate"> 
        <div style='padding-left:5px;'>{{if State}}<input type="checkbox" checked disabled>{{else}}<input type="checkbox" disabled />{{/if}}</div>         
    </script> 
    <button onclick="checkdata()">Go to server</button> 
    @(Html.EJ().TreeGrid("TreeGridContainer")        
       .Columns(co => 
       {                      co.Field("State").HeaderTemplateID("#approved").IsTemplateColumn(true).TemplateID("customColumnTemplate").EditType(TreeGridEditingType.Boolean).Add(); 
       })        
    ) 
    @(Html.EJ().ScriptManager()) 
    <script>   
        function checkdata() { 
            var treeObj = $("#TreeGridContainer").data("ejTreeGrid"), 
              flatRecords = treeObj.model.flatRecords, 
              filteredItem, records = [], 
              filteredItem = flatRecords.filter(function (value) { 
                  if (value.item.State === true) 
                      records.push(value.item); 
              }); 
            $.ajax({ 
                type: "POST", 
                url: "TreeGrid/Update", 
                data: JSON.stringify({ Task: records }), 
                contentType: "application/json; charset=utf-8", 
                dataType: "json",                 
            }); 
        }         
    </script> 
Query2: I would also like to include font-awesome icon to the column. 
Solution: We can use font-awesome icon in Syncfusion widgets. We have used font-awesome icon in column header template. We have prepared the sample and rendered the custom icon in a column. 
Please find the code snippet below:  
   @(Html.EJ().TreeGrid("TreeGridContainer")       
       .Columns(co => 
       {                      co.Field("State").HeaderTemplateID("#approved").IsTemplateColumn(true).TemplateID("customColumnTemplate").EditType(TreeGridEditingType.Boolean).Add(); 
       })        
    ) 
    @(Html.EJ().ScriptManager()) 
       //To append the custom icons in column header template 
    <script type="text/x-jsrender" id="approved"> 
             <div> 
                <i class="fa fa-check-square-o" aria-hidden="true"></i> Approved 
            </div>      
    </script> 
Query3: Can you show me how to allow only dropping nodes under root nodes 
Solution: 
By using the “rowDrag” and “rowDragStop” client side events we can allow the drop only under the root nodes. 
Please find the code snippet below: 
@(Html.EJ().TreeGrid("TreeGridContainer") 
       .AllowDragAndDrop(true) 
       .ClientSideEvents(eve=> 
       { 
           eve.RowDragStop("rowdragstop"); 
           eve.RowDrag("rowdrag"); 
       })  
    ) 
    @(Html.EJ().ScriptManager()) 
    <script>   
        function rowdrag(args) { 
            if (args.targetRow.level != 0) 
            {              
                args.canDrop = false; 
            } 
        } 
        function rowdragstop(args) {                      
            if (args.targetRow.level == 0 && (args.requestType == "insertAbove" || args.requestType == "insertAsChild")) { 
                args.cancel = true; 
            } 
        } 
    </script> 
Query 4: Compilation Error 
Solution: 
Please ensure whether the scripts and themes are referred as similar to the dlls version referred. 
And ensure assembly version is properly mentioned in web.config file. 
We have also prepared the sample in version 14.2.0.28 for your reference. Please find the sample from below location: 
 
Disclaimer: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.MVC dlls to render the TreeGrid control which is available in Essential Studio installed location.  
Syncfusion.EJ: C:\Program Files (x86)\Syncfusion\Essential Studio\14.2.0.28\Assemblies\4\ Syncfusion.EJ.dll  
Syncfusion.EJ.MVC: C:\Program Files (x86)\Syncfusion\Essential Studio\14.2.0.28\Assemblies\MVC\MVC4\Syncfusion.EJ.MVC.dll  
Please let us know if you require further assistance on this.
Regards, 
Jone sherine P S
  



ME Megatron August 17, 2016 06:41 PM UTC

Hi, the checkboxes are not editable, also this web pages 2.0.0.0, can you please make this current, and checkboxes editable.

thanks


JS Jonesherine Stephen Syncfusion Team August 18, 2016 03:11 PM UTC

Hi Megatron, 
Query: Hi, the checkboxes are not editable, also this web pages 2.0.0.0, can you please make this current, and checkboxes editable. 
Solution: By using the “editType” as boolean in columns properties we can edit the disabled check box in double click action. And also we have prepared the work around and enabled the checkboxes and updated the changes in checkbox change event and retrieved the checked records in server side. 
    <script type="text/x-jsrender" id="customColumnTemplate"> 
        <div style='padding-left:5px;'>{{if State}}<input type="checkbox" class="customCheckbox" checked >{{else}}<input type="checkbox" class="customCheckbox" />{{/if}}</div> 
    </script> 
    @(Html.EJ().TreeGrid("TreeGridContainer") 
       .Columns(co => 
{  co.Field("State").HeaderTemplateID("#approved").IsTemplateColumn(true).TemplateID("customColumnTemplate").EditType(TreeGridEditingType.Boolean).Add(); 
       })  
    ) 
    @(Html.EJ().ScriptManager()) 
    <button onclick="checkdata()" style="margin-top:20px">Go to server</button> 
        <script> 
        $("#TreeGridContainer").on("change", ".customCheckbox", function (e) {           
            var $tr = $(e.target).closest('tr'), 
                treeObj = $("#TreeGridContainer").data("ejTreeGrid"), 
                 checkStatus = $(e.target).is(':checked'), 
                 rowIndex = treeObj.getRows().index($tr), 
                 record = treeObj.model.flatRecords &&     treeObj.model.flatRecords[rowIndex]; 
            record.item.State = checkStatus; 
        }); 
        function checkdata() { 
            var treeObj = $("#TreeGridContainer").data("ejTreeGrid"), 
              flatRecords = treeObj.model.flatRecords, 
              filteredItem, records = [], 
              filteredItem = flatRecords.filter(function (value) { 
                  if (value.item.State === true) 
                      records.push(value.item); 
              }); 
            $.ajax({ 
                type: "POST", 
                url: "TreeGrid/Update", 
                data: JSON.stringify({ Task: records }), 
                contentType: "application/json; charset=utf-8", 
                dataType: "json", 
            }); 
        } 
    </script> 
 
We have also prepared the sample with webpages version 3.0.0.0 and framework 4.5.2 for your reference. Please find the sample from below location. 
Disclaimer: We have removed bin and obj folder in the given sample for some security reasons, we must include Syncfusion.EJ and Syncfusion.EJ.MVC dlls to render the TreeGrid control which is available in Essential Studio installed location.   
Syncfusion.EJ: C:\Program Files (x86)\Syncfusion\Essential Studio\14.2.0.28\Assemblies\4.5\ Syncfusion.EJ.dll   
Syncfusion.EJ.MVC: C:\Program Files (x86)\Syncfusion\Essential Studio\14.2.0.28\Assemblies\MVC\MVC5\Syncfusion.EJ.MVC.dll   
Please let us know if you require further assistance on this.
Regards, 
Jone sherine P S
   


Loader.
Up arrow icon