This is a migrated thread and some comments may be shown as answers.
How to Send custom para to event handler
5 Answers 232 Views
This is a migrated thread and some comments may be shown as answers.
ivan
Top achievements
Rank 1
ivan asked on 07 Jan 2014, 03:50 PM

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

5 Answers, 1 is accepted

Sort by
0
ivan
Top achievements
Rank 1
answered on 08 Jan 2014, 11:17 AM
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



0
Accepted
Dimo
Telerik team
answered on 09 Jan 2014, 08:52 AM
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!
 
0
ivan
Top achievements
Rank 1
answered on 10 Jan 2014, 01:23 PM

Yes,
Thank you very much!

your method solve my problem.

Yours,
Ivan
0
Stephen
Top achievements
Rank 1
answered on 18 Aug 2016, 04:08 PM
Can you tell me what the equivalent MVC wrapper syntax is for adding these custom parameters?
0
Dimo
Telerik team
answered on 19 Aug 2016, 08:01 AM
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.
Asked by
ivan
Top achievements
Rank 1
Answers by
ivan
Top achievements
Rank 1
Dimo
Telerik team
Stephen
Top achievements
Rank 1
Share this question
or