passing argument on data-click

[Kyriakos]

Hi my question is if you
Can you pass an argument in the Kendo UI data-click? What is the best practice on passing arguments? 
I noticed from the forum and testing on a ipad device that onclick functions doesn't work if u compile with phonegap .

nevertheless if u want to run a function on a button click the data-click="functionName" works but if u wanna pass arguments on that function how you do that?

Kind regards

[Alexander Valchev]

Hi Kyriakos,

The data-click attribute accepts a string with the function name. The event has a pre-defined argument from which you can access the target, sender as well as other information depending on the widget.

Could you please provide more details about your scenario and if possible a code snippet that demonstrates what you would like to achieve? In this way I would be able to understand better you case and assist you further.

Kind regards,
Alexander Valchev
the Telerik team

[Kyriakos]

For example i use a button that dynamically with Json/append the click event is used to call a function:
if it was a onclick function i would write in normal jquery:

<a class="go_project_btn" onclick="getdashlets({id}, {type}, {user});" data-role="button" id="buttonz">Press Here</a>

where {} is where i append data after the json call.
Hence the function would look like this:

getdashlets(5,135,1);

Now since that doesnt work on compiled version but only on browser mode
So for kendo data-click should be like this:

<a class="go_project_btn" data-click="getdashlets" data-role="button" id="buttonz">Press Here</a>

What i would like to do is call the  getdashlets function with a few dynamic parameters like i did with onclick.


[Alexander Valchev]

Hello Kyriakos,

You can append the addition data as a data-attribute. As an example:

<a data-role="button" id="button" data-click="onClick" data-id="5" data-type="135" data-user="1">Press Here</a>

In this way you can easily access the data in the event handler:

function onClick(e) {
    var data = e.button.data();
    data.id;
    data.type;
    data.user;
}

For convenience I created a small demo using this approach in action.

Regards,
Alexander Valchev
the Telerik team

[Kyriakos]

This really is a very convinient way of dealing with arguments. Thanx a lot for the quick reply! .

[Peter]

This is definitely an awesome feature. Is all this data-click, data-role, etc a Kendo-modile-specific feature or part of HTML5 or something?  And is there a similar way to do it with a switch?  var data = e.switch.data(); doesn't work.

Thanks,

-Pete

[Alexander Valchev]

Hi Peter,

This is HTML5 feature. You can read more about it here.
KendoUI Mobile uses custom data attributes as a way to define the widget's configuration settings.

Regarding your issue, be sure that you reference the switch' HTML element not the widget client side object. Data Attributes are attached to the mark-up.

$("#switch").data("kendoMobileSwitch").element;

Kind regards,
Alexander Valchev
the Telerik team

[jiggy]

Nice! I had the same initial question. Solution: Kendo syntax. Works for me.
Anyway, after playing around with it I realized it's lowecase sensitive -- odd! (Am I missing something?)

If I have this HTML

<a data-role="button" data-click="doSomething" data-someAttribute='someValue'>click me</a>

I would expect to do this

function doSomething(e) {

    var   data = e.button.data();

       someAttribute = data.someAttribute;

       console.log(someAttribute); // expect: someValue but actually get: undefined

}'

But this is correct (mind blowing to me)

function doSomething(e) {

    var   data = e.button.data();

       someAttribute = data.someattribute;

       console.log(someAttribute); // someValue

}

Why is that?
 

[Alexander Valchev]

Hello jiggy,

• data-someAttribute will be converted to someattribute
• data-some-attribute will be converted to someAttribute

This is by design. For more information please see this StackOverflow thread.

Regards,
Alexander Valchev
the Telerik team

[Ananthalvan]

Hi,
   I'm trying to pass parameters programmatically on a view click. I'm not able to read the parameter. Am I missing something?

Click event definition:

e.view.element.find("#myUL").kendoMobileListView({click: MethodToCall, param1:123});

Method definition:

function MethodToCall(e){
        var p = e.view.params;
       console.log(p.param1);
}

Thanks,
Ananth

[Petyo]

Hi,

this configuration is not supported - you seem to have mixed view events with listview event handlers. Please refer to our documentation for working code samples. 

Regards,
Petyo
Telerik