passing argument on data-click

Thread is closed for posting
11 posts, 1 answers
  1. Kyriakos
    Kyriakos avatar
    15 posts
    Member since:
    Jun 2012

    Posted 08 Jan 2013 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 09 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Kyriakos
    Kyriakos avatar
    15 posts
    Member since:
    Jun 2012

    Posted 10 Jan 2013 Link to this post

    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.
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Jan 2013 Link to this post

    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!
  6. Kyriakos
    Kyriakos avatar
    15 posts
    Member since:
    Jun 2012

    Posted 11 Jan 2013 Link to this post

    This really is a very convinient way of dealing with arguments. Thanx a lot for the quick reply! .
  7. Peter
    Peter avatar
    7 posts
    Member since:
    Feb 2012

    Posted 15 Jan 2013 Link to this post

    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
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Jan 2013 Link to this post

    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!
  9. jiggy
    jiggy avatar
    1 posts
    Member since:
    Oct 2012

    Posted 02 Feb 2013 Link to this post

    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?
     
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Feb 2013 Link to this post

    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!
  11. Ananthalvan
    Ananthalvan avatar
    1 posts
    Member since:
    Aug 2014

    Posted 28 Aug 2014 Link to this post

    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
  12. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 29 Aug 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready