Hi ,
i have written a small module with a kendo grid which i have to use in several projects/places/files:
guimodule.kundensuche = (function() {
var kundenDataSource = new kendo.data.DataSource ( {
type: "json",
pageSize: 20,
transport: {
read: {
url: "http://................/DataService/json/kunden/select_for_suchgrid.pvx?sessionid=" + rkkutils.getQueryParam("sessionid"),
type: "post",
dataType: "json"
}
},
});
$("#kundensuchgrid").kendoGrid({
dataSource: kundenDataSource,
height: 550,
sortable: true,
selectable: "row",
change: function(e) { console.log("Module"); this.trigger("kdnrSelected");},
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "kdnr",
title: "KDNR",
width: 55
}, {
template: "#: name1 #<br>#: name2 #<br>#: name3 #",
title: "Name",
width: 240
}, {
field: "strasse",
title: "Strasse",
width: 240
}, {
field: "landkz",
title: "Land",
width: 50
}, {
field: "plz",
title: "PLZ",
width: 65
}, {
field: "ort",
title: "Ort",
width: 180
}
]
});
var kundensuchgrid = $("#kundensuchgrid").data("kendoGrid");
var createEingabeFilter = function createEingabeFilter() {
$("#kundensuchfilter").html("<input class='k-textbox' type='text' id='SearchKunden'/>")
};
}
$("#SearchKunden").on("keyup", function(e){
var q = this.value;
if (q == '') {
this.placeholder=speech.suchbegriff;
}
kundensuchgrid.dataSource.query({
page:1,
pageSize:20,
filter:{
logic:"or",
filters:[
{field:"kdnr", operator:"contains",value:q},
{field:"name1", operator:"contains",value:q},
{field:"name2", operator:"contains",value:q},
{field:"name3", operator:"contains",value:q},
{field:"strasse", operator:"contains",value:q},
{field:"plz", operator:"contains",value:q},
{field:"ort", operator:"contains",value:q},
{field:"matchcode", operator:"contains",value:q},
{field:"landkz", operator:"contains",value:q}
]
}
});
});
return {
createEingabeFilter: createEingabeFilter
}
}());
Now i can use this in an html file like this:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.blueopal.min.css"/>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.blueopal.mobile.min.css"/>
<script src="../../kendoui/js/jquery.min.js"></script>
<script src="../../kendoui/js/kendo.all.min.js"></script>
<script src="../../kendoui/js/cultures/kendo.culture.de-DE.min.js"></script>
<title>Aussendienst-Informationen</title>
</head>
<body>
<div id="kundensuchgrid" />
<script src="../JsGuiModule/js/rkkutils.js"></script>
<script src="../JsGuiModule/js/guimodule.js"></script>
<script src="../JsGuiModule/kundensuche/kundensuche.js"></script>
</body>
</html>
Now i want to fire a custom event with the name "kdnrChanged" as soon as a new row is selected in the grid and i want to have an event listener for this
event in the html file. How can i do this ?
Regards
Dirk
1 Answer, 1 is accepted
You can handle the change event in the Grid's configuration. It is fired when the user selects a row or cell in the Grid. In the handler you can either apply the required logic, or raise a custom event that you can then handle as necessary elsewhere in the code.
There is no way to add a custom handler for the described event via an attribute in the DIV tag the Grid is initialized from.
Regards,
Dimiter Topalov
Telerik