This is a migrated thread and some comments may be shown as answers.

Extending the Grid control

7 Answers 639 Views
Grid
This is a migrated thread and some comments may be shown as answers.
rgullhaug
Top achievements
Rank 1
rgullhaug asked on 04 Dec 2011, 09:17 AM

I must say that KendoUI looks really good. It seems very solid. The features already existing is great, but my concern is about the features I need but which is not part of Kendo UI. For example I need the Grid control to show PrevPage and NextPage buttons instead of clickable page numbers like the KendoGrid does. How easy is it to extend/customize the controls? Is the kendo team willing to help with questions like that?

I have tried a little and managed to add the mentioned features to the KendoGrid control like this:

jQuery.fn.kendoCustomGrid = function (c) {
        if (c.pageable === false) {
            this.kendoGrid(c);
            return;
        }
        c.pageable = false;
        this.kendoGrid(c);
        this.append("<div class='k-grid-pager'><button id='prevPage' class='k-button'>Prev</button><button id='nextPage' class='k-button'>Next</button></div>");
        $('#prevPage').on("click", function (event) {
            c.dataSource.page(c.dataSource.page() - 1);
        });
        $('#nextPage').on("click", function (event) {
            c.dataSource.page(c.dataSource.page() + 1);
        });
        this.on("keydown", function (event) {
            if (event.keyCode === 34) { //PgDn
                c.dataSource.page(c.dataSource.page() + 1);
            }
            if (event.keyCode === 33) { //PgUp
                c.dataSource.page(c.dataSource.page() - 1);
            }
        });
    };

I can then use $(selector).kendoCustomGrid() instead of $(selector).kendoGrid()

Is this a good way to extend kendo controls? Or is there a better/preferred way?

7 Answers, 1 is accepted

Sort by
0
Andrej
Top achievements
Rank 1
answered on 23 Feb 2012, 12:21 PM
I am waiting for an answer regarding to extending KendoUI widget but still now answer from Telerik team.
0
Jeff
Top achievements
Rank 1
answered on 23 Feb 2012, 12:54 PM
Clearly this is THE most critical control in the entire suite, as indicated by the number of log entries as well as the frequency of new topics. 

Lets face it the the GRID is the heart and soul of most applications.  I can honestly say the 25 copies I purchased for my developent team was primarily based on the Telerik GRID operations in the older versions.

Having said all that, now that my team is moving to Kendo, I HOPE the Telerik team also realizes the importance of this control to all of us and has the proper focus and resources mapped to the advancement of this tool.
0
Redsquare
Top achievements
Rank 1
answered on 23 Feb 2012, 04:34 PM
@Jeff very well said. I agree wholeheartedly.
0
Justin
Top achievements
Rank 1
answered on 27 Feb 2012, 10:57 PM
I apologize for the forum necormancy, but what this issue ever addressed? I'm about to start working on a project where I will need to grab 250 records at a time and get a continuation token. When the user hits the 'next' button, I'll go grab the next 250 using the token returned from the last request.

Having page numbers wont really work out due to the limitation of where I'm storing the data (Azure Table Storage) and the amount of data being stored.
0
Alexander Valchev
Telerik team
answered on 28 Feb 2012, 01:24 PM
Hello,

Thank you for the feedback.
We realize the importance of the grid widget and the developers are focused on enriching it's functionality and features. Currently, customization of the grid paging controls is not available, however that could be achieved with jQuery script. In order to implement previous and next page buttons, you can use the page method, which will get current page index or request a page with the specified index.
$("#grid").data("kendoGrid").dataSource.page(2);
//where 2 is the index of the dataSource page that should be retrieved

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Justin
Top achievements
Rank 1
answered on 28 Feb 2012, 03:49 PM
Maybe I'm misunderstanding but I don't think that would suit my needs. With what your saying it seems I would need all of the data up front so the Kendo grid knows what fields go on what page. If that was acceptable I wouldn't need prev and next buttons instead of page links. The data I'll be retrieving can potentially contain millions of records and at most I can only retrieve 1000 at a time and would only want to display 250 per page. Therefore every time they hit the 'next' button I would fetch the next and display those. It doesn't seem like this is possible yet... Hopefully I misunderstood though.

EDIT: At the very least, can I hide the page numbers so I can put in my own page links?
0
Alexander Valchev
Telerik team
answered on 02 Mar 2012, 08:48 AM
Hi Justin,

Endless paging could be achieved through the previous mentioned page method.
dataSource.page(dataSource.page() + 1)

Concerning your second question, you can use jQuery script to remove page numbers and add custom content at their place.
$(".k-grid-pager").find("ul.k-pager").remove() //to remove pages
$(".k-grid-pager").html("<div>MyControls</div>"); //to replace the pages with custom content

Greetings,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
rgullhaug
Top achievements
Rank 1
Answers by
Andrej
Top achievements
Rank 1
Jeff
Top achievements
Rank 1
Redsquare
Top achievements
Rank 1
Justin
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or