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

Problems with data binding DropDownList in Grid

12 Answers 2457 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Clinton Smyth
Top achievements
Rank 1
Clinton Smyth asked on 16 Mar 2012, 06:06 PM
Hi

I have a grid that has a column that uses a DropDownList (see code below).  

columns: [
    { field: "Choices", title: "My Choices", width: "150px",
        editor: function(container, options) {
              $('<input data-text-field="Name" data-value-field="Value" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
               dataSource: {
                     data: myChoicesArray
              },
              dataValueField: "Value",
              dataTextField: "Name",
              autobind: true
          });
      }
   },
   { command: ["edit", "destroy"], title: " ", width: "210px" }
],

I'm using kendoui.complete.2012.1.229.beta

I have 2 issues:

1. When the user clicks on 'Add new record' and edits ALL the fields, the binding is fine.  If the user wants to use the default value in the DropDownList (i.e. no onChange event), on clicking 'Update', the value from the DropDownList is not bound and the value in the column remains blank.  This happens if I set the editing mode to 'inline' or 'popup'.  How do I get it to bind the default value?

2. I'm using a MVVM viewModel to store the details in the grid which will be sent to the server in a subsequent step.  If I set data-value-field="Value", I get the value (incorrectly) appearing in the grid and the viewModel correctly gets the value.  On the otherhand, if I set data-value-field="Name", I get the text correctly appearing in the grid but then the viewModel incorrectly gets the text too.  I would like to have the text of the DropDownList choice appear in grid and the value of the choice stored in the viewModel.  How can I do this?

Thanks

12 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 19 Mar 2012, 03:13 PM
Hello Clinton,

New Model instances default values can be defined through field declaration defaultValue option:

schema: {
    model: {
        id: "ID",
        fields: {                  
            ProductName: {                   
               defaultValue: "DefaultProductName"
            }
        }
    }
}

Regarding your other issue. In this case the column should be bound to the entire object, instead only to the text or value field. Note that in this case a template should be use to display only the text field value within the Grid's cell:

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Greffin
Top achievements
Rank 1
answered on 22 Mar 2012, 10:21 AM
Hi Rosen, 

Can we bind the dataSource of  dropdown to remote and the return data type is JSON? My CRUD services only return json object and i was hoping you could guide me how to bind it with dataType Json

My code is this:

$("#modelGrid").kendoGrid({
        dataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: baseUrl + "/Maintenance/AreaModel/read",
                    dataType: "json",
                    data: {
                        id: id
                    }             
                },
                create: {
                    url: baseUrl + "/Maintenance/AreaModel/create",
                    dataType: "json"
                },
                destroy: {
                    url: baseUrl + "/Maintenance/AreaModel/destroy",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "area_model_id",
                    fields: {
                        area_model_id: {
                            editable: false,
                            nullable: true
                        },
                        area_model_model_id: "model_id",
                        area_model_area_id: {
                            editable: false,
                            defaultValue: id
                        },model_desc: {
                            editable: false                        
                        }                    
                    }
                }
            }          
        }),    
        toolbar:[
            { name: "create", text: "Add New Model"},
            "save",
            "cancel"       
        ],
        navigation: true,
        editable: true,
        scrollable: false,
        sortable: true,               
        columns: [
            { field: "area_model_model_id"
              title: "CODE",
              editor: modelEditor     
            },
            { field: "model_desc", title: "DESCRIPTION", editable: false  },
            { command: "destroy", title: "", width: "110px" }
        ],         
    });
 
    function modelEditor(container, options) {
        $('<input data-text-field="model_code" data-value-field="model_id" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: baseUrl + "/Maintenance/Model/read",
                            dataType: "json"                   
                        }
                    },
                    schema: {
                        model: {
                            id: "model_id"                 
                        }
                    }          
                }),
                dataTextField: "model_code",
                dataValueField: "model_id"                   
            });
    }
0
Lothar
Top achievements
Rank 1
answered on 16 Jul 2012, 09:55 AM
Hi,

