Grid PopupEditor problem when multiple rows are selected

2 posts, 0 answers
  1. Susana
    Susana avatar
    1 posts
    Member since:
    Jul 2013

    Posted 25 Aug 2014 Link to this post

    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()
                                )







  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2310 posts

    Posted 27 Aug 2014 Link to this post

    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
     

    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.

     
Back to Top