Checkbox in grid column automatically unchecks when selecting another row + tying value of field to check status of checkbox

[SK]

Question 1: I have a bool field that I want to show as a checkbox (checked if true, unchecked if false). I added it to grid as far as I know how to but I know it isn't reflecting true or false because the checkbox is unchecked even if the value is true. 

Question 2: when I check a checkbox and move on to another row, it does not stay checked and instead it reverts back to unchecked. How do I set it up so that it remains checked when I select another row? 

 @(Html.Kendo().Grid<ArusUI.Areas.PODashboard.Models.POModel>()
                        .Name("poGrid")
                        .Columns(columns =>
                        {
                            columns.Command(command => command
                                    .Custom("Print")
                                    .Click("printRow"))
                                .HtmlAttributes(new { title = "PO" })
                                .Width(150);
                            columns.Bound(p => p.resend)
                                .Title("Resend")
                                .Editable("isResendEditable")
                                .ClientTemplate("#if(poEdiObjectMode == 'EMAIL'){# <input id='resend_' onclick='resendSelect(this)' name='resend_#=poNum#_#=poReleaseNbr#_#=poRevisionNbr#' value='#=resend#' class='k-checkbox' type='checkbox' /> #} else {# <p> </p> #}#")
                                .Width(135)
                                .Filterable(ftb => ftb.Multi(true))
                                .HtmlAttributes(new { style = "text-align:center;" });
                            columns.Bound(p => p.resend)
                                .Width(110)
                                .HtmlAttributes(new { @class = "kendo-column", style = "text-align:center;" })
                                .Editable("isResendEditable")
                                .ClientTemplate("#if(poEdiObjectMode == 'EMAIL'){# <input type ='checkbox' id='poResend_#=poNum#' class='k-checkbox' /> #} else {# <input type ='checkbox'id='poResend_#=poNum#' class='k-checkbox' disabled='disabled' /> #}#");
                            columns.Bound(p => p.poNum).Width(130).Editable("readOnlyCol").HtmlAttributes(new { @class = "disabled-kendo-column" });
                            columns.Bound(p => p.poReleaseNbr).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
                            columns.Bound(p => p.poRevisionNbr).Width(130).HtmlAttributes(new { @class = "disabled-kendo-column" });
                            columns.Bound(p => p.poIssueDT)
                                .Width(150)
                                .Format("{0:MM/dd/yyyy}")
                                .HtmlAttributes(new { @class = "disabled-kendo-column" });
                            columns.Bound(p => p.poEdiObjectMode)
                                .Width(100)
                                .Filterable(ftb => ftb.Multi(true))
                                .HtmlAttributes(new { @class = "disabled-kendo-column" });
                        })
                            .Editable(editable => editable.Mode(GridEditMode.InCell))
                            .Selectable(selectable => selectable
                                        .Mode(GridSelectionMode.Single))
                            .Scrollable(scrollable => scrollable.Endless(true))
                            .Scrollable(a => a.Height("650px"))
                            .PersistSelection(true)
                            .Navigatable()
                            .Sortable()
                            .Filterable(filterable => filterable
                                .Extra(true)
                                .Operators(ops => ops
                                .ForString(str => str.Clear()
                                .Contains("Contains")
                                .DoesNotContain("Does not contain")
                                .IsEqualTo("Is equal to")
                                .IsNotEqualTo("Is not equal to")
                                .StartsWith("Starts with")
                                .EndsWith("Ends with")
                                .IsNull("Is null")
                                .IsNotNull("Is not null")
                                .IsEmpty("Is empty")
                                .IsNotEmpty("Is not empty"))))
                        .AutoBind(false)
                        .Excel(excel => excel
                            .FileName("PODashboard.xlsx")
                            .Filterable(true)
                            .AllPages(true)
                            .ProxyURL(Url.Action("Excel_Export_Save", "poGrid")))
                        .Reorderable(reorder => reorder.Columns(true))
                        .ClientDetailTemplateId("template")
                        .Events(e => e.DataBound("poGridDataBound"))
                        .Events(e => e.CellClose("POGridCellClose"))
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(false)
                        .PageSize(25)
                        .Events(x => x.Error("onGridError"))
                        .Read(read => read.Action("GetPO","PO").Data("getPOParams").Type(HttpVerbs.Get))
                        .Model(model =>
                        {
                            model.Id(m => m.poNum);
                            model.Field(field => field.poReleaseNbr).Editable(false);
                            model.Field(field => field.poRevisionNbr).Editable(false);
                            model.Field(field => field.poIssueDT).Editable(false);
                            model.Field(field => field.poEdiObjectMode).Editable(false);
                            model.Field(field => field.resend).Editable(true);
                        })
                        ).Resizable(resize => resize.Columns(true))
                        )

