Manipulating datePicker CSS on $(document).ready

3 posts, 1 answers
  1. Simon
    Simon avatar
    6 posts
    Member since:
    Jun 2013

    Posted 07 Aug 2013 Link to this post

    Hi,

    I am trying to enable/disable date pickers depending on other widgets (checkboxes and numeric text boxes). When I try to call DatePicker.enable() with true or false as a parameter, i get an error because the DatePicker isn't ready yet. Seems like Kendo widgets aren't ready until  $(document).ready too. Are there any events or something that would tell me when the date picker is ready to be manipulated ? For now I am using a setTimeout which feels really wrong.

    Here is a sample of my code.

    1.$(document).ready(function () {
    2.        ChangeDatePickersState();
    3.    });
    01.function ChangeDatePickersState() {
    02.    var input = $('#MyCheckbox:checked')
    03.    var bool = input.length != 0 ? true : false;
    04.    EnableDatePickerForCheckbox('MyDatePicker', bool);

    01.function EnableDatePickerForCheckbox(inputName, inputValue) {
    02.    var datePicker = $('#' + inputName).data("kendoDatePicker");
    03.    if (inputValue == true) {
    04.        datePicker.enable(true);
    05.    }
    06.    else {
    07.        datePicker.enable(false);
    08.        datePicker.value(null);
    09.    }
    10.}

    I thank you in advance.
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 07 Aug 2013 Link to this post

    Hi Simon,

    Yes, surely the Kendo UI widgets do not exist before document.ready.

    The Kendo UI widgets do not fire events when they are initialized, but you can count on their existence if you include your custom logic inside a document.ready handler, which is added at the end of the page <body>. This will ensure that the handler will be executed after all widget initialization statements, which also depend on document.ready. No setTimeout will be required in this case.

    Some widgets such as the Grid or the ListView can be initialized, but still not populated in document.ready. Depending on the exact scenario, you can use the corresponding widget's dataBound event to execute custom logic.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Simon
    Simon avatar
    6 posts
    Member since:
    Jun 2013

    Posted 07 Aug 2013 Link to this post

    Wow simple and work perfectly, thank you!
Back to Top