Left Align the "itemsPerPage" span

[Keith]

span.k-pager-info.k-label{

            text-align:left;
}

$searchTable.kendoGrid({
    height: height,
    sortable: true,
    selectable: false,
    navigatable:true,
    resizable: true,
    reorderable: true,
    columnResizeHandleWidth: 10
    ,pageable: {
        pageSize: 10,
        pageSizes:[10,20,50,100],
        buttonCount: 5,
        input:true,
        messages:{
            page:"Section",
            itemsPerPage: "Select to show more",
            display: "<span style='text-align:left;' >Showing {0}-{1} from {2} data items</span>"
        }
    }
});

It's great that I'm able to modify the labels for the information and functional bar at the bottom.

I would also like to be able to have the "itemsPerPage" label left justified, instead of beiong poalced in the far right corner. This is because I have a grid that dynamically grows with the number of columns in the results, so it can at times be very wide (off the page), and this information is not immediately visible. Is there a nice function or configuration item I'm missing?

I tried adding a "span" to the message, but it didn't work since the added span ends up inside of another span.

I also tried using CSS, but that's not having any visible effect either. I'm still experimenting with some widths for it perhaps, or maybe my selector just needs to be more specific (suggestions?). When selecting the elements with the developer tools, the spans themselves don't appear to be taking up the entire space of the bottom bar.

[Alexander Valchev]

Hi Keith,

The Grid's pager does not provide configuration options for reordering or justifying the elements inside the control.
If the styling modifications can be achieved with CSS the developer can override default Kendo styles by using CSS selector with higher specificity. In your case it will be easier to use the ID of the Grid (pager element is wrapped inside the Grid element). For example:

<style>
    #grid .k-pager-info.k-label {
        float: left;
    }
</style>

In case the styles cannot be changed only with CSS but require node reordering in the DOM tree the developer should use jQuery to rearrange the elements after grid initialization. For more information please check the jQuery DOM manipulation methods:

• http://api.jquery.com/category/manipulation/

The code should be executed after Grid's initialization script.
I hope this information will help.

Regards,
Alexander Valchev
Telerik