Custom events in modules

2 posts, 0 answers
  1. Dirk
    Dirk avatar
    13 posts
    Member since:
    Jul 2015

    Posted 31 Mar Link to this post

    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

     

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 04 Apr Link to this post

    Hi Dirk,

    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
    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
Back to Top