How to make dropdownlist mandatory?

8 posts, 0 answers
  1. Jane
    Jane avatar
    15 posts
    Member since:
    Oct 2016

    Posted 10 Jan Link to this post

    I've seen a few threads about this for asp.net and the Kendo UI javascript dropdownlist but the solutions don't really apply to the JSP dropdownlist.

    I want to make my dropdownlist mandatory as below.

    <kendo:dropDownList name="status" dataTextField="domainValue" dataValueField="domainId" optionLabel="Please Select..." required="required">
       <kendo:dataSource data="${projectStatus}"></kendo:dataSource>
    </kendo:dropDownList>

     

    However, because Kendo renders the actual input field as hidden, then the error message displays in the top left of the browser.  How do I get it to display on the dropdown?

  2. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 12 Jan Link to this post

    Hello Jane,

    I can suggest trying the approach described in our documentation for positioning the tooltip. This approach can be used to ensure that the tooltip will be placed as expected:

    http://docs.telerik.com/kendo-ui/controls/editors/validator/overview#validator-tooltip

    Still, please have in mind that sometimes depending on the scenario and additional custom styles this approach may not achieve the desired result. In these scenarios, I can suggest sending us a runnable example, so I can investigate it locally and provide a suggestion best suited for it.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jane
    Jane avatar
    15 posts
    Member since:
    Oct 2016

    Posted 12 Jan in reply to Stefan Link to this post

    Thanks Stefan, unfortunately I can't get that approach to work for the JSP tag.

    My html is

    <kendo:dropDownList name="status" dataTextField="domainValue" dataValueField="domainId" optionLabel="Please Select..." required="required" >
                    <kendo:dataSource data="${projectStatus}"></kendo:dataSource>
    </kendo:dropDownList>
    <span class="k-invalid-msg" data-for="status"></span>

    and this results in the following markup

    <span class="k-widget k-dropdown k-header" style="" title="" unselectable="on" role="listbox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-owns="status_listbox" aria-disabled="false" aria-busy="false" aria-activedescendant="c726af87-9caa-4a34-983c-e5f6a8acaeab">
    <span class="k-dropdown-wrap k-state-default" unselectable="on">
    <span class="k-input" unselectable="on">Please Select...</span>
    <span class="k-select" aria-label="select" unselectable="on">
    </span>
    <input id="status" required="required" name="status" data-role="dropdownlist" style="display: none;">
    </span>
    <script>
    <span class="k-invalid-msg" data-for="status"></span>

     

    This final span is not rendered on the page (It's greyed out when I look at it using Firebug).

    Do I need to explicitly call the Kendo validator to get this to work?  I'm doing an ajax submit and I'd rather not have to.  My other plain HTML5 input fields with the required attribute just work.

    Thanks for your help, Jane

  4. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 16 Jan Link to this post

    Hello Jane,

    The described scenario is not a known issue and it was not reproduced in my testing scenario.

    Could run please provide a runnable example, or demonstration how the validation is handled, so I can test it locally, and provide a suggestion best suited for it.

    I will be expecting the example to continue my investigation.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Jane
    Jane avatar
    15 posts
    Member since:
    Oct 2016

    Posted 16 Jan in reply to Stefan Link to this post

    Thanks Stefan,

    Unfortunately I don't have the time just now to write a new webapp to demonstrate this problem.  I'll just have to find a solution myself.  I'm not actually doing any implicit validation on the page with the dropdowns, I'm just letting the browser html5 validator do it's thing.  In the past, I've found that the Kendo UI validator replaces its useful messages with less useful ones, e.g. a required numeric will get a message asking to enter a required field rather than asking for a valid number. 

  6. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 18 Jan Link to this post

    Hello Jane,

    I hope you can find a solution to the issue.

    Please have in mind that I did demonstrate our validation because the widgets are using hidden inputs which are causing this issue with the standard HTML validation. Still, a similar issue can be observed with our validation as well, but the article provided earlier can help easily fixing them.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Jane
    Jane avatar
    15 posts
    Member since:
    Oct 2016

    Posted 19 Feb in reply to Stefan Link to this post

    Hi Stefan,

    I've finally had time to cobble together a standalone app. to demonstrate my problem. However I'm not able to upload it here because the file limit is 2mb.  My war file is 6.2mb but the kendo-taglib-2016.3.1118.jar alone is 2.0mb so I'm never going to be able to get it under the limit.

    Can you please tell me the best way to get this war file to you?

    Thanks for you help,

    Jane

  8. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 21 Feb Link to this post

    Hello Jane,

    In this scenario, I can suggest to either host the archive using a hosting service site or to open a support ticket where the allowed size is 20MB.

    We will be expecting the example and will gladly assist.

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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