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

Kendo UI Grid's combobox editor template validation

3 Answers 443 Views
Editor
This is a migrated thread and some comments may be shown as answers.
G.A.
Top achievements
Rank 1
G.A. asked on 24 Nov 2012, 11:33 AM
Hi,

I have a grid column with combobox editor template and I want to validate that column, i.e. if there's no item in combobox I want to get validation error. The column in grid's datasource has such structure.

ColumnID: { type: "number", validation: { required: true, min: 1 } },

and when the list of combobox editor template's values is empty the value of columnId is 0 and there's no validation errors.

Please help me to validate my grid column in above mentioned case in edit mode.

Regards,
G.A. 

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 28 Nov 2012, 05:26 PM
Hello,

Kendo Validator works with validation attributes. When a custom editor is used, the developer is responsible for attaching the respective HTML validation attributes to the editor input. As an example:
//make the combo box editor required
function barEditor(container, options) {
    $('<input name="name" data-text-field="name" data-value-field="id" data-bind="value:' + options.field + '" required="required />')
    .appendTo(container)
    .kendoComboBox({
        autoBind: false,
        dataSource: {
            data: [
            {name: "Name1", id: 1},
            {name: "Name2", id: 2}
            ]
        }
    });
    $('$<span class="k-invalid-msg" data-for="name"></span>').appendTo(container);
}

In addition it is necessary to add a name attribute and a validation tooltip element.

For convenience I prepared a small example (add new record, delete the combox' value and hit update): http://jsbin.com/elakul/2/edit

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
G.A.
Top achievements
Rank 1
answered on 01 Dec 2012, 03:17 PM
Thank you very much. Your answer was very helpful for me and validation has worked properly.
But there's remain an issue related to editor values. I'm using dropdownlist instead of combobox and the editor template doesn't work during updating grid and adding new row if there is only 1 item in dropdown's datasource. If there are more than 1 item in dropdown's datasource everything works as necessary. And if there's no item validation works properly.

My datasource for dropdown is following

var datasource= new kendo.data.DataSource({
            transport: {
                read: {
                    url: "@Url.Action("GetValues", "Home")",
                    dataType: "json"
                }
            },
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { editable: false },
                        Name: { editable: false }
                    }
                }
            }
        });

Grid is defined as in your example only "bar" uses display template as following.

{field: "bar", title: "Bar", editor: barEditor, template: "${Name}"} 

Please help to find out the reason of this issue as well.
Regards,
G.A.
0
Alexander Valchev
Telerik team
answered on 05 Dec 2012, 03:06 PM
Hello,

I am not sure that I understand the exact scenario correctly. Could you please edit my previous example and send me back a link so I can examine your current configuration?

As a general information, if the editor value is bound to the Grid field which means that in the Grid row you can display only the value of the Combo/DropDown widget. If you want to display the name, you may consider using foreign key editor.

I hope this information will help.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Editor
Asked by
G.A.
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
G.A.
Top achievements
Rank 1
Share this question
or