Trying to develop an unobtrusive layer on Kendo

3 posts, 0 answers
  1. Jerrie Pelser
    Jerrie Pelser avatar
    4 posts
    Member since:
    Jan 2005

    Posted 04 Jan 2012 Link to this post

    Hi,

    I have been playing around with Kendo to see whether we can use it in one of our projects.  One of the things I am trying to achieve is to develop and unobtrusive interface on top of Kendo.  The way I am going about this is as follows:

    1. I mark the controls which I want to apply the Kendo UI to with a specific attributes, e.g. a textbox which should become a date picket I will mark with add a "data-ui-datepicker" attribute to.
    2. I will then run javascripy once the page has loaded to call the appropriate Kendo methods for them, e.g. I will get all textboxes with the "data-ui-datepicker" attribute and call the kendoDataPicker() method on them.

    This works fine but I also have sections of the page which is dynamically loaded.  Once it is loaded I will again call the method to apply to Kendo UI to the controls.  The problem is that the controls which already has the Kendo UI applied to then gets screwed up because it basically tries to apply the Kendo UI to the control a second time.

    My question is whether you guys have any idea as to how I can work around this?  Is there any way to determine whether a control already has the Kendo UI applied so that I then don't call the kendo...() method a second time?

    Also, do you have any plans to supply some sort of unobtrusive framework on top of Kendo?

    Hope this makes sense.

    Thanks!

  2.
  3. Vesselin Obreshkov
    Vesselin Obreshkov avatar
    81 posts
    Member since:
    Jan 2010

    Posted 04 Jan 2012 Link to this post

    Make sure before you create a control that $('#control_id').data('kendoDropDownList') doesn't exist for a drop down list for instance.

    Don't have VS on this computer but something like this might work?

    $('[selector-for-your-dropdowns]').each(function () {
      if ($(this).data('kendoDropDownList') == undefined) {
        $(    this).kendoDropDownList();
      }
    });

    Not sure if the data('...') == undefined will work but this is the general idea - check if the control has data('kendoControlName') set before trying to re-create them.

    Maybe this is something the Kendo guys can fix - not try to re-Kendize (just came up with that ;) the control in such cases like yours but a simple check like this should do the trick for you.
  5. Jerrie Pelser
    Jerrie Pelser avatar
    4 posts
    Member since:
    Jan 2005

    Posted 05 Jan 2012 Link to this post

    In the end I basically just removed the data-* tag before calling the relevant kendo...() method.  This way the control would not be processed the second time around, e.g.

    $('input[data-ui-datepicker]').each(function () {
                $(this).removeAttr('data-ui-datepicker');
                $(this).kendoDatePicker();
            });

    Thanks
Back to Top