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

[Telmo Silva]

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

[Alexander Valchev]

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:

• http://jsbin.com/eduYapi/2/edit
  
  

Regards,
Alexander Valchev
Telerik

[Telmo Silva]

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.

[Alexander Valchev]

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

[Telmo Silva]

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

[Alexander Valchev]

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

[Telmo Silva]

Sorry about that,

there you go 
http://jsbin.com/eduYapi/3/edit

[Alexander Valchev]

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:

• http://jsbin.com/eduYapi/6/edit
  
  

Regards,
Alexander Valchev
Telerik

[Telmo Silva]

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