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

6 posts, 0 answers
  1. Laurent
    Laurent avatar
    3 posts
    Member since:
    Apr 2017

    Posted 13 Nov Link to this post

    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.

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 15 Nov Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Laurent
    Laurent avatar
    3 posts
    Member since:
    Apr 2017

    Posted 15 Nov in reply to Alex Hajigeorgieva Link to this post

    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.

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 17 Nov Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Laurent
    Laurent avatar
    3 posts
    Member since:
    Apr 2017

    Posted 17 Nov in reply to Alex Hajigeorgieva Link to this post

    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.

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    321 posts

    Posted 20 Nov Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top