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

Change grid pageSize on Kendo MVC UI depending on the device

3 Answers 599 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tito
Top achievements
Rank 1
Tito asked on 24 Aug 2012, 10:43 AM
Hi,
I have a grid that the pageSize will be 200 if is not iPad, and page size will be 20 if is rendered on iPad.
The end product will be just to iPad and Desktop, how can I do this checking using MVC Html Helper?
@(
 Html.Kendo().Grid(Model)
 
                .Name("Grid")
                .ClientDetailTemplateId("inventoryTemplate")
 
                .DataSource(ds => ds.Ajax()
                                .PageSize(200) // or .PageSize(20) if iPad
                                .Model(m =>
                                {
                                    m.Id(p => p.StockID);
                                })
                        .Read(r => r.Action("Read", "Home"))
)

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 24 Aug 2012, 01:38 PM
Hello Tito,

You can use standard server-side browser detection via Request.Browser and its properties.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tito
Top achievements
Rank 1
answered on 24 Aug 2012, 02:32 PM
Thanks Dimo,

your tip helped me.
first I created a folder in App_Browser:
<!--
You can find existing browser definitions at
<windir>\Microsoft.NET\Framework\<ver>\CONFIG\Browsers
-->
<browsers>
<!-- Mozilla/5.0 (iPad; U; CPU OS 4_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C134 Safari/6533.18.5 -->
<gateway id="IPad" parentID="Safari">
<identification>
<userAgent match="iPad" />
</identification>
<capabilities>
<capability name="mobileDeviceModel" value="IPad" />
<capability name="mobileDeviceManufacturer" value="Apple" />
<capability name="isMobileDevice" value="true" />
</capabilities>
</gateway>
<browser id="NewBrowser" parentID="Mozilla">
<identification>
<userAgent match="Unique User Agent Regular Expression" />
</identification>
<capture>
<userAgent match="NewBrowser (?'version'\d+\.\d+)" />
</capture>
<capabilities>
<capability name="browser" value="My New Browser" />
<capability name="version" value="${version}" />
</capabilities>
</browser>
<browser refID="Mozilla">
<capabilities>
<capability name="xml" value="true" />
</capabilities>
</browser>
</browsers>



Later on I made a big, but ugly :( if/else, I am wondering if there is a way to refactor it. (is because I am ommiting the rest of the grid, that is the same, appart from PageSize)

@if (Request.Browser.MobileDeviceModel != "IPad")
{
   @( Html.Kendo().Grid(Model)
 
                   .Name("Grid")
                   .ClientDetailTemplateId("inventoryTemplate")
                   .DataSource(ds => ds.Ajax()
                                   .PageSize(200)
                                   .Model(m =>
                                   {
                                       m.Id(p => p.StockID);
                                   })
                           .Read(r => r.Action("Read", "Home"))
                   )
                        
}
else
{
    @( Html.Kendo().Grid(Model)
 
                   .Name("Grid")
                   .ClientDetailTemplateId("inventoryTemplate")
                   .DataSource(ds => ds.Ajax()
                                  .PageSize(20)
                                   .Model(m =>
                                   {
                                       m.Id(p => p.StockID);
                                   })
                           .Read(r => r.Action("Read", "Home"))
                   )                      
}

 
Best Regards,
Tito Morais
0
Jose
Top achievements
Rank 1
answered on 21 Feb 2013, 07:15 PM
I know that the post is a little bit old, but just in case...

You can put the IF statement in your Controller

int pageSize = 0;

if (Request.Browser.MobileDeviceModel != "IPad")
pageSize = 200;
else
pageSize = 20;

and finally send it using ViewBag dictionary...

ViewBag.PageSize = pageSize;

---

// View ----

.DataSource(ds => ds.Ajax() // or Server()
.PageSize((int) ViewBag.PageSize)
)

=)
Tags
Grid
Asked by
Tito
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Tito
Top achievements
Rank 1
Jose
Top achievements
Rank 1
Share this question
or