Grid Refresh with DropDownList column

[Jeffrey]

Hi,

I have the following code for my grid that contains a dropdownlist column.  On the change of the dropdown list, I call a controller function via ajax to update my record in the DB.  The DB is updated correctly but as soon as I leave that row the value goes back to the old value in the dropdownlist.  The DB is still correct and if I refresh my screen is loads correctly.  

I've tried to do a datasource refresh, I've tried to get the datasource again and do a setDataSource.  Nothing refreshes the grid and retrieves the data.  My code is below for the grid and the dropdownlist.

Any suggestions?  Thank you in advance Admin for your help.

 

//GRID

$("#grid").kendoGrid({
        dataSource: {
            type: "json",
            transport: {
                read: "Grid/Ratings_Read",
                cache: false
            },
            schema: {
                model: {
                    fields: {
                        ProductSkill: { type: "string" },
                        RateID: { type: "int" },
                        RateValue: { type: "int", defaultValue: { RateID: 1} },
                        ItemCategoryName: { type: "string", title: "Category" },
                        GroupName: { type: "string", title: "Group", }
                    }
                }
            },
            pageSize: 20,
            batch: false,
            group: [
                {
                    field: "GroupName", dir: "asc"
                },
                {
                    field: "ItemCategoryName", dir: "asc"
                }
            ]
        },
        height: 550,
        filterable: true,
        selectable: true,
        sortable: true,
        pageable: true,
        columns: [{
            field: "ProductSkill",
            title: "Skill",
            //format: "{0:MM/dd/yyyy}"
        }, {
            field: "RateID",
            title: "RateID",
            hidden: "true"
        }, {
            field: "RateValue",
            title: "Rating",
            editor: ratingDropDownEditor, template: "#=RateDisplay#"
        }, {
            field: "RateAssocID",
            title: "RateAssocID",
            hidden: "true"
        }, {
            field: "ItemID",
            title: "ItemID",
            hidden: "true"
        }
        ],
        editable: true,
        change:  onRowChange

    });

//END GRID

 

//DROPDOWNLIST

function ratingDropDownEditor(container, options) {
        $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField: "RateDisplay",
                dataValueField: "RateID",
                dataSource: {
                    type: "json",
                    transport: {
                        read: "Grid/Rate_Read"
                    }
                },
                change: onDropDownChange
            });
    }

    function onDropDownChange(e) {
        list = e.sender;
        var currentListSelected = list.dataItem(this.select());

        $.ajax({
            url: "Grid/Rating_InsertUpdate?rateAssocID=" + currentRateItem.RateAssocID + "&itemID=" + currentRateItem.ItemID + "&rateID=" + currentListSelected.RateID, success: function (result) {
                //alert(result);
                
            }
        });
    }

//END DROPDOWNLIST

[Viktor Tachev]

Hi Jeffrey,

Based on the description it seems that the DropDownList should change the value that is displayed in the Grid. In that case I would suggest configuring the update option for the Grid DataSource. Then remove the custom logic that updates the field when the selection in the dropdown is changed. 

When the data is updated through the Grid the values that are shown in it would reflect the changes automatically. Check out the example below that illustrates how the Grid can be configured to use a custom editor. 

• https://demos.telerik.com/kendo-ui/grid/editing-custom

Regards,
Viktor Tachev
Progress Telerik