This works great, excellent example, thank you.
I did spend quite some time finding a bug in my code. When I selected a category and updated, I got "undefined" instead of the category name. Looking at the underlying data, the Category was no longer {CategoryName : "", CategoryId : 9 }, but was simply the CategoryId.
Turned out I had "autoSync: true" defined on my datasource. Once I removed that it worked fine.

Posting it just in case anybody else has same issue.
0
Jason
Top achievements
Rank 1
answered on 26 Jul 2012, 10:01 PM
Sorry to resurrect an old thread, but is there a way to get sorting to work in the scenario above?  I added a jsFiddle for reference.

http://jsfiddle.net/Jkkw8/71/embedded/result/
0
srinivas
Top achievements
Rank 1
answered on 04 Aug 2012, 05:55 AM
Hi,

Here you are using the function

function categoryDropDownEditor(container, options) {
    $('<input data-text-field="CategoryName" data-value-field="CategoryID" data-value-field="CategoryName" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
        autoBind: false,
        dataSource: {
            data: categories                    
        }
    });
}

But i want to assign a name to the dropdown list so that i want to use properties like 
dropdownlist.open();
dropdownlist.select();

Is it possible to assign name to the dropdownlist.I mean i want to create an instance to the dropdown list
so that we can use the properties of the dropdownlist



Thanks and Regards,
Srinivas
 
0
Todd
Top achievements
Rank 1
answered on 30 Aug 2012, 02:32 PM
Rosen -  There is a Kendo bug when binding a grid column to a dropdown using the  "whole object" as you suggested.  The bug causes model binding to be lost and the word "undefined" to be placed in the grid cell.

To reproduce:
Go back to your jsFiddle here: jsfiddle.net/Jkkw8/light

(1) click the edit button on the row
(2) click the cancel button on the row (do not change any fields)
(3) click the edit button again
(4) change the category drop-down to any choice (doesn't matter)
(5) click the update button...you will see "undefined" in the category cell
0
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 06 Sep 2012, 09:42 PM
Has there been a fix for the bug that Todd pointed out?

Why is data-value-field defined twice?
data-value-field="CategoryID" data-value-field="CategoryName"


Is this allowed?
0
Dave
Top achievements
Rank 1
answered on 26 Sep 2012, 02:43 PM
I'm bumping this thread because I'm experiencing this issue right now. Is this being fixed?
0
Rosen
Telerik team
answered on 27 Sep 2012, 06:23 AM
Hello Dave,

The described issue has been already addressed. The fix is available in the Q2 2012 SP1 release of KendoUI (which is available to our commercial licence holders) and will be included in the Q3 2012 KendoUI release. 

Here is an updated version of the previous test page.

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Remco
Top achievements
Rank 1
answered on 27 Sep 2012, 12:37 PM
When I add a new record I don't want a default Category set. I can easily set the Category defaultValue to null, however the Category dropdownlist will still default to the first option in the list, which makes it appear that's the Category value in the model, but the model value is still null. So if you actually want that first option from the list, then you first have to select another option and then select the first one again. What I would really like is the dropdownlist not to default to any option when it's bound to a null value. How do I go about doing that?
0
Todd
Top achievements
Rank 1
answered on 28 Sep 2012, 02:41 AM
Rosen - Thanks for letting us know about the fix and for the updated demo.  Please answer the previous poster's question about why you used data-value-field twice.

Thanks.
0
Rosen
Telerik team
answered on 28 Sep 2012, 06:58 AM
Hi Todd,

As you may have guessed, it is an error with the example. There can be only one value field definition, thus multiple definition will be ignored.

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Clinton Smyth
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Greffin
Top achievements
Rank 1
Lothar
Top achievements
Rank 1
Jason
Top achievements
Rank 1
srinivas
Top achievements
Rank 1
Todd
Top achievements
Rank 1
Joshua
Top achievements
Rank 2
Iron
Veteran
Iron
Dave
Top achievements
Rank 1
Remco
Top achievements
Rank 1
Share this question
or