How to extend the kendoListView widget

4 posts, 1 answers
  1. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 09 Jun 2014 Link to this post

    Hi:

    I would like to add my own methods on the to ListView as follows:
    $("#AlertListView").kendoListView({
         dataSource: {
            data: []
        },
        template: "<li>#: message #</li>",
        displayMessages: function( messages ) {
            ...
        },
        hideMessages: function( ) {
            ...
        }
    });

    Phil

  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 10 Jun 2014 Link to this post

    Hi Phil,

    Please check this tutorial as it explains how to extend/create Kendo UI widgets.
    I would like to point out that assistance related to creating custom widget or extending the build-in functionality of the existing ones is out of the scope of our support services.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Phil H.
    Phil H. avatar
    88 posts
    Member since:
    Nov 2008

    Posted 10 Jun 2014 in reply to Alexander Valchev Link to this post

    Hi:

    I was already familiar with that page.  That addresses building a widget from the Widget class.  I am working with the ListView and would like to extent it.  Before I posted, I was unable to extend ListView, I am getting object does not support method 'extend'.  I would guess that all kendo objects use Widget as the prototype, so it should support extend method.

    Phil
  7. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 11 Jun 2014 Link to this post

    Hello Phil,

    I prepared a small example that demonstrates how to extend (add methods to) an existing widget.
    The approach uses extend method of the widget:
    (function ($) {
      var CustomListView = kendo.ui.ListView.extend({
        options: {
            name: "CustomListView"
        },
        say: function(message) {
            console.log(message);
        }
      });
      kendo.ui.plugin(CustomListView);
    })(jQuery);

    I hope this will help.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
Back to Top