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

Custom editor - small issue

4 Answers 135 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 26 May 2012, 04:32 PM
I have the following function for a custom editor:

function myEditor(container, options) {
$('<input data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: true,
dataSource: {
type: "json",
transport: {
read: "http://myurl"
}
}
});
}

My data source has two properties, "id" and "name", The "name" is shown in the dropdown and the "id" is submitted to my database.
Everything works fine and my data is sent as I intend it to be. The problem is that my grid then shows the "id" property of my data after the item is added, instead of the "name" property. If I refresh, the data is read from my database via the main grid datasource definition and everything shows correctly.

How can I make my grid show the "Name" property without synching the data source?

Any help appreciated, thanks.

4 Answers, 1 is accepted

Sort by
0
Steve
Top achievements
Rank 1
answered on 27 May 2012, 12:50 PM
Any ideas?

Maybe a grid refresh after the save will work but I can't find an event to use
0
Steve
Top achievements
Rank 1
answered on 27 May 2012, 01:35 PM
0
Iliana Nikolova
Telerik team
answered on 29 May 2012, 01:54 PM
Hello Steve,

In order to achieve the needed functionality where the "id" and "name" are two separate fields, you could apply one of the following approaches: 
  1. Display the "name" in the cell of the Kendo UI Grid using a template. To show the updated text after saving, you could use the save event of the Grid and update the text in the model. For example:  
    save: function(e) {
       if (e.values['CategoryID']) {
           var text = $('#CategoryID').data('kendoDropDownList').text();
           e.model.Category = text;
       }
    }

  2. For convenience I created a simple test project, which illustrates this approach in action - please find it attached - gridWithDropDown.zip.  
  3. Use an object for the main field, which contains the "id" and "name". For convenience, I updated my previous example to illustrate such approach in action - see attached file - gridWithDropDown-Object.
I hope this helps.     


Kind regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 1
answered on 29 May 2012, 04:23 PM
Yes that's great thanks.
Very impressed with this forum so far.
Tags
Grid
Asked by
Steve
Top achievements
Rank 1
Answers by
Steve
Top achievements
Rank 1
Iliana Nikolova
Telerik team
Share this question
or