i have this grid, and i need to insert 3 column of checkboxes (ex: Verify,Approval,Signed) which value is stored in database as boolean,
example if the row is verified then the checkbox automatically checked when loaded.. and the point of my question is i need those 3 columns have checkbox in their header (checkALL) then when we hit some button like "update" it will update the value as the checkboxed is true or false into the data base.. These are the codes Ive been trying to create the checkbox header but ejCheckBox is not a function on my mvc proje
@Html.EJS().Grid("UrlAdaptor").AllowSorting().AllowResizing().AllowPaging().AllowReordering().AllowGrouping().AllowFiltering().AllowExcelExport().ShowColumnChooser(true).Columns(col =>
{
col.HeaderText("Check2").Template("<input type='checkbox' class='check'/>").HeaderTemplate("#headerTemplate1").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("150").Add();
col.HeaderText("Check").Template("<input type='checkbox' class='check'/>").HeaderTemplate("#headerTemplate").Width(150).Add();
col.Field("ControlNo").HeaderText("Control No").Add();
@*....another set of column *@
}).ActionComplete("onActionComplete").Created("onCreate").Height(300).AllowPaging().PageSettings(page => page.PageCount(4).PageSizes(true)).Toolbar(toolbarItems).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Excel); }).ToolbarClick("toolbarclick").Render()
Script:
<script type="text/x-jsrender" id="headerTemplate">
Checked
<input type="checkbox" id="headerCheck" />
</script>
<script type="text/x-jsrender" id="headerTemplate1">
Approve
<input type="checkbox" id="headerCheck2" />
</script>
<script type="text/javascript">
// Grid creates function.
var checkbox = document.querySelector('[type="checkbox"]');
function onCreate(args) {
// Sets change event to the header checkbox.
//$("#headerCheck").ejCheckBox({ "change": "headerChecked" });
console.log(args);
console.log("OnCreateMethod");
$("#headerCheck").click(headerChecked());
}
// Header checkbox changes function.
function headerChecked(args) {
console.log("asaaa");
console.log(args);
//console.log($("#headerCheck").);
//checkAll(args.isChecked);
console.log($("#headerCheck").is(':checked'));
checkAll($("#headerCheck").is(':checked'));
}
checkbox.addEventListener('change', function (event) {
alert(event.target.checked);
});
$("#headerCheck").change(function () {
console.log("change fn");
headerChecked();
})
// Grid actionComplete function.
function onActionComplete(args) {
if (args.requestType == "paging") // Maintain the checked state while paging
// checkAll($("#headerCheck").ejCheckBox("model.checked"));
checkAll($("#headerCheck").is(':checked'));
console.log(args);
}
$("#headerCheck").click(function () {
if ($("#headerCheck").is(':checked') == true) {
console.log("click function");
headerChecked();
}
});
function checkAll(flag) {
if ($("#headerCheck").is(':checked') == true) {
console.log("ischeckedbro");
$(".checkc").prop("checked", flag);
}
else {
console.log("not check bro");
$(".checkc").prop("checked", flag);
}
$(".checkc").prop("checked", flag); // Check or uncheck all content check boxes
}
these all are the codes ive been trying to use, but as u can see, I cannot use:
ejCheckBox({ "change": "headerChecked" }); ejCheckBox is not a function
I also tried using click(function(){ but not working
thanks, kindly help
