This is a migrated thread and some comments may be shown as answers.
passing argument on data-click
10 Answers 1568 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Kyriakos
Top achievements
Rank 1
Kyriakos asked on 08 Jan 2013, 09:14 AM
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

10 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 09 Jan 2013, 02:28 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kyriakos
Top achievements
Rank 1
answered on 10 Jan 2013, 08:08 AM
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.
0
Accepted
Alexander Valchev
Telerik team
answered on 11 Jan 2013, 02:54 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Kyriakos
Top achievements
Rank 1
answered on 11 Jan 2013, 03:38 PM
This really is a very convinient way of dealing with arguments. Thanx a lot for the quick reply! .
0
Peter
Top achievements
Rank 1
answered on 15 Jan 2013, 07:17 PM
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
0
Alexander Valchev
Telerik team
answered on 17 Jan 2013, 01:37 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jiggy
Top achievements
Rank 2
answered on 02 Feb 2013, 09:31 AM
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?
 
0
Alexander Valchev
Telerik team
answered on 05 Feb 2013, 02:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Ananthalvan
Top achievements
Rank 1
answered on 28 Aug 2014, 11:17 PM
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
0
Petyo
Telerik team
answered on 29 Aug 2014, 07:24 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Asked by
Kyriakos
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Kyriakos
Top achievements
Rank 1
Peter
Top achievements
Rank 1
jiggy
Top achievements
Rank 2
Ananthalvan
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or