issue using type "number" for id in dropdownlist with listview template

[Laurent]

Hi,

Please consider the following dojo :

http://dojo.telerik.com/apujOD

 

The issue is on the first field "ProductID" when using "number" as the type of its "id".

 

Steps to reproduce the issue :

1- Create new record

2- Select entry "aaa" or "bbb"

3- Validate entry

4- Edit Entry again and select option label "select..."

5- Validate entry

6- Edit entry again and select "aaa" or "bbb"

7- Validate and you can see that current value is null and you cannot select another value anymore.

 

Please tell me what I'm doing wrong. Note that this works well when using "string" type.

Thank you.

 

[Alex Hajigeorgieva]

Hi, Laurent,

Thank you very much for the provided Dojo to illustrate your scenario.

The only ingredient that is missing is the optionLabel. The option label should match the format of the data so that everything works correctly. In this case, when the Kendo UI DropDownList data source data items are objects with an id of type "number" and text of type "string", you should declare the option label in the same manner:

data-option-label="{ 'id':0, 'text': 'select...'}"

If you do not wish to show 0 in the Kendo UI ListView when no selection is made, you can add a condition to the template:

<dd>#:ProductID ? ProductID: 'null'#</dd>

Here is the updated Dojo for your reference:

http://dojo.telerik.com/@bubblemaster/OniMu

More about the option label is available in the API of the Kendo UI DropDownList here:

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-optionLabel

Let me know if you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Laurent]

Hi Alex,

Thank you for your prompt response.

I already tried your solution with option-label as an object. It works but it won't if the field has to be mandatory.

Adding "required" attribute won't work because the value for select is not null.

http://dojo.telerik.com/apujOD/3

Any clue ?

 

Best regards.

Laurent.

[Alex Hajigeorgieva]

Hi, Laurent,

You are correct that in the case where the field property is required, having its default value as a number will not trigger the browser validation.

What you can do is create a custom validation rule as part of the schema field declaration and check if the value is "0". If this is the case, return false and the Kendo UI Validator will kick in:

ProductID: {
  type: "number",
  validation:{
    productidvalidation: function (input) {
      if (input.is("[name='ProductID']") && input.val() === "0") {
        input.attr("data-productidvalidation-msg", "Product ID is required");
        return false;
      }
      return true;
    }
  }
}

Here is the updated Dojo for your convenience:

http://dojo.telerik.com/@bubblemaster/UbedI

Let me know if there is anything else I can help you with.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Laurent]

Hi Alex,

Thank you so much for your workaround. It works great.

Let me ask you 2 questions :

1) About that issue, is it a bug or not ?

2) The documentation is not quite clear (https://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-Model.define) about the way to define validation rules in Model definition. With your code snippet, I just have understood that we could use custom rules at that point. Maybe, the documentation could be more illustrated ?

Another thing that could be great is to be able to define the errorTemplate at the same point.

Anyway, thanx again for your help.

 

Best regards,

Laurent.

[Alex Hajigeorgieva]

Hello, Laurent,

Thank you for the feedback on the model documentation. 

I will discuss it with the team and see if we can extend it with the referenced validator if it seems unclear to you, it is definitely worth checking it out. Also, if you wish to contribute yourself, you are welcome to do that - here is how:

https://docs.telerik.com/kendo-ui/updates/contribution-to-documents

Finally - the matter at hand - it is possible to achieve the functionality required without a custom validation by setting the id to an empty string or null, apologies for missing this option out in my previous response.

data-option-label="{'id':'','text':'select...'}"

Here is the updated runnable demo:

http://dojo.telerik.com/owETaB

More information about it is available in this forum thread:

https://www.telerik.com/forums/optionlabel-is-posted-as-value#1fTkxb53gESleudRLxDqBg

Regards,
Alex Hajigeorgieva
Progress Telerik