Problems with data binding DropDownList in Grid

[Clinton Smyth]

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

[Rosen]

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

[Greffin]

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"                   

            });

    }

[Lothar]

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.

[Jason]

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/

[srinivas]

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
 

[Todd]

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

[Joshua]

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?

[Dave]

I'm bumping this thread because I'm experiencing this issue right now. Is this being fixed?

[Rosen]

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

[Remco]

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?

[Todd]

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.

[Rosen]

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