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

How to prevent popup editor from calling update method on every drop down change?

3 Answers 57 Views
Grid
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 11 Jun 2015, 06:43 PM

The issue we're running into is how the update method of the grid is called from the change event of a drop down when using a popup editor on the grid.  For our data we're using cascaded drop downs (combobox) to edit category information inside the custom popup (editor).  i.e. We have a category and an optional subcategory.  What we're seeing is that when we change the value of the category drop down (or the subcategory drop down), the update method of the grid is being called.  What we're expecting is that the update method will ONLY fire when we click on the Update button in the dialog.

Here's the grid setup:

@(Html.Kendo()
    .Grid<CategoryEditModel>()
    .Name("Categories")
    .Columns(columns =>
    {
       columns.Bound(c => c.SKU);
       columns.Bound(c => c.DeptName);
       columns.Bound(c => c.Item);
       columns.Bound(c => c.Category);
       columns.Bound(c => c.Subcategory);
       columns.Command(command => command.Edit()
                                         .HtmlAttributes(new {@class = "btn btn-primary"}))
              .Width(95);
    })
    .ToolBar(toolbar =>
    {
       toolbar.Excel().HtmlAttributes(new { @class = "btn btn-info" });
       toolbar.Pdf().HtmlAttributes(new { @class = "btn btn-info" });
    })
    .ColumnMenu()
    .ColumnResizeHandleWidth(2)
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable(pg => pg.Refresh(true)
       .PageSizes(true)
       .PageSizes(new[] { 25, 50, 100, 250, 500, 1000 }))
    .Navigatable()
    .Sortable(sortable => { sortable.SortMode(GridSortMode.MultipleColumn); })
    .Scrollable(s => s.Height("400px"))
    .Filterable()
    .Scrollable()
    .Groupable()
    .Events(e =>
    {
       e.Edit("onCategoryEdit");
    })
    .DataSource(dataSource => dataSource.Ajax()
       .Batch(true)
       .PageSize(25)
       .Model(model =>
       {
          model.Id(p => p.ItemId);
          model.Field(p => p.SKU).Editable(false);
          model.Field(p => p.DeptName).Editable(false);
          model.Field(p => p.Item).Editable(false);
       })
       .Sort(s =>
       {
          s.Add("SKU").Ascending();
       })
       .Read(read => read.Action("Categorizations_ReadItems", "Admin").Type(HttpVerbs.Get))
       .Update(update => update.Action("Categorizations_UpdateItem", "Admin").Type(HttpVerbs.Post))
       .Create(create => create.Action("Categorizations_CreateCategory", "Admin").Type(HttpVerbs.Post))
       .AutoSync(true)
    )
)

The custom editor (snippet):

<div class="editor-field">
   @(Html.Kendo()
         .ComboBoxFor(model => model.CategoryId)
         .DataTextField("Name")
         .DataValueField("Id")
         .DataSource(source => source.Read(read => read.Action("GetCategories", "Admin"))
                                     .ServerFiltering(true))
         .AutoBind(true)
         .Events(e =>
                 {
                    e.Change("onCategoryChange");
                    e.Cascade("onCategoryCascade");
                 })
        )
</div>
 
<div class="editor-field">
   @(Html.Kendo()
         .ComboBoxFor(model => model.SubcategoryId)
         .DataTextField("Name")
         .DataValueField("Id")
         .DataSource(source => source.Read(read => read.Action("GetSubcategories", "Admin")
                                                       .Data("onNeedCategoryValue"))
                                     .ServerFiltering(true))
         .AutoBind(true)
         .CascadeFrom("CategoryId")
         .Events(e =>
                 {
                    e.Change("onSubcategoryChange");
                    e.Cascade("onSubcategoryCascade");
                 })
        )
</div>

Any suggestions on how to call the update only when clicking the Update button of the dialog?  Or insure that the data posted via the change of the combo boxes pulls the current (UI) version of the data for posting back to the server?

3 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 15 Jun 2015, 01:44 PM
Hi,

your datasource configuration has the AutoSync set to true - hence the behavior you experience. You can set it to false in order to update the record only when the Update button is pressed. 

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
James
Top achievements
Rank 1
answered on 15 Jun 2015, 02:25 PM
Ok.  I can see that.  Removing that option did indeed prevent the update from firing when changing the drop downs.  However, the data posted after clicking the Update button is not the data from the dialog box... it's the original data (I changed the drop down selections).  Obviously the post doesn't read the edit form for it's data, it's using the underlying data item.  I don't suppose there's an easy way to have the drop down push the changes to the data item?  Or are we down to writing custom code in the change events to perform that task?
0
Boyan Dimitrov
Telerik team
answered on 17 Jun 2015, 04:04 PM

Hello James,

The code for the editor popup template looks good and selecting an item from the ComboBox widget should update the corresponding model field. I attached a sample project following the provided code and the update works fine. 

Please note that this project is for sample purposes, so the ComboBox widgets are populated with dummy data. Selecting an item updates the underlying model Name and GenderID fields. 

Regards,
Boyan Dimitrov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
James
Top achievements
Rank 1
Answers by
Petyo
Telerik team
James
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or