This is a migrated thread and some comments may be shown as answers.

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

8 Answers 41 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Telmo Silva
Top achievements
Rank 1
Telmo Silva asked on 16 Dec 2013, 01:28 PM
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

8 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 18 Dec 2013, 01:26 PM
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!
0
Telmo Silva
Top achievements
Rank 1
answered on 18 Dec 2013, 03:21 PM
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.



0
Alexander Valchev
Telerik team
answered on 18 Dec 2013, 03:50 PM
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!
0
Telmo Silva
Top achievements
Rank 1
answered on 18 Dec 2013, 03:54 PM
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
0
Alexander Valchev
Telerik team
answered on 18 Dec 2013, 04:43 PM
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!
0
Telmo Silva
Top achievements
Rank 1
answered on 18 Dec 2013, 05:31 PM
Sorry about that,

there you go 
http://jsbin.com/eduYapi/3/edit
0
Accepted
Alexander Valchev
Telerik team
answered on 19 Dec 2013, 08:42 AM
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!
0
Telmo Silva
Top achievements
Rank 1
answered on 19 Dec 2013, 10:37 AM
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
Tags
Drag and Drop
Asked by
Telmo Silva
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Telmo Silva
Top achievements
Rank 1
Share this question
or