Grid PopupEditor problem when multiple rows are selected

[Susana]

Hello,

I  have a grid that contains a check box for each row. A popup editor is displayed when multiple rows are selected. But when a change is made in the popup editor, one of the selected rows loses it's check box selection. My questions are:

1. How do I prevent the a row from being un-selected when a field is modified in the popup editor field?
2. How do I capture an event in the popup-editor window?

Here's is my grid setup:

                                 Html.Kendo().Grid<ResourceInfo>()

                                .Name("GalleryGrid")

                                .Columns(columns =>

                                {

                                    columns

                                       .Bound(r => r.Id).Hidden();

                                    columns

                                        .Bound(r => r.previewUri)

                                        .Width(150)

                                        .Title("Preview")

                                        .Template(@<text><a data-lightbox="@item.uri" href="@item.uri"><img alt="" class="center thumbnail-image" src="@item.previewUri"/></a></text>)

                                        .ClientTemplate("<a data-lightbox='#= uri #' href='#= uri #'><img alt='' class='center thumbnail-image' src='#= previewUri #'/></a>");

                                    columns

                                        .Bound(r => r.colors).Width(100)

                                        .Title("Color");

                                    columns

                                        .Bound(r => r.sizes).Width(100)

                                        .Title("Size");

                                    columns

                                        .Bound(r => r.seasons).Width(100)

                                        .Title("Season");

                                    columns

                                        .Bound(r => r.categories).Width(200)

                                        .Title("Categories");

                                    columns

                                        .Bound(r => r.stockImageKeywords).Width(275)

                                        .Title("Keywords");

                                    columns

                                        .Template(@<text><input type='checkbox' class='check_row'/></text>)

                                        .Width(45)

                                        .Title(" ")

                                         

                                        .ClientTemplate("<input type='checkbox' class='check_row' value='#=Id#'/>");

 

                                    //columns.Command(command => { command.Select().Text("<input type='checkbox' id='editChk'/>"); }).Width(80);

                                    columns.Command(command => { command.Edit().Text(" "); }).Title("Edit").Width(80);

                                    columns.Command(command => { command.Destroy().Text(" "); }).Title("Delete").Width(80);

                                })

                                    .ToolBar(toolbar =>

                                    {

                                        toolbar.Custom().Text("Add (upload)").Url("#uploadModal").HtmlAttributes(new { @class = "btn", data_toggle = "modal" });

                                    })

                                    .DetailTemplate(@<text>

                                    <div>FileName: @item.fileName</div>

                                    <div>uri: @item.uri</div>

                                    <div>previewUri: @item.previewUri</div>

                                    <div>rating: @item.rating</div>

                                    <div>region: @item.region</div>

                                    </text>)

 

                                    .Editable(editable => editable.Mode(GridEditMode.PopUp))

                                    .Sortable()

                                    .Scrollable()

                                    .Filterable()

                                    .Pageable(builder => builder.PageSizes(new[] { 50, 100, 500, 1000 }).Refresh(true))

 

                                    //.Scrollable( scrollable => scrollable.Virtual( true ) )

                                    .HtmlAttributes(new { style = "height:600px" })

                                    .Resizable(resize => resize.Columns(true))

                                    .Reorderable(reorder => reorder.Columns(true))

                                    .DataSource(dataSource =>

                                        dataSource

                                            .Ajax()

                                            .Batch(false)

                                            .ServerOperation(true)

                                            .Model(model =>

                                            {

                                                model.Id(r => r.Id);

                                                model.Field(r => r.previewUri).Editable(false).DefaultValue(string.Empty);

                                                model.Field(r => r.colors).Editable(true).DefaultValue(string.Empty);

                                                model.Field(r => r.seasons).Editable(true).DefaultValue(string.Empty);

                                                model.Field(r => r.categories).Editable(true).DefaultValue(string.Empty);

                                                model.Field(r => r.stockImageKeywords).Editable(true).DefaultValue(string.Empty);

                                            })

                                            .Events(events => { events.Error("error_handler");events.Change("change_handler"); })

                                            .Read(read => read.Action("read", "gallery")).PageSize(50)

                                            .Update(update => update.Action("update", "gallery").Data("GetSelectedIds").Type(HttpVerbs.Post))

                                            .Destroy(delete => delete.Action("delete", "gallery").Type(HttpVerbs.Post))

                                    )

                                    .ClientDetailTemplateId("client-template")

                                    .Events(evt =>

                                    {

                                        evt.Edit("edit_handler");

                                        evt.DataBound("databound_handler");

                                         

                                        //evt.Save("onSave");

                                        //evt.Change("change_handler");

                                    })

                                    .Deferred()

                            )





[Dimiter Madjarov]

Hi Susana,


The behavior is expected, because when a model field is changed, the underlying row is being redrawn and on update the whole table is redrawn. This means that the rows will be rendered according to the column configuration in the Grid code, in which the checkboxes are not checked.

Regarding the questions, you could use the edit event of the Grid in order to bind to the change event of the model and execute custom logic.
E.g.

.Events(e => e.Edit("edit"))

function edit(e) {
    e.model.bind("change", function (e) {
        //custom logic
    });
}

Regards,
Dimiter Madjarov
Telerik