function isResendEditable(e) {
    var ediType = e.poEdiObjectMode; var editable = false;
    if (ediType == "EMAIL") { editable = true; }

    return editable;
}

public class POModel
    {
        [DisplayName("Vendor")]
        public string vendorName { get; set; }
        [DisplayName("PO #")]
        public string poNum { get; set; }

        [DisplayName("Buyer")]
        public string buyer { get; set; }

        [DisplayName("Release #")]
        public string poReleaseNbr { get; set; }

        [DisplayName("Revision #")]
        public string poRevisionNbr { get; set; }

        [DisplayName("Original Issue")]
        public string poIssueDT { get; set; }

        [DisplayName("EDI Type")]
        public string poEdiObjectMode { get; set; }
  
        public bool resend { get; set; }
    }

\

[Stoyan]

Hello SK,

In regard to your first question to ensure that the checkbox will be checked, if the value is true add the 'checked' attribute to the input in such a case:

.ClientTemplate("<input type='checkbox' #=resend?'checked':''# onclick='setValue(this)' />");

Second, to add the checkbox changes to the dataItem:

1. In the onclick handler of the input get the row.
2. Then use the row to get the dataItem
3. Utilize the Model Api's set method to change the value of the resend property 

 function setValue(input){
    var grid = $("#grid").data("kendoGrid");
    var dataItem = grid.dataItem($(input).closest("tr"));
    dataItem.set("resend",!dataItem.resend);
 }

Please review the approach above in this REPL.

I remain open should further questions arise.

Regards,
Stoyan
Progress Telerik

[SK]

Hello Stoyan, thank you for your detailed response. Implementing your solution worked. I have the same requirement but a field that is string "Y" or "N" instead of Boolean. Is there a way to implement this still?

This particular value is in a child grid with the grid name being a compilation of values:

.Name("LinesGrid_#=poNum#_#=poReleaseNbr#_#=poRevisionNbr#")

One issue I've faced is how to get the grid name from within the onclick event for the checkbox:

columns.Bound(p => p.pO_Hot_Ind)
     .Title("Hot")
     .Width(60)
     .Editable("isHotEditable")
     .ClientTemplate("<input name='hotInd' type='checkbox' \\#=pO_Hot_Ind == 'Y'?'checked':''\\# onclick='setHotValue(this)' />")
     .HtmlAttributes(new { @class = "disabled-kendo-column" });

function setHotValue(input) {
    //how to get grid name??
}

 

Edit w/ update:

function setHotValue(input) {
    var gridName = input.parentElement.offsetParent.offsetParent.attributes[1].nodeValue; //this is how I got to child grid name - not sure if its the best method
    var grid = $(`#${gridName}`).data("kendoGrid");
    var dataItem = grid.dataItem($(input).closest("tr")); 
    dataItem.set("pO_Hot_Ind", !dataItem.pO_Hot_Ind); //what is the cleanest way to flip between Y and N?
}

[Stoyan]

Hi SK,

I am happy the suggested solution has been helpful.

Your approach to get the name of the child Grid is viable.

One alternative is to get the closest element with the .k-grid class. Then you can use the object to access the Grid's client-side instance.

    var gridObject = $(input).closest(".k-grid");
    var grid = gridObject.data("kendoGrid");

Regarding your second question, you can use a ternary operator to implement the logic that flips between 'Y' and 'N':

dataItem.set("pO_Hot_Ind",dataItem.pO_Hot_Ind=="Y"?"N":"Y");

 

[SK]

Fantastic! Thank you