ClientTemplate method not firing for a Boolean field in Kendo grid

[abdul]

Hi,

I have a kendo grid, where i am creating a new empty row while loading the grid.

The grid has a Boolean filed which is a mandatory field. so when we want to enter the row values then it should call the CheckIsPublicFund(data) method and if the user is not selecting the Boolean field then it should add that value to false.

The problem is when selecting the Boolean value then its not firing the CheckIsPublicFund(data)  method.

Attached below code and screenshot for reference.

columns.Bound(p => p.PublicFunds).Editable("EditFieldsForNewRec").ClientTemplate("#=CheckIsPublicFund(data)#").Title("Public Funds").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});
columns.Bound(p => p.CohortFtpRateFloor).Editable("EditFieldsForNewRec").Title("Cohort Ftp Rate Floor").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});
columns.Bound(p => p.HasDepositRateFloor).ClientTemplate("#=CheckIsDepositRateFloor(data)#").Editable("EditFieldsForNewRec").Title("Has Deposit Rate Floor").Width(90).Filterable(ftb => ftb.Multi(true).Search(true)).HeaderHtmlAttributes(new {style = "justify-content:center"}).HtmlAttributes( new { style = "text-align:center"});

function CheckIsPublicFund(data) {
    return data.PublicFunds ? "Yes" : "No"
}

function CheckIsDepositRateFloor(data) {
    return data.HasDepositRateFloor ? "Yes" : "No"
}

[Eyup]

Hello Abdul,

 

Thank you for reaching out.

By default, the boolean fields default to "false". So you can go to your ModelView C# class definition and change it to:

        public bool HasDepositRateFloor
        {
            get;
            set;
        }

This will help you achieve the exact behavior you are looking for - when the user selects True, it will become true, but when he doesn't select anything, it will default to False (it won't be a Null or Nothing).

You can observe this functionality here:
https://demos.telerik.com/aspnet-core/grid/editing-inline

When you create a New Record and leave the checkbox empty:

It would default to false:

Was this info clear and on point? Please try to apply this solution and let me know if it is acceptable for your project.

 

Regards,
Eyup
Progress Telerik

[abdul]

Hi Eyup,

Thanks for the answer. But i am using the property like that.

public bool HasDepositRateFloor { get; set; }

Only difference is these are custom row created by custom logic.

function AddNewRow() {
    var newRow = { field: "TlpModifierNew",  Value: 0 };
    var gridName = nmdModelGridTabNames[activeNmdModel3TabId - 1];
    var grid = $("#" + gridName).data("kendoGrid");
    grid.dataSource.add(newRow);
    var theCell = $('#' + gridName + " " +'tbody'+ " " +'tr:last-child td:eq(1)');
    $("#" + gridName).data('kendoGrid').editCell(theCell);     
}

In the below screenshot, In the grid when the user clicks on the + icon in each row then a new empty row will be created.
In that row when we leave the checkbox empty it don't fire the below method.

function CheckIsDepositRateFloor(data) {
    return data.HasDepositRateFloor ? "Yes" : "No"
}

 

[Ivan Danchev]

Abdul,

The function in the ClientTemplate fires only once when the Grid is loaded with data, before it renders. This function does not fire when you attempt to edit a record.

The Grid has an Edit event, which you handle and execute some logic, when the user tries to edit a record.

1. Attach the event handler:

.Events(events => events.Edit("onEdit"))

2. In the handler you have access to the record's data and can execute different logic based on the value of PublicFunds:

function onEdit(e) {
    //check if the Edit event fires for a new record
    if (e.model.isNew()) {
        //check the value of PublicFunds
        if(e.model.PublicFunds) {
            //do something...
        }
        else {
            //do something...
        }
    }
}