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.
| |
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:
|
We have also prepared a sample based on this. Please find the sample from the following location.
Please let us know if you require further assistance on this.
Regards,
John. R
|
<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> |
@(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> |
@(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> |
<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> |