Text in grid not being updated when selecting from dropdown

[Sheldon]

Hi there,

Wasn't sure whether to post this in the grid forum or this one but it seems more like a dropdownlist issue so here we go.

I have a dropdownlist within an editor templates for a a grid that is configured for inline editing.   The dropdownlist is being populated from values within the grid row that I am extracting through javascript within editor template (see below).

Once an item is selected in the dropdown and "Update" is clicked, my controller calls a stored procedure that then updates the database.

(just as an asside for various reasons that I wont get into, I am not using the features of entity framework on this project and am heavilly reliant on stored procedures for my data layer)

Everything works fine, EXCEPT that the text field within object that I pass to the dropdownlist doesn't seem to get update, and therefor doesn't show up correctly on the grid until I refresh the page.   The ID value however IS getting updated ... not sure if, in my case, I need to hook into the change event somehow and manually update the text in the object through javascript.

Here is my code:

THE GRID THAT CALLS THE DROPDOWNLIST "EditorProductMasterData"

@(Html.Kendo().Grid(Model)
    .Name("ProductInfo_" + lang)
    .Columns(columns =>
    {
        columns.Bound(c => c.GridRowID).Hidden(); 
        columns.Bound(c => c.ColumnName);
        columns.Bound(c => c.ProductData.FieldName);
        columns.Bound(c => c.ProductData.ProductValue).ClientTemplate("#: ProductData.ProductValue.MasterDataText #").EditorTemplateName("EditorProductMasterData");
        columns.Command(command => { command.Edit(); });
    })
    .DataSource(d => d
      .Ajax()
      .Read(r => r.Action("Get", "Product"))
      .Update(u => u.Action("Update", "Product"))
      .Model(m =>
      {
         m.Id(p => p.GridRowID);
         m.Field(p => p.ColumnName).Editable(false);
         m.Field(p => p.ProductData.FieldName).Editable(false);
         m.Field(p => p.ProductData.MasterDataValue).Editable(true);
      })

     )
    .Pageable()
    .Editable(e => e.Mode(GridEditMode.InLine))
)

DROPDOWNLIST WITHIN EDITOR TEMPLATE

<script type="text/javascript">
    function sendMasterData() {
        var rowID = $("[name=GridRowID").val();
        var model = $("#ProductInfo_EN").data("kendoGrid").dataSource.get(rowID);

        return  {
            countrycode: model.ProductData.Country,
            lang: model.ProductData.Language,
            GlobalFieldName: model.ProductData.FieldName,
            MDTableName: model.ProductData.MasterDataTableName
        };
    }

</script>
@model NewGlobalProductCatalogue.Models.ProductInfo
@(Html.Kendo().DropDownListFor(p => p.ProductData.ProductValue)
.Name("ProductData.ProductValue.MasterDataID")
.DataValueField("MasterDataID")
.DataTextField("MasterDataText")
.DataSource(d => d
    // .Read(r => r.Action("Index", "MasterDataSelection", new { countrycode = Model.Country, lang = Model.Language, GlobalFieldName = Model.FieldName, MDTableName = Model.MasterDataTableName }))
       .Read(r => r.Action("Index", "MasterDataSelection").Data("sendMasterData").Type(HttpVerbs.Post))

)
.AutoBind(false)
.SelectedIndex(0)
)

Both the object "ProductValue" and the List that is returned from the stored procedure that is called by the ".Read" are based on the same data type and therefor contain identically named properties "MasterDataID" and "MasterDataText".   My assumption was that if I used the same datatype for both the datasource and the object is passed into the editor template, that the control would bind the two together, so that when I selected a value in the dropdown, it would update both the ID and the TEXT in the object.

In my case, it only seems to update the ID and leaves the old value in the text filed ... hence the grid still has told old text value even though the database has been updated with new ID.

Any ideas what I can do?

thx

-Sheldon

[Alexander Popov]

Hello Sheldon,

If my understand is correct, you wish to update both ProductData.ProductValue.MasterDataText and ProductData.ProductValue.MasterDataID through the DropDownList. This is not supported out of the box, because each widget or input element is bound to a single field. In this case, the DropDownList is bound to the MasterDataID, however there is nothing that updates the MasterDataText. It is possible to achieve this using a custom solution. For example you could subscribe to the Grid's edit event. Once the event is triggered you can find the DropDownList and attach a change event handler that manually sets the value of the text field. For example: 

function onGridEdit(e){
  var ddl = e.container.find("[data-role='dropdownlist']");
  if(ddl){
    ddl.getKendoDropDownList().bind("change", function(evt){
      e.model.set("ProductData.ProductValue.MasterDataText", this.text());
    });
  }
},

Regards,
Alexander Popov
Telerik