How to Send custom para to event handler

6 posts, 1 answers
  1. ivan
    ivan avatar
    27 posts
    Member since:
    Aug 2013

    Posted 07 Jan 2014 Link to this post


    Hi, 
    I have searched all the document & demo, but no records about how to send costom para(argument) to event handler.

    1. In jQuery, we could do this:
    jQuery("#test").bind("keyup",{sendpara: thepara},function(event) {
    alert(event.data.sendpara);
    });
    but I tested kendoUI, it seems to destroy this function. if I run:
    var editor = jQuery("#test").data("kendoEditor");
     editor.bind("keyup",{sendpara: thepara},function(event) {
    alert(event.data.sendpara);
    });
    The event  will not be fired(remove the {sendpara: thepara}, the event will fire).

    2. I found this:
    http://www.kendoui.com/forums/kendo-ui-framework/mvvm/passing-parameters-through-html-bindings-mvvm.aspx

    it says we could:
    var viewModel = kendo.observable({
        Id: "users/1",
        Points: 10,
        ReducePoints: function(id) {
            console.log(this.get("Id"));
        }
    });
    So I changed my code to:
      jQuery("#test").kendoEditor({
       sendpara:"123" });
     
    var editor = jQuery("#test").data("kendoEditor");
     editor.bind("change",function(event) {
       alert("b:"+ this.get("sendpara") );
       });
    But the runtime error is thrown:  there is no this.get method....

    3. At last, I found this:
    http://www.kendoui.com/forums/kendo-ui-web/numeric-textbox/get-element-id-from-change-event-handler.aspx

    So I changed my code to:
    jQuery("#test").kendoEditor();
      
    var editor = jQuery("#test").data("kendoEditor");
     editor.bind("change",function(event) {
       alert("b:"+this.element.attr("sendpara") );
       });
    So if I want to send a para named sendpara, I need to set it to  the "#test" element as an attribute. then get it like above..
    This is really not very good.

    So the general question is this: where can I find documentation on the properties and methods of the event argument parameter?
    Or kendoUI not really support to send para to an event handler?

    If so, that's really a bad news, because it's very  ordinary  need to send some paras in to event handler, and to handle some ajax call or function to send this paras to the server, and so on.


    yours,
    Ivan

  2. ivan
    ivan avatar
    27 posts
    Member since:
    Aug 2013

    Posted 08 Jan 2014 Link to this post

    I digged on kendoui.com all night, and found this:
    http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/upload/metadata#receiving-metadata-from-the-save-handler

    it said:
    function onUpload(e) {
        e.data = {
            fileDescription: $("#fileDescription").val()
        };
    }
    So, I change my code to:
    jQuery("#" +pre+ sa[0]).kendoEditor();
     var editor = jQuery("#" +pre+ sa[0]).data("kendoEditor");
       editor.bind("keyup",function(event) {
          event.data = {
     ttd: sa[0]
            };
    if (event.keyCode ==13)
     {
     alert(event.data.ttd);
     }
    });
    please note that there are more than one kendoeditor on the page, the source div is generated programly,  and render them into a kendo editor.
    so the key point is each editor need to know some arguments diffrentlly. For example, the sa[0]. 
    The code above could run, but in two editor, the event.data.ttd point to a same value. That's not correct, because the two divs' sa[0] is not same, I need to pass the 2 diffrent sa[0] to the two diffrent div(kendoeditor), so the inside logic could use them.

    In fact this is an old problem in jQuery's early version. The jQuery now version could use:
    jQuery("#" +pre+ sa[0]).bind("keyup",{msttd:sa[0]},function(event) {
    alert(event.data.msttd);
    });
    to send the two diffrent sa[0] to each element's event.
    But I don't know why kendoUI remove this function , or not implement it  on editor's bind handler.
    editor.bind("keyup",function(event) {      event.data = { ttd: sa[0]   }; is NOT OK. every time it send a same value in to the event handler.

    This is really important and urgent. 
    Please let me know how.

    yours,
    Ivan



  3. Kendo UI is VS 2017 Ready
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 09 Jan 2014 Link to this post

    Hi Ivan,

    Kendo UI widgets do not support passing custom parameters to event handlers.

    The techniques you have tried are based on completely different scenarios, so naturally they can't work.

    If you know the custom parameter value at the time the Editor is created, you can use:

    function onKeyUp(e) {
       var para = e.sender.options.para;
    }
     
    $("#id1").kendoEditor({
       para: 1,
       keyup: onKeyUp
    });
     
    $("#id2").kendoEditor({
       para: 2,
       keyup: onKeyUp
    });


    In general, every option, which is passed in a widget configuration object, is accessible later via the widget's options property.

    Theoretically, you can attach expandos to Kendo UI widget objects at any time, for later use.

    Regards,
    Dimo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. ivan
    ivan avatar
    27 posts
    Member since:
    Aug 2013

    Posted 10 Jan 2014 Link to this post


    Yes,
    Thank you very much!

    your method solve my problem.

    Yours,
    Ivan
  6. Stephen
    Stephen avatar
    158 posts
    Member since:
    Jan 2009

    Posted 18 Aug in reply to Dimo Link to this post

    Can you tell me what the equivalent MVC wrapper syntax is for adding these custom parameters?
  7. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 19 Aug Link to this post

    Hi Stephen,

    The server-side widget declaration syntax does not allow adding custom properties to the widget configuration. However, you can use HtmlAttributes:

    @(Html.Kendo().Editor()
          .Name("editor")
          .HtmlAttributes(new { data_foo = "bar" })
          .Events(ev => ev.KeyUp("onKeyUp"))
    )
     
    <script>
     
        function onKeyUp(e) {
            var para = e.sender.element.data("foo");
        }
     
    </script>


    http://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element


    Regards,
    Dimo
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready