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

[James]

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?

[Petyo]

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

 

 

[James]

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?

[Boyan Dimitrov]

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