added prev first next and last page

[Giulio]

hello,
I'm trying to add buttons for pagination.
the only way that I realize is this, modifing the kendo.all.js due the refresh at end of widget:

           

html_add = '</li><li><button id="nextPage" class="k-sprite k-icon k-arrow-next">Next</button><button id="firstPage" class="k-sprite k-icon k-arrow-last">Last</button></li>';

html_prep ='<li><button id="firstPage" class="k-sprite k-icon k-arrow-first">First</button><button id="prevPage" class="k-sprite k-icon k-arrow-prev">Prev</button></li>';
//that.list.empty().append(html)

that.list.empty().append(html).append(html_add).prepend(html_prep);

in the var Pager = Widget.extend(

so I have the situation in picture.
Is there a better way that don't put code in the kendo.all.js (I don't want to modify anymore..) ?
Every other  function that I write  is rebulid with the pager refresh.

thanks
Giulio

[Giulio]

any news?

[Joel]

Check out this demo http://develic.com/kendoGrid/list.html that accesses the grid.pager object on grid dataBound and inserts a custompage size dropdown into the pager bar.

[Giulio]

thanks joel,

trying your code I resolved ...

just put the call at BeaGridInfo on change:

$(function() {

        $("#grid").kendoGrid({

            pageable: true,    

            dataSource: {

                type: "json",

                serverPaging: true,

                serverSorting: true,

                transport: {

                    read: "?module=<?=$_REQUEST["module"]?>&applettype=kserver&mode=action&q=2" ,

                },

                schema: {

                    data: "data",

                    total: "total",

                    model: {

                        id: "id",

                        fields: {

                            NAME: { editable: true },

                            STATUS: { editable: true },

                            UPDATED: { editable: false },

                            CREATED: { editable: false },

                            ACCOUNT_NAME: { editable: false },

                            AREA: { editable: true },

                            SERVICEREQUSTS_NAME: { editable: false },

                            PRIORITY: { editable: true },

                            RECURSE_SAVE: { editable: false },         

                            PR_GRP_NAME: { editable: false },                              

                            OWNER_NAME: { editable: false },                               

                            EXP_DT: { editable: false },               

                            //edtSTATUS: { validation: { required: true} }

                        }

                    }

                },

                change:BeaGridInfo,

                pageSize: <?=$ROW_LIMIT?>,

                serverPaging: true,

                error: function(e) {

                    alert(e.responseText);

                },

                //sort: { field: "CREATED", dir: "asc" },

            },

           pageable: {

               buttonCount: 5,

               selectTemplate: '<li><span class="k-state-active">#=text#</span>',

               linkTemplate: '<li><a href="\\#" class="k-link" data-#=ns#page="#=idx#">#=text#</a></li>',

           },

            editable: true,

            //navigable: true,

            selectable: true,

            //scrollable: true,

            sortable: {

                mode: "single", // enables multi-column sorting

                allowUnsort: true

            },             

            columns: [

                          { title: "<?=$LBL_ACTIVITIES_FIELD_CREATED;?>",field: "CREATED" },

                          //{ title: "<?=$LBL_ACTIVITIES_FIELD_ACCOUNT_NAME;?>",field: "ACCOUNT_NAME" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_NAME;?>",field: "NAME" },

                         // { title: "<?=$LBL_ACTIVITIES_FIELD_SERVICEREQUEST_NAME;?>",field: "SERVICEREQUEST_NAME" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_AREA;?>",field: "AREA" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_STATUS;?>",field: "STATUS" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_PRIORITY;?>",field: "PRIORITY" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_RECURSE_SAVE;?>",field: "RECURSE_SAVE" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_PR_GRP_NAME;?>",field: "PR_GRP_NAME" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_OWNER_NAME;?>",field: "OWNER_NAME" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_EXP_DT;?>",field: "EXP_DT" },

                          { title: "<?=$LBL_ACTIVITIES_FIELD_UPDATED;?>",field: "UPDATED" }

                      ],

                 

            toolbar: [ "save", "cancel","destroy","create" ]  // adds save and cancel buttons

        });

 

    });

and then, in an external js:

BeaGridInfo = function() {

 

    var info = $(".k-grid-toolbar .bkinfo");

 

    if (!info.length) {

       info = $('<div class="bkinfo"/>').appendTo(".k-grid-toolbar");

    };

     

    var myul  = $('<ul class="k-pager k-reset k-numeric" />');

    html_add = '</li><li><button id="nextPage" class="k-sprite k-icon k-arrow-next">Next</button><button id="firstPage" class="k-sprite k-icon k-arrow-last">Last</button></li>';

    html_prep ='<li><button id="firstPage" class="k-sprite k-icon k-arrow-first">First</button><button id="prevPage" class="k-sprite k-icon k-arrow-prev">Prev</button></li>';

    myul.append(html_add).prepend(html_prep);

    //alert(JSON.stringify($(".k-pager .k-reset .k-numeric"), null, 4));

    info.text(kendo.format("{0} - {1} of {2}",

            (this.page() - 1) * this.pageSize() + 1, //first item in the page

            Math.min(this.page() * this.pageSize(), this.total()), // last item in the page

            this.total() // all items

            ));

 

}

i'll use your code for page size selector in the next days :)

bye
Giulio

[Manoj Kapoor]

Thanks Giulio for the sample code. It just works great.

I have some specific issue with regards to the same & would like to know your thoughts on how to handle the navigations for First, Next, etc using the image buttons you added. For me the page is causing a post back. To ovoid this I converted the buttons to Input type & now want to have a client even handle the navigation. Basically I want to accomplish the navigation on client side instead of server side.

Can you let me know how can we handle the scenario

Thanks & Regards,
Manoj Kapoor

[Giulio]

Thanks Manoj,
I'm just "offline" now, I'll post the code asap!

bye
Giulio

[Manoj Kapoor]

Hi Giulio - Could you post the required code as I want to finalize that implementation today

Thanking you in advance,
Manoj Kapoor

[Manoj Kapoor]

Hi Giulio - Do you have any updates on the same?