incell editing : allow checkbox check/uncheck disable editing

[Jerry]

Hi there,


I'm having a problem. Following is my grid, I enabled in cell editing and ajax binding. First column is a checkbox, I don't user to edit the value of this column but allow them to check/uncheck.

@(Html.Telerik().Grid<CreditorInvoiceLineModel>()
                .Name("CreditorInvoiceLinesGrid")
                .DataKeys(keys => keys.Add(n => n.CreditorInvoiceLineId))
                .Columns(columns =>
                {
                    columns.Bound(o => o.CreditorInvoiceLineId).Title("CreditorInvoiceLineId")
                        .ClientTemplate("<input type='checkbox' name='checkedCreditorInvoiceLine' id='checkedCreditorInvoiceLine' value='<#= CreditorInvoiceLineId #>' />")
                        .Title("")
                        .Width(36)
                        .HtmlAttributes(new { style = "text-align:center" });
                    columns.Bound(o => o.ApproverName).Title("Approver");
                    columns.Bound(o => o.StatusName).Title("Status");
                    columns.Bound(o => o.StatusId).Title("StatusId");
                })
                .DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectCreditorInvoiceLines", "CreditorInvoiceLine", new { creditorInvoiceId = ViewBag.CreditorInvoiceId }))
                .Editable(editing => editing.Mode(GridEditMode.InCell).InsertRowPosition(GridInsertRowPosition.Top).DefaultDataItem(new CreditorInvoiceLineModel { StatusId = 514 }))
                .ClientEvents(events => events.OnRowSelect("onInvoiceLineRowSelect")
                    .OnDataBinding("Grid_onDataBinding")
                    .OnEdit("Grid_OnEdit")
                    .OnSave("Grid_OnSave"))
                .Selectable()
                .KeyboardNavigation(config => config.EditOnTab(true).Enabled(true))
                .Footer(true))

following is my javascript, in the Grid_OnEdit, I check whether the column's title is empty, if yes, I know this the first column, then disable eidting, the cell became not editable, but I'm not able to check the checkbox again, whenever I try to check, I can see there is a javascript error in firebug, see attached jserror.png

after I remove grid.cancelCell(e.cell), the checkbox become editable again. see attached capture.png.

    function Grid_onDataBinding(e) {
        var grid = $(this).data('tGrid');
        if (grid.hasChanges()) {
            if (!confirm('You are going to lose any unsaved changes. Are you sure?')) {
                e.preventDefault();
            }
        }
    }

    function Grid_OnEdit(e) {
        var indexCell = $(e.cell).index();
        var grid = $('#' + e.currentTarget.id).data('tGrid');

//        console.log(e.mode);
        if((grid.columns[indexCell].title=="" || grid.columns[indexCell].title==null) ) {
//            grid.cancelCell(e.cell);
        }
    }

    function Grid_OnSave(e) {
    }

Could you tell me what's problem and is there any possible solution to this? 

thank you so much for your time.


regards
Jerry

[Petur Subev]

Hello Jerry,

Why don't you just use a template column (which are not editable) or a .ReadOnly() column ?
If using template column - you do not need to bind to a specific field and the client expression (<#= #>) will be again evaluated successfully.
e.g.

columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' name='checkedCreditorInvoiceLine' id='checkedCreditorInvoiceLine' value='<#= CreditorInvoiceLineId #>' />")

Kind Regards,
Petur Subev
the Telerik team

[Jerry]

Hi Petur,


Thank you for your reply. I will make that column read only.


regards
Jerry