Unique id in dynamically added control's event handler

5 posts, 0 answers
  1. Mike
    Mike avatar
    5 posts
    Member since:
    Oct 2011

    Posted 23 Jun 2012 Link to this post

    Hi.

    For some reason I'm really struggling to pass a unique identifier to a function declared in the Change event of dynamically added sliders.  After (document).ready I am pulling in a JSON object and parsing it to create panalbars (as well as other controls) based on data in the object.  That all works fine, but when I dynamically create the slider and set the function I want to trigger on the Change event, any variable I set is shared between all the sliders (eventhough the values were unique at the time I initiated each slider in code) and I can't figure out how to reference the sender from the event function to reference a unique id. 

    In other words, what I am trying to do is dynamically create sliders with ids A, B, C.... that have their change events pointing to the same function that can not only pick up the unique value change per panelbar (e.value) but also capture the slider's unique id.

    Can someone provide guidance please?  I've been working on this problem much longer than I care to admit.

    Thanks,
    Mike

    EDIT: sorry, I posted this to the wrong forum.  I don't know how to move or delete posts.
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 25 Jun 2012 Link to this post

    Hi Mike,

    Unfortunately I am not able to reproduce this issue locally. Could you please send us a simple test jsFiddle/jsBin which reproduces the depicted issue? Thus I will be able to observe the problem and advice you further.

    All the best,
    Hristo Germanov
    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. Mike
    Mike avatar
    5 posts
    Member since:
    Oct 2011

    Posted 04 Jul 2012 Link to this post

    So I'm probably doing something dumb, but in this example: http://jsfiddle.net/mwrothbe/kTkZn/8/ how can I get the function SetDM to not only get the value but the id of the control that changed?  I tried $(this) and some other things, but I haven't figured out how to capture the sender's id.

    The idea here is the json object can contain any number of sub objectc so I want to instantiate the sliders dynamically, point the change events to a single function and still be able to identify which slider changed as well as the value of the change.

    Thanks,
    Mike
  5. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 04 Jul 2012 Link to this post

    Hello Mike,

    1) You can get the html element and then you can access the id of the slider:

    function SetDev(e) {
       console.log(this.element.attr("id"));
    }
    2) You can pass the id via options of the slider:
    $("#" + json[dev].ID + "Slide").kendoSlider({
      change: SetDev,
      id: json[dev].ID
    });
    and
    function SetDev(e) {
      console.log(this.options.id);
    }
    All the best,
    Hristo Germanov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mike
    Mike avatar
    5 posts
    Member since:
    Oct 2011

    Posted 05 Jul 2012 Link to this post

    THank you.  This worked perfectly.  I must have been having syntax problems.

    Thanks,
    Mike
Back to Top
Kendo UI is VS 2017 Ready