Documentation - Need to add TreegridUG for empty record template, col…

ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-chooser-template/column-chooser-template.cs

@@ -0,0 +1,6 @@
+public IActionResult Index()
+{
+    var tree = TreeData.GetFormatData();
+    ViewBag.data = tree;
+    return View();
+}

ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-chooser-template/razor

@@ -0,0 +1,126 @@
+
+@Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.sampleData).ChildMapping("subtasks").TreeColumnIndex(1).ShowColumnChooser(true).Toolbar(new List<string> { "ColumnChooser" }).ColumnChooserSettings(cc => { cc.HeaderTemplate("#ccHeaderTemplate"); cc.Template("#ccContentTemplate"); cc.FooterTemplate("#ccFooterTemplate"); cc.EnableSearching(true); }).Columns(col =>
+{
+   col.Field("taskID").HeaderText("Task ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width(90).Add();
+   col.Field("taskName").HeaderText("Task Name").Width(240).ShowInColumnChooser(false).Add();
+   col.Field("startDate").HeaderText("Start Date").Width(110).Format("yMd").Add();
+   col.Field("endDate").HeaderText("End Date").Width(110).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Type("date").Format("yMd").Add();
+   col.Field("duration").HeaderText("Duration").Width(100).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("progress").HeaderText("Progress").Width(100).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("priority").HeaderText("Priority").Width(90).Add();
+}).Height(315).Created("onCreated").Render()
+
+<script type="text/x-template" id="ccHeaderTemplate">
+    <div class="e-cc-header">Choose Columns</div>
+</script>
+
+<script type="text/x-template" id="ccContentTemplate">
+    <div id="customColumnChooser"></div>
+</script>
+
+<script type="text/x-template" id="ccFooterTemplate">
+    <div class="e-cc-footer">
+        <button id="submitButton">Apply</button>
+        <button id="abortButton">Cancel</button>
+    </div>
+</script>   
+
+< script >
+    let treeObj;
+    let treeData = [];
+
+    function renderCustomColumnChooser(targetElement, columns) {
+        const parentNodes = [
+            { id: 1, name: 'Task Info', hasChild: true, expanded: true },
+            { id: 2, name: 'Schedule', hasChild: true, expanded: true },
+            { id: 3, name: 'Progress', hasChild: true, expanded: true },
+        ];
+
+        treeData = columns.map(column => {
+            let parentId;
+            switch (column.field) {
+                case 'taskID':
+                case 'taskName':
+                    parentId = 1;
+                    break;
+                case 'startDate':
+                case 'endDate':
+                    parentId = 2;
+                    break;
+                case 'duration':
+                case 'progress':
+                case 'priority':
+                    parentId = 3;
+                    break;
+            }
+            return {
+                id: column.uid,
+                name: column.headerText,
+                pid: parentId,
+                isChecked: column.visible
+            };
+        });
+
+        const uniquePids = [...new Set(treeData.map(item => item.pid))];
+        const filteredParents = parentNodes.filter(parent => uniquePids.includes(parent.id));
+        treeData.push(...filteredParents);
+
+        treeObj = new ej.navigations.TreeView({
+            fields: { dataSource: treeData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
+            showCheckBox: true,
+            nodeClicked: nodeCheck,
+            keyPress: nodeCheck,
+            cssClass: "no-border"
+        });
+
+        treeObj.appendTo(targetElement);
+    }
+
+    function nodeCheck(args) {
+        const node = args.node;
+        const getNodeDetails = treeObj.getNode(node);
+        const checkedNode = [node];
+        if (args.event.target.classList.contains('e-fullrow') || args.event.key === "Enter") {
+            if (getNodeDetails.isChecked === 'true') {
+                treeObj.uncheckAll(checkedNode);
+            } else {
+                treeObj.checkAll(checkedNode);
+            }
+        }
+    }
+
+    function columnChooserSubmit() {
+        const checkedElements = [];
+        const uncheckedElements = [];
+        const treeItems = document.querySelectorAll('.e-list-item');
+        treeItems.forEach(item => {
+            const itemDetails = treeObj.getNode(item);
+            if (!itemDetails.hasChildren) {
+                if (item.getAttribute('aria-checked') === 'true') {
+                    checkedElements.push(itemDetails.text);
+                } else {
+                    uncheckedElements.push(itemDetails.text);
+                }
+            }
+        });
+
+        const visibleColumns = checkedElements;
+        const hiddenColumns = uncheckedElements;
+        treeGridObj.grid.columnChooserModule.changeColumnVisibility({ visibleColumns, hiddenColumns });
+    }
+
+    function onCreated() {
+        new ej.buttons.Button().appendTo('#submitButton');
+        new ej.buttons.Button().appendTo('#abortButton');
+        document.getElementById('submitButton').onclick = columnChooserSubmit;
+        document.getElementById('abortButton').onclick = () => {
+            treeGridObj.grid.columnChooserModule.hideDialog();
+        };
+    }
+
+    let treeGridObj;
+    document.addEventListener('DOMContentLoaded', function () {
+        treeGridObj = document.getElementById('TreeGrid').ej2_instances[0];
+        treeGridObj.columnChooserSettings.renderCustomColumnChooser = renderCustomColumnChooser;
+    });
+</script>

ej2-asp-core-mvc/code-snippet/tree-grid/columns-core/column-chooser-template/tagHelper

@@ -0,0 +1,139 @@
+
+
+<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" childMapping="subtasks" treeColumnIndex="1" height="315" toolbar="@(new List<string>() { "ColumnChooser" })" showColumnChooser="true">
+    <e-treegrid-columnChooserSettings  headerTemplate="#ccHeaderTemplate" template="#ccContentTemplate" footerTemplate="#ccFooterTemplate" enableSearching="true"> </e-treegrid-columnChooserSettings>
+    <e-treegrid-columns>
+        <e-treegrid-column field="taskID" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
+        <e-treegrid-column field="taskName" headerText="Task Name" width="240" showInColumnChooser="false"></e-treegrid-column>
+        <e-treegrid-column field="startDate" headerText="Start Date" width="110" format="yMd"></e-treegrid-column>
+        <e-treegrid-column field="endDate" headerText="End Date" width="110" textAlign="Right" type="date" format="yMd"></e-treegrid-column>
+        <e-treegrid-column field="duration" headerText="Duration" width="100" textAlign="Right"></e-treegrid-column>
+        <e-treegrid-column field="progress" headerText="Progress" width="100" textAlign="Right"></e-treegrid-column>
+        <e-treegrid-column field="priority" headerText="Priority" width="90"></e-treegrid-column>
+    </e-treegrid-columns>
+</ejs-treegrid>
+
+<!-- Templates -->
+<script id="ccHeaderTemplate" type="text/x-template">
+    <div class="cc-header">
+        <span class="e-icons e-columns"></span>
+        <span>Column Options</span>
+    </div>
+</script>
+
+<script id="ccContentTemplate" type="text/x-template">
+    <div id="treeViewContainer"></div>
+</script>
+
+<script id="ccFooterTemplate" type="text/x-template">
+    <div class="cc-footer">
+        <button id="submitButton">Apply</button>
+        <button id="abortButton">Close</button>
+    </div>
+</script>
+
+<script>
+    var treeObj;
+    var treeData = [];
+
+    function renderCustomColumnChooser(targetElement, columns) {
+        var parentNodes = [
+            { id: 1, name: 'Task Info', hasChild: true, expanded: true },
+            { id: 2, name: 'Schedule', hasChild: true, expanded: true },
+            { id: 3, name: 'Progress', hasChild: true, expanded: true }
+        ];
+
+        treeData = columns.map(function (column) {
+            var parentId;
+            switch (column.field) {
+                case 'taskID':
+                case 'taskName':
+                    parentId = 1;
+                    break;
+                case 'startDate':
+                case 'endDate':
+                    parentId = 2;
+                    break;
+                case 'duration':
+                case 'progress':
+                case 'priority':
+                    parentId = 3;
+                    break;
+            }
+            return {
+                id: column.uid,
+                name: column.headerText,
+                pid: parentId,
+                isChecked: column.visible
+            };
+        });
+
+        var uniquePids = [...new Set(treeData.map(item => item.pid))];
+        var filteredParents = parentNodes.filter(parent => uniquePids.includes(parent.id));
+        treeData.push(...filteredParents);
+
+        treeObj = new ej.navigations.TreeView({
+            fields: { dataSource: treeData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
+            showCheckBox: true,
+            nodeClicked: nodeCheck,
+            keyPress: nodeCheck,
+            cssClass: "no-border"
+        });
+
+        treeObj.appendTo(targetElement);
+    }
+
+    function nodeCheck(args) {
+        var node = args.node;
+        var getNodeDetails = treeObj.getNode(node);
+        var checkedNode = [node];
+
+        if (args.event.target.classList.contains('e-fullrow') || args.event.key === "Enter") {
+            if (getNodeDetails.isChecked === 'true') {
+                treeObj.uncheckAll(checkedNode);
+            } else {
+                treeObj.checkAll(checkedNode);
+            }
+        }
+    }
+
+    function columnChooserSubmit() {
+        var checkedElements = [];
+        var uncheckedElements = [];
+
+        var treeItems = document.querySelectorAll('.e-list-item');
+        treeItems.forEach(function (item) {
+            var itemDetails = treeObj.getNode(item);
+            if (!itemDetails.hasChildren) {
+                if (item.getAttribute('aria-checked') === 'true') {
+                    checkedElements.push(itemDetails.text);
+                } else {
+                    uncheckedElements.push(itemDetails.text);
+                }
+            }
+        });
+
+        var visibleColumns = checkedElements;
+        var hiddenColumns = uncheckedElements;
+
+        var treeGridObj = document.getElementById('TreeGrid').ej2_instances[0];
+        treeGridObj.grid.columnChooserModule.changeColumnVisibility({ visibleColumns, hiddenColumns });
+    }
+
+    function onCreated() {
+        new ej.buttons.Button().appendTo('#submitButton');
+        new ej.buttons.Button().appendTo('#abortButton');
+
+        document.getElementById('submitButton').onclick = columnChooserSubmit;
+        document.getElementById('abortButton').onclick = function () {
+            var treeGridObj = document.getElementById('TreeGrid').ej2_instances[0];
+            treeGridObj.grid.columnChooserModule.hideDialog();
+        };
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        var treeGridObj = document.getElementById('TreeGrid').ej2_instances[0];
+        treeGridObj.columnChooserSettings.renderCustomColumnChooser = renderCustomColumnChooser;
+        treeGridObj.created = onCreated;
+    });
+</script>

ej2-asp-core-mvc/code-snippet/tree-grid/excel-export/custom-aggregate-excel/custom-aggregate-excel.cs

@@ -0,0 +1,7 @@
+
+public IActionResult Index()
+{
+    var tree = summaryData.GetDefaultData();
+    ViewBag.datasource = tree;
+    return View();
+}

ej2-asp-core-mvc/code-snippet/tree-grid/excel-export/custom-aggregate-excel/razor

@@ -0,0 +1,74 @@
+@Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.DataSource).ChildMapping("subtasks").TreeColumnIndex(1).GridLines(Syncfusion.EJ2.Grids.GridLine.Both).AllowExcelExport(true).Toolbar(new List<string> { "ExcelExport", "CsvExport" }).Height(400).Width("auto").Columns(col =>
+{
+   col.Field("ID").HeaderText("Order ID").Width(115).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
+   col.Field("Name").HeaderText("Shipment Name").Width(230).ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();
+   col.Field("shipmentDate").HeaderText("Shipment Date").Width(135).Type("date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("category").HeaderText("Category").Width(220).MinWidth(210).Add();
+   col.Field("units").HeaderText("Total Units").Width(90).Type("number").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("unitPrice").HeaderText("Unit Price($)").Width(100).Type("number").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+   col.Field("price").HeaderText("Price($)").Width(140).Type("number").Format("C0").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+}).Aggregates(agg => { agg.ShowChildSummary(false).Columns(col => { col.Type("Custom").CustomAggregate("customAggregateFn").ColumnName("category").Format("C2").FooterTemplate("<span>Count of <input type='text' id='customers' /> : ${Custom}</span>").Add();}).Add();}).ExcelAggregateQueryCellInfo("formatExcelAggregateCell").DataBound("onDataBound").Render()
+
+<script>
+    let selectedCategory = 'Seafood';
+    let categoryDropdown;
+
+    const categoryOptions = [
+        { food: 'Seafood' },
+        { food: 'Dairy' },
+        { food: 'Edible' },
+        { food: 'Crystal' },
+    ];
+
+    function customAggregateFn(data) {
+        const records = data.result ? data.result : data;
+        return records.reduce((count, item) => {
+            return item.category === selectedCategory ? count + 1 : count;
+        }, 0);
+    }
+
+    function formatExcelAggregateCell(args) {
+        if (args.column.headerText === 'Category') {
+            args.style.value = `Count of ${selectedCategory} : ${args.data.category.Custom}`;
+        }
+    }
+
+    function onDataBound() {
+        if (categoryDropdown && categoryDropdown.element && categoryDropdown.element.classList.contains('e-dropdownlist')) {
+            categoryDropdown.destroy();
+        }
+
+        categoryDropdown = new ej.dropdowns.DropDownList({
+            dataSource: categoryOptions,
+            fields: { value: 'food' },
+            placeholder: 'Select a Category',
+            width: '110px',
+            value: selectedCategory,
+            change: () => {
+                setTimeout(() => {
+                    if (categoryDropdown && categoryDropdown.value) {
+                        selectedCategory = categoryDropdown.value.toString();
+                        treeGridObj.refresh();
+                    }
+                }, 300);
+            }
+        });
+
+        categoryDropdown.appendTo('#customers');
+    }
+
+    let treeGridObj;
+    document.addEventListener('DOMContentLoaded', function () {
+        treeGridObj = document.getElementById('TreeGrid').ej2_instances[0];
+        treeGridObj.toolbarClick = function (args) {
+            switch (args.item.text) {
+                case 'Excel Export':
+                    treeGridObj.excelExport();
+                    break;
+                case 'CSV Export':
+                    treeGridObj.csvExport();
+                    break;
+            }
+        };
+    });
+</script>