MVVM / How can I declare the hint function on the view ?

9 posts, 1 answers
  1. Telmo Silva
    Telmo Silva avatar
    16 posts
    Member since:
    Jul 2008

    Posted 16 Dec 2013 Link to this post

    Hi guys,

    First of all thank you for this amazing feature, I bet I won't be the only one to say that but the DnD is really convienient !
    I'm new to mvvm and I'm trying to implement the draganddrop on it.

    I'm almost there, I just don't know how to declare/bind the hint function/property on the view.
    My hint function should do the classic/normal behavior 

      hint: function (element) { // Cand configure that ..
                return element.clone();
      }

    here's my view 

    <div data-role="draggable" data-filter="[role='row']"> </div>

    So in fact my main question is how to you define a function using the data attributes on the view ?

    data-hint ? and then what should be my content ? 

    Any idea ?

    Thank you

    T
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Dec 2013 Link to this post

    Hi Telmo,

    I am afraid that what you would like to achieve is not supported out of the box.
    Setting configuration properties to functions is not possible via data attributes because the framework allows only events to be set as functions.

    We cannot suggest a generic workaround that will fit in all cases. In case you have a single draggable element or you want all draggable elements to have the same hint function you can set it directly in the default options of the widget. For example:

    function example(element) {
        return element.clone();
    }
    kendo.ui.Draggable.fn.options.hint = example;
     
    var viewModel = kendo.observable({
        //viewmodel
    });
     
    kendo.bind($("#wrapper"), viewModel);


    Please note that this code will set the hint of all Draggable components that will be initialized on the page. Also it is required to be called before kendo.bind.
    For your convenience I prepared a small example:

    Regards,
    Alexander Valchev
    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. Telmo Silva
    Telmo Silva avatar
    16 posts
    Member since:
    Jul 2008

    Posted 18 Dec 2013 Link to this post

    Hi Alexander,

    That solution could works for me as I need the same behavior for all the draggable items.
    However it seems that the filter doesn't work if you specify it in the data-filter 

    I updated your js bin if you could have a look, in the meantime I change the filter using kendo.ui.Draggable.fn.options.filter = "myfilter"; and that seems to be ok.

    Thanks for this workaround and let me know if I was doing something wrong with the data-filter.



  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Dec 2013 Link to this post

    Hello Telmo,

    You did not provided a link to the updated jsBin.
    Since the filter option does not have a default value either (you can check this by examining the kendo.ui.Draggable.fn.options object before it is changed) I assume that your approach is correct.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Telmo Silva
    Telmo Silva avatar
    16 posts
    Member since:
    Jul 2008

    Posted 18 Dec 2013 Link to this post

    Alexander,

    I just updated the one you used :)
    Let me know if we could use data-filter somehow, that would look more mvvm like. Otherwise I'll stick with the current workaround.

    Thanks
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 18 Dec 2013 Link to this post

    Hello Telmo,

    I cannot see the edited code unless you save it as a new milestone and send me a link.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Telmo Silva
    Telmo Silva avatar
    16 posts
    Member since:
    Jul 2008

    Posted 18 Dec 2013 Link to this post

    Sorry about that,

    there you go 
    http://jsbin.com/eduYapi/3/edit
  9. Answer
    Telmo Silva
    Telmo Silva avatar
    16 posts
    Member since:
    Jul 2008

    Posted 19 Dec 2013 Link to this post

    Hello Telmo,

    In your example the filter is not applied. Instead the whole element (#wrapper) is draggable.
    In order to use filter you will have to add it to the default options. Please see the updated example:

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Telmo Silva
    Telmo Silva avatar
    16 posts
    Member since:
    Jul 2008

    Posted 19 Dec 2013 Link to this post

    Ok Alex,

    I'll stick with that. could be nice to be able to set the hint function on the view one day !

    Thank you for all this informations, you guys  really rocks.

    Telmo
Back to Top
Kendo UI is VS 2017 Ready