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