custom validation for a custom editor (kendoDropDown) in a kendoGrid

[Jeroen]

Hey,

In one of those columns I have a custom editor in the form of a dropdown list. The first value of the list is "Please select a function" with value 0.
When the user creates a row and does not select a function it should give an error. The function field is required and I want validation on it. 

I have it "working" but I think that this is not the way it should be. And however it works I still can't add z-index or any style to my tooltip because the syle get overriden when the message is shown in the grid.

The code is:

 

001.<script id="tooltip" type="text/x-kendo-template"> //Custom Tooltip created by me
002.       <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="#= Key #" role="alert">
003.           <span class="k-icon k-warning"> </span>
004.           #= Message #
005.           <div class="k-callout k-callout-n"></div>
006.       </div>
007.   </script>
008.   <script>
009.       var tooltip = new kendo.template($("#tooltip").html());
010.
011.       $(document).ready(function () {
012.           $("#grid").kendoGrid({
013.               dataSource: new kendo.data.DataSource({
014.                   transport: {
015.                       create: {
016.                           url: "/Beheer/Medewerker/CreateJson",
017.                           type: "POST",
018.                           dataType: "json"
019.                       },
020.                       read: {
021.                           url: "/Beheer/Medewerker/ListJson",
022.                           dataType: "json"
023.                       },
024.                       update: {
025.                           url: "/Beheer/Medewerker/UpdateJson",
026.                           type: "PUT",
027.                           dataType: "json"
028.                       },
029.                       destroy: {
030.                           url: "/Beheer/Medewerker/DestroyJson",
031.                           type: "DELETE",
032.                           dataType: "json"
033.                       }
034.                   },
035.                   schema: {
036.                       model: {
037.                           id: "Id",
038.                           fields: {
039.                               Id: {
040.                                   editable: false
041.                               },
042.                               Naam: {
043.                                   validation: {
044.                                       required: {message: "De naam is verplicht."}
045.                                   }
046.                               },
047.                               Actief: {
048.                                   defaultValue: true,
049.                                   validation: {
050.                                       required: false
051.                                   }
052.                               },
053.                               FunctieId: {
054.                                   defaultValue: 0,
055.                                   validation: {
056.                                       required: true,
057.                                        //Custom validation rule
058.                                       customFunctieId: function (input) {
059.                                           if (input.attr("data-bind") == "value:FunctieId" && input.val() == 0) {
060.                                               input.attr("data-customFunctieId-msg", "Geen functie geselecteerd.");
061.                                               input.parents("td").append(tooltip(Message = "", Key = "sl" + input.attr("data-bind").split(":")[1]));
062.                                               return false;
063.                                           }
064.                                           return true;
065.                                       }
066.                                   }
067.                               },
068.                               Functie: {
069.                                   validation: {
070.                                       required: false
071.                                   }
072.                               },
073.                               AfdelingId: {
074.                                   defaultValue: 0,
075.                                   validation: {
076.                                       required: true,
077.                                        //Custom validation rule
078.                                       customAfdelingId: function (input) {
079.                                           if (input.attr("data-bind") == "value:AfdelingId" && input.val() == 0) {
080.                                               input.attr("data-customAfdelingId-msg", "Geen afdeling geselecteerd.");
081.                                               input.parents("td").append(tooltip(Message = "", Key = "sl" + input.attr("data-bind").split(":")[1]));
082.                                               return false;
083.                                           }
084.                                           return true;
085.                                       }
086.                                   }
087.                               },
088.                               Afdeling: {
089.                                   validation: {
090.                                       required: false
091.                                   }
092.                               }
093.                           }
094.                       }
095.                   },
096.                   sort: {
097.                       field: "Naam", dir: "asc"
098.                   }
099.               }),
100.               sortable: true,
101.               scrollable: true,
102.               editable: "inline",
103.               toolbar: [
104.                   { name: "create", text: "Voeg medewerker toe" }
105.               ],
106.               columns: [
107.               {
108.                   field: "Naam",
109.                   template: "<a href=\"/Beheer/Medewerker/Details/#= Id #\">#= Naam #</a>"
110.               },
111.               {
112.                   field: "FunctieId",
113.                   title: "Functie",
114.                   template: "#= Functie #",
115.                    //Custom editor for dropdown
116.                   editor: FunctieDropDownEditor
117.               },
118.               {
119.                   field: "AfdelingId",
120.                   title: "Afdeling",
121.                   template: "#= Afdeling #",
122.                  //Custom editor for dropdown
123.                   editor: AfdelingDropDownEditor
124.               },
125.               {
126.                   field: "Actief",
127.                   title: "Actief",
128.                   template: "<input name='Actief' type='checkbox' data-bind='checked: Actief' #= Actief ? checked='checked' : '' # disabled />",
129.                   editor: "<input name='Actief' type='checkbox' data-bind='checked: Actief' #= Actief ? checked='checked' : '' # />",
130.                   width: 70
131.               },
132.               {
133.                   command: [{ name: "edit", text: "Wijzig" }, { name: "destroy", text: "Verwijder" }]
134.               }
135.               ]
136.           });
137.       });
138.
139.       function FunctieDropDownEditor(container, options) {
140.           $('<input data-text-field="Naam" data-value-field="Id" name="sl' + options.field + '" data-bind="value:' + options.field + '" />')
141.               .appendTo(container)
142.               .kendoDropDownList({
143.                   autoBind: false,
144.                   dataSource: {
145.                       type: "json",
146.                       transport: {
147.                           read: "/Beheer/Functie/ListJson",
148.                       }
149.                   }
150.               });
151.       }
152.
153.       function AfdelingDropDownEditor(container, options) {
154.           $('<input data-text-field="Naam" data-value-field="Id" name="sl' + options.field + '" data-bind="value:' + options.field + '" />')
155.               .appendTo(container)
156.               .kendoDropDownList({
157.                   autoBind: false,
158.                   dataSource: {
159.                       type: "json",
160.                       transport: {
161.                           read: "/Beheer/Afdeling/ListJson",
162.                       }
163.                   }
164.               });
165.       }
166.   </script>

Is there a simple way to create validation rules + error messages for a custom editor, like in this case a dropdownlist.
I want an "error" message if a user does not select a function or he/she selects the first value (which is "Please select a function" with value 0).

Thanks,

Jeroen

[Jeroen]

I just created an example in JSFiddle.

http://jsfiddle.net/a76V6/1/

Hope this helps to explain what i mean.

[Daniel]

Hello Jeroen,

I am not sure if I understand correctly the issue but the approach looks correct. It would be better to customize the validation message position in the editor function so that a new element is not appended each time the validation is triggered and messages for other rules(if any) are shown correctly:

function FunctieDropDownEditor(container, options) {
    $('<input data-text-field="Naam" data-value-field="Id" name="sl' + options.field + '" data-bind="value:' + options.field + '" />')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,

            dataSource: [{ "Id": 0, "Naam": "Selecteer een functie" }, { "Id": 1, "Naam": "Directeur" }, { "Id": 2, "Naam": "Stagebegeleider" }, { "Id": 3, "Naam": "Stagiaire" }, { "Id": 5, "Naam": "Secretaresse"}]
        });
    $("<span class='k-invalid-msg' data-for='sl" + options.field + "'></span>").appendTo(container);
}

If the problem is that the message is shown below the drodpownlist popup, then this a known issue that will be fixed in one of the next internal builds. For now it is possible to avoid this problem with by lowering the validation tooltip z-index:

.k-tooltip.k-invalid-msg {
    z-index: 10000;
}

Regards,
Daniel
Telerik

[Jeroen]

Yep, exactly what I ment.

Thanks!!