CODEWITHSUNDEEP
javascriptkendo-uikendo-grid
rob H.O.
rob H.O.

Reputation: 109

Kendo grid combobox sends undefined data to DataSource

I have a kendo Grid with a column that uses a combobox which is bound to an object called 'Worker' (ID, Workername). This works fine except when a user sets combobox text to a string (example:'xxxx') that doesn't match any dropdown options. The combobox set's the Worker's value to a string ('xxxx') instead of a Worker object at which point the dataSource stops responding when it receives the malformed data.

I've gotten this to work in the dataSource 'change' event, which fires after the grid's 'save' event. The offending dataItem's property is overwritten with the variable myWorkerStart (captured in the grid's edit event):

myDataSource.bind("change", function (e) {
        if (e.field) {
            if (e.field == "Worker") {           
                rowDataItem = myGrid.dataItem(myGrid.tbody.find("tr.k-grid-edit-row"));
                var currentWorker = rowDataItem.Worker;
                var myType = $.type(currentWorker);
                if (myType != "object") {
                    alert('Ooooh, BAD worker, reverting to starting value');
                    rowDataItem.set('Worker', myWorkerStart);
                }
            }
        }
        alert("datasource change");
})

I've seen the subject in a couple threads in the Telerik forums, mostly unanswered. Telerik support told me I should address the undefined values in the grid's 'save' event, but that fires before the row is set by the combobox. I can see the values, but I'm not sure where the values can be set to prevent the undefined value from being sent to the dataSource (container, model) Is there a better way to address malformed data before the undefined combobox value is sent to the grid?

myGrid.bind("save", function (e) {
        myCombo = $('#Worker').data("kendoComboBox");
        rowDataItem = myGrid.dataItem(myGrid.tbody.find("tr.k-grid-edit-row"));          
        myPreviousWorker = e.model.Worker;//Worker previously
        myNewWorker = myCombo.dataItem();//Worker about to be set by selected Combobox.
        if (myNewWorker) {
            alert("GOOD worker");
        } else {
            alert("BAD worker");
        }
        //Manipulate the combobox/container/model values
})

Upvotes: 3

Views: 6371

Answers (1)

rob H.O.
rob H.O.

Reputation: 109

Petur Subev was able to provide this answer: jsbin

In the example for a grid with 'batch' save, the grid's 'save' event checks for the undefined selection in the combobox and then binds once (jquery .one())to the model's change event to set a desired value during the save only if the combobox selection is undefined.

http://jsbin.com/edamuj/649/edit


//grid configuration setup
save:function(e){          
       if(!e.container.find('[data-role=combobox]').data().kendoComboBox.dataItem())
       {
         e.model.one('change',function(e){
             this.set('test',{CategoryName:"Bevarages",CategoryID: "001"}) 
         }) 

       }

       this.refresh();
    }

The below example for a grid without batch save (e.g. inline edits) only needs to be triggered on the grid save and doesn't need the additional binding to the model change. Petur's other jsbin

save:function(e){
       if(!e.container.find('[data-role=combobox]').data().kendoComboBox.dataItem())
       {
           e.model.set('test',{CategoryName:"Bevarages",CategoryID: "001"})
       }

       this.refresh();
    }

Upvotes: 2

Related Questions