This is a migrated thread and some comments may be shown as answers.

Grid PopupEditor problem when multiple rows are selected

1 Answer 98 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Susana asked on 25 Aug 2014, 06:59 PM

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:

                                .Columns(columns =>
                                       .Bound(r => r.Id).Hidden();
                                        .Bound(r => r.previewUri)
                                        .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>");
                                        .Bound(r => r.colors).Width(100)
                                        .Bound(r => r.sizes).Width(100)
                                        .Bound(r => r.seasons).Width(100)
                                        .Bound(r => r.categories).Width(200)
                                        .Bound(r => r.stockImageKeywords).Width(275)
                                        .Template(@<text><input type='checkbox' class='check_row'/></text>)
                                        .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" });
                                    <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>
                                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                                    .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 =>
                                            .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))
                                    .Events(evt =>

1 Answer, 1 is accepted

Sort by
Dimiter Madjarov
Telerik team
answered on 27 Aug 2014, 11:03 AM
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.
.Events(e => e.Edit("edit"))
function edit(e) {
    e.model.bind("change", function (e) {
        //custom logic

Dimiter Madjarov

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asked by
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question