Help with template in ejTreeGrid columns

[Jay Faulkner]

Hello,

I'm using the ejTreeGrid within a custom directive of an AngularJS application, and I'm trying to add a column that has a checkbox in each row that is bound to a boolean data member on my controller. I am not using the checkbox selection type, because I need a checkbox that is not associated with selection. I've tried all the options I see in the columns array without success. Either I get an error, a checkbox that cannot be edited, or a checkbox with no access to angular bindings. Below is my treegrid followed by what I've tried for a first column with checkbox along with the associated result. I need to be able to invoke a function on my controller when the checkbox state changes, and be able to pass or access the treegrid row index of the checkbox that changed state. I'd also like to add a similar checkbox to the header, but I've run into the same issue with the header template.

$(function () {

  $("#propTreeGridContainer").ejTreeGrid({

     allowColumnResize: true,

     allowMultiSorting: false,

     allowSelection: true,

     allowSorting: false,

     childMapping: "children",

     columns: [

        { field: "bSelectedForOutput", headerText: "", displayAsCheckbox: true,

          editType: ej.TreeGrid.EditingType.Boolean, allowEditing: true, width: "50" },

        { field: 'type', headerText: 'Type', headerTextAlign: ej.TextAlign.Center, width: "40",

          textAlign: ej.TextAlign.Center, isFrozen: false, allowFreezing: false, allowEditing: false, visible: true },

        { field: 'gridName', headerText: 'Name', headerTextAlign: ej.TextAlign.Center, width: "130",

          textAlign: ej.TextAlign.Left, allowEditing: false, visible: true },

        { field: 'gridProperty', headerText: 'Property', headerTextAlign: ej.TextAlign.Center, width: "280",

          allowEditing: false, visible: true }

     ],

     columnResizeSettings: {

         columnResizeMode : ej.TreeGrid.ColumnResizeMode.NextColumn

     },

     contextMenuSettings: {

         showContextMenu: false,

         contextMenuItems: []

     },

     dataSource: myController.stepData.gridProperties,

     editSettings: {

         allowEditing: true,

     },

     emptyRecordText: "No properties to display.",

     enableResize: true,

     isResponsive: true,

     selectionSettings: {

         selectionType: "multiple",

         selectionMode: ej.TreeGrid.SelectionMode.Row,

         enableSelectAll: true,

         enableHierarchySelection: true

     },

     sizeSettings: {

         width: "100%",

     },

     selectedRowIndex: -1,

     treeColumnIndex: 0,

     actionComplete: treeGridCallback_ActionComplete,

     create: treeGridCallback_Create,

     collapsed: treeGridCallback_Collapsed,

     expanded: treeGridCallback_Expanded,

     recordClick: treeGridCallback_RecordClick,

     rowSelecting: treeGridCallback_RowSelecting,

     rowSelected: treeGridCallback_RowSelected,

     contextMenuOpen: treeGridCallback_ContextMenuOpen

  });

});

I've tried the following for the first column:

1. { field: "bSelectedForOutput", headerText: "", displayAsCheckbox: true, editType: ej.TreeGrid.EditingType.Boolean,

     allowEditing: true, showCheckbox: true, width: "50" },

Result: I get a checkbox in each row that is bound to the correct data, but I cannot check/uncheck the checkbox even though I'm setting allowEditing to true.

2. { isTemplateColumn: true, angularTemplate: "#ngColumnTemplate", allowEditing: true, width: "50" },

   with the following in the directives associated template:

   <script type="text/ng-template" id="ngColumnTemplate">

     <div style="">TEST</div>

   </script>

Result: jQuery.Deferred exception: Cannot read properties of null (reading 'id') TypeError: Cannot read properties of null (reading 'id')

    at Object._createTemplateElement (http://localhost:17060/vendorSyncfusion.js:161:4631620)

    at Object._addInitTemplate (http://localhost:17060/vendorSyncfusion.js:161:4619826)

    at Object._initGridRender (http://localhost:17060/vendorSyncfusion.js:161:4582022)

    at Object._checkDataBinding (http://localhost:17060/vendorSyncfusion.js:161:4500659)

    at Object._renderQueriedRecords (http://localhost:17060/vendorSyncfusion.js:161:4507817)

    at Object._initDatasource (http://localhost:17060/vendorSyncfusion.js:161:4506257)

    at Object._init (http://localhost:17060/vendorSyncfusion.js:161:4455065)

    at new <anonymous> (http://localhost:17060/vendorSyncfusion.js:161:21596)

    at jQuery.fn.init.n.fn.<computed> [as ejTreeGrid] (http://localhost:17060/vendorSyncfusion.js:161:22853)

    at HTMLDocument.<anonymous> (http://localhost:17060/app.js:70369:40) undefined

3. { isTemplateColumn: true, templateID: "columnTemplate", allowEditing: true, width: "50" },

   with the following in the directives associated template:

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

    <div style="">

        <input type="checkbox" onchange='myController.onSelectForOutput()'></input>

    </div>

   </script>

Result: This does add an editable checkbox for every row of the column, but there is no binding to the data on my directives controller - myController is undefined. Is there a way to get angular data bound to the input using this mechanism"? I think perhaps it's not supported using a script tag of this type...

4. { isTemplateColumn: true, allowEditing: true, width: "50",

     template: `<script type='text/x-jsrender' id='columnTemplate'>

       <div style='display:inline-block;'>

          <input type="checkbox" onchange='myController.onSelectForOutput()'></input>

       </div></script>`},

Result: Same as 3.

[Monisha Sivanthilingam]

Hi Jay, 

 

Greetings from Syncfusion support. 

 

We have used column template to render the check box in a custom column. We have also bound the checkbox change event so that every time we change the state of a checkbox, (i.e.), check/uncheck a record, the value true/or false will be recorded in a state variable. The below code snippets demonstrate the solution. 

 

 

columns: [ 

  { field: "taskID", headerText: "Task Id", editType: "numericedit", }, 

  { field: "taskName", headerText: "Task Name", editType: "stringedit" }, 

  { field: "startDate", headerText: "Start Date", editType: "datepicker", format: dateFormat }, 

  { field: "endDate", headerText: "End Date", editType: "datepicker", format: dateFormat }, 

  { field: "duration", headerText: "Duration", editType: "numericedit", visible: false }, 

  { field: "progress", headerText: "Progress" }, 

  { field: "custom", headetText: "CheckBox", isTemplateColumn: true, templateID: "columnTemplate" } 

], 

 

 

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

  <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> 

 

 

$("#TreeGridContainer").on("change", ".customCheckbox", function (e) { 

       var $tr = $(e.target).closest('tr'), 

        treeGridObj= $("#TreeGridContainer").data("ejTreeGrid"), 

        checkStatus = $(e.target).is(':checked'), 

        $gridRows = treeGridObj.getRows(), 

        rowIndex = $gridRows.index($tr), 

        record = treeGridObj.model.currentViewData && treeGridObj.model.currentViewData[rowIndex]; 

        record["state"] = checkStatus; 

    }); 

 

 

Sample: https://jsplayground.syncfusion.com/z4pi5way 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Jay Faulkner]

Thank you, that appears to work for the rows.  I tried something similar for the header template, but it does not work.  Any suggestions?  I changed the first column to the following:

{ headerTemplateID: "#headerTemplate", headerText:"", isTemplateColumn: true, templateID: "columnTemplate", width: "50" },

And added the following to the HTML:

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

    <div style="margin-left: 20px;">

        {{if State}} <input class="headerCheckbox" type="checkbox" checked="checked" value=""/>

        {{else}} <input class="headerCheckbox" type="checkbox" value=""/>{{/if}}

    </div>

</script>

However, the header simply takes the content of the div and displays it as follows (the conditional is not being evaluated):

{{if State}} followed by a checked checkbox, followed by {{else}} and an unchecked checkbox, and then {{/if}}

[Premkumar Sudalaimuthu]

Hi Faulker , 

  

We can able to render checkbox for header template using your code snippets. We have shared a sample which includes checkbox in header. Please refer to the sample for more information. 

  

Code snippets: 

  

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

  

    <div style="margin-left: 20px;"> 

  

        {{if State}} <input class="headerCheckbox" type="checkbox" checked="checked" value=""/> 

  

        {{else}} <input class="headerCheckbox" type="checkbox" value=""/>{{/if}} 

  

    </div> 

  

</script> 

  

  

{ headerTemplateID: "#headerTemplate", headerText:"", isTemplateColumn: true, templateID: "columnTemplate", width: "100" }, 

  

Sample: https://jsplayground.syncfusion.com/mh2o1ade  

  

Regards, 

Premkumar S 

[Edward Hunter]

I've been working on a useful project where I need to customize the content of specific columns in the EJTreeGrid. From what I understand, using templates seems to be the way to go. However, I'm facing some challenges in implementing them correctly. If anyone has experience working with templates in EJTreeGrid columns, I would greatly appreciate your assistance. Specifically, I need to know how to define and apply a template to a particular column, as well as how to access and manipulate the data within the template.Any code snippets, examples, or documentation references would be immensely helpful. I have gone through the official Syncfusion documentation, but additional guidance from the community would be invaluable. I look forward to hearing your suggestions and insights. Thanks.

[Udhayakumar Anand]

Hi Edward Hunter,

To assist you, we have reviewed your request and have provided you with a User Guide (UG) link that contains comprehensive information about column templates. This resource will guide you on how to define and apply templates to specific columns, as well as how to access and manipulate the data within the template

In addition to the UG link, we have also shared a Knowledge Base (KB) link that provides additional information about column templates. This will further enhance your understanding and help you overcome any challenges you may face during implementation.

Please refer to the following resources:

User Guide (UG) Link: https://help.syncfusion.com/angularjs/treegrid/columns#column-template

Knowledge Base (KB) Link: https://support.syncfusion.com/kb/article/8061/how-to-customize-the-javascript-treegrid-column-using-angular-template

We believe that these resources, along with the official Syncfusion documentation you have already explored, will provide you with the necessary guidance and examples to successfully implement column templates in your project.

If you have any further questions or require additional assistance, please don't hesitate to reach out.

Regards,

Udhayakumar