How to Send custom para to event handler

[ivan]

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

[ivan]

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

[Dimo]

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

 

 

[ivan]

Yes,
Thank you very much!

your method solve my problem.

Yours,
Ivan

[Stephen]

Can you tell me what the equivalent MVC wrapper syntax is for adding these custom parameters?

[Dimo]

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