Paging and header customization

[Pierre-Olivier Grangaud]

Hi,

I'm testing the grid to see if we can use it for a new application using ASP.NET MVC. I would like to know if the following feature/customization are possible :

- Can you custom the style of the pager ? The current pager is almost perfect but I only miss a dropdownlist where the user could select the number of items displayed on the page. Didn't see this feature in the GridPagerStyles enumeration. Any way to template it like we can do in the ASP.NET AJAX Grid ?

- The second question is about the header, I was able to add checkboxes in a column and I would like to know if it's possible to add one in the header of the corresponding column. It will act as a select all feature. I know how to manage it in my controller but I don't know how I can inject this checkbox instead of the column header title. Any idea ? 

Best regards,

Cedric

[Atanas Korchev]

Hi Pierre-Olivier Grangaud ,

You can use the following JavaScript to implement both of your request.

<%=
    Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID).Width(81);
            columns.Add(o => o.Customer.ContactName).Width(200);
            columns.Add(o => o.ShipAddress);
        .Ajax(ajax => ajax.Action("_Paging", "Grid"))
<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>
    {
        %>
        var $grid = $('#Grid');

        var pageSize = $('<select id="pageSize"><option>10</option><option>20</option></select>')
                .change(function() {
                    var grid = $grid.data('tGrid');
                    grid.pageSize = parseInt($(this).val());
                    grid.rebind();
                })
                .appendTo($grid.find('div.t-pager'));

        var checkbox = $('<input type="checkbox" value="Check me" />')
                        .prependTo($grid.find('th').eq(0));
        <%

    }); %>

I will log the page-size customization as a feature request.

I hope this helps,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James Davies]

Hi Atanas,

Can this page-size modification (above) work in Server mode (leaving out the .ajax call)?

The Page Size combo box (drop down) gets added to every grid, but choosing '20' does nothing.

    Thanks,
    Jim

[Atanas Korchev]

Hello James Davies,

No, the proposed workaround works only for Ajax and WebService binding modes.

Here is how to implement it for server binding mode:
View:

<% Html.BeginForm("Index", "Home"); %>
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID);
            columns.Add(o => o.OrderDate);
            columns.Add(o => o.CustomerID);
        })
        .Filterable()
        .ServerBinding(settings => settings.Action("Index", "Home", new {pageSize=ViewData["pageSize"]}))
        .Pageable(settings => settings.PageSize((int)ViewData["pageSize"]))
        .Sortable()
%>

<% Html.EndForm(); %>

<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>
    {%>
        var $grid = $('#Grid');

        $('<select id="pageSize" name="pageSize"><option>10</option><option>20</option></select>')
            .change(function() {
                $('form').submit();
            })
            .appendTo($grid.find('div.t-pager'))
            .val(<%= ViewData["pageSize"]%>);
        <%

    }); %>

Controller:

[HandleError]
public class HomeController : Controller
{
    public ActionResult Index(int? pageSize)
    {
        ViewData["pageSize"] = pageSize ?? 10;
        return View(new LinqNorthwindDataContext().Orders);
    }

    public ActionResult About()
    {
        return View();
    }
}

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[James Davies]

Mnay thanks Atanas - impressive response as always!

    Jim

[Pierre-Olivier Grangaud]

Nice question James, I was about to ask the same thing. Didn't wanted to use Ajax here.

Thank you Athanas for this answer !

[James Davies]

Hi Cedric,

I haven't got this to work yet.  It seems as if the following:

    .ServerBinding(settings => settings.Action("Index", "Home", new {pageSize=ViewData["pageSize"]}))

doesn't actually pass the 'routeData' (3rd argument) correctly.  I always get a 'pageSize' of null in the controller 'Index' method.  Probably something silly I'm doing...

I would be interested to hear if it works OK for you.

    Regards,
    Jim


[Georgi Krustev]

Hello James,

I have created a test project in my attempt to implement the required functionality. For your convenience I have attached it to this message. (Review ServerGrid.aspx and the ServerGrid action method).

All the best,
Georgi Krustev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[James Davies]

Thanks Georgi.

I've just run this.  If I set the page size drop-down in ServerGrid to 20, I get a refresh but I still see 10 rows, not 20.

What am I not getting?  Must be my runny nose...

    Best wishes,
    Jim

[James Davies]

Hi All,

If anyone else is following this, the test project kindly posted by Georgi above is just missing the arguments to the Pageable() call, so the end of the grid setup in ServerGrid.aspx should be more like:

.ServerBinding(binding => binding.Action(

"ServerGrid", "Home", ViewData["pageSize"]))

 

.Filterable()

.Pageable(settings => settings.PageSize((

int)ViewData["pageSize"]))

 

.Sortable()

.Render();

and this works fine.  I've removed the call to Scrollable() in Georgi's post, by the way, as I prefer to see the whole grid (and scroll in the browser if necessary).

Georgi - Many thanks for the quick solution re. page size in Server Mode!

    Jim

[James Davies]

Anyone following this who, like me, finds that the Page Size dropdown is triggering a POST each time you click on it (to make it drop down), might like to try the following mod.:

.change(function() {

    var value = $(this).val();

    if (value != <%

= ViewData["pageSize"]%>) {

 

        $('form').submit();

    };

})

This works precisely as I would wish it to, at least in IE8.

    Jim

[Pierre-Olivier Grangaud]

Hi Atanas,

I have another issue with the header when using templated column in the sample your provided (MvcApplication3).

It seems when you use a templated column with Sortable enabled you don't get the sorting ability on this column. The hyperlink used to sort the column isn't generated.

Grid code : 

    <%
        Html.Telerik().Grid(Model)
            .Name("Grid")
            .Columns(columns =>
            {
                columns.Add(c =>
                    {
                        %>
                        <input type="checkbox" value="<%= Html.Encode(c.CustomerID)%>" name="checkedRows" />
                        <%
                    }).Title("Select");
                columns.Add(o => o.City).Width(81);
                columns.Add(o => o.ContactName).Width(200);
                columns.Add(o => o.Country);
            })
            .Sortable()
            .Pageable()
            .Render();
    %>

Html code (table header only) : 

<thead>
        <tr>
            <th class="t-header" scope="col">
                Select
            </th>
            <th class="t-header" scope="col">
                <a class="t-link" href="/?Grid-page=1">City<span class="t-icon t-arrow-down"></span></a>
            </th>
            <th class="t-header" scope="col">
                <a class="t-link" href="/?Grid-orderBy=ContactName-asc&amp;Grid-page=1">Contact Name</a>
            </th>
            <th class="t-header t-last-header" scope="col">
                <a class="t-link" href="/?Grid-orderBy=Country-asc&amp;Grid-page=1">Country</a>
            </th>
        </tr>
    </thead>

In this code we can see that the header for the Select column has no hyperlink to sort the column. In this case, it's irrelevant to be able to sort a column containing checkboxes. I'm my application, I use templated column to display an hyperlink instead of only text. It needs to be sortable. Is it something simple to do ?

Best regards,

Cedric

PS : not sure if this issue is related to the use of templated column or not.

[Atanas Korchev]

Hello Pierre-Olivier Grangaud ,

Use a normal bound column and set the template using the Template method.

columns.Add(c => c.CustomerID).Template(c => {%> <strong><%= c.CustomerID </strong> <%});

Regards,
Atanas Korchev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Pierre-Olivier Grangaud]

Hi Atanas,

Nice and quick answer, it works fine now.

Thank you !

Best regards,

Cedric

[Marco]

Hello, can someone tell me how i can have a check box on header to select all rows?

i'm trying to use the proposed solution using the script registrar but noting happens.

Hope someone can help.

Best Regards

Marco Teodoro

[Pedro]

Hello,

I have tried the solution provided for the page size feature ( mvcapplication4.zip ) and its working :).


Although there seems to be a problem when combining this feature with others, for example with filtering - the filters reset when we change page size.
Same thing with sorting, current page, etc..

How can i keep the sorting, grouping,current page  and filtering when i change the page size?

Regards,
Pedro Miguel Máximo

EDIT:
there is a post regarding saving grid state -> http://www.telerik.com/community/forums/aspnet-mvc/grid/is-there-a-way-to-save-grid-stage.aspx

[Cyndie]

This dropdown list for the number of rows per page works great.  How can I have it select the pageSize value on load?  It always defaults to the first value in the list even if that is not what the pageSize is.  I'm using Ajax binding and get a syntax error if try to use the .val(<%= ViewData["pageSize"]%>); listed for server binding. 

Also, I have GridPagerPosition set to both and when the selection is changed, only the dropdown in the top pager changes.

Thanks.

[Marcin]

Hi

It is a truly great solution but it messes up with filtering and sorting. When you change page size after some filters are applied, icons in all columns show that filtering is applied, when actualy non is.

Any ideas why this is happening?

[Mark]

For Marcin and anyone else interested, I'm using the code from Atanas' first post and it seems to remember all those other settings if you change grid.rebind() to grid.ajaxRequest() in OnDocumentReady().

I'm a novice so I don't know what would be required to get it working if you're not using ajax (i.e., if you use the code Atanas attached as mvcapplication4.zip). Presumably the suggestions on the page Pedro linked to would help?

[Amit]

Hi,

Do we have that feature as yet?

Regards,
Amit

[vijay]

I am using Telerick Grid control in MVC3 application.
1.I could able to added a checkbox in column using client template.But i want to add Checkbox in the Column header which should act as check all option.
2.Check box selection should persist on paging..
Iam using ajax binding
can you please send the cshtml(razor) code to solve this..