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

[Solved] Can't replicate "Binding to DataTable" sample correctly, Paging functionality missing.

3 Answers 86 Views

Grid

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

This question is locked. New answers and comments are not allowed.

Ankur Nigam asked on 19 Mar 2012, 09:13 AM

Hello,

I am creating a sample using Telerik MVC Grid bound to Dataset with AJAX paging/sorting enabled.

I downloaded the sample from following location and it works fine.

http://www.telerik.com/community/code-library/aspnet-mvc/grid/binding-to-datatable.aspx

When I try creating a sample on similar lines, initial information is populated in Grid but when next page is requested, new information doesn't get populated in Grid. On further investigation, found that ActionResult specified for AJAX call isn't invoked.

I tried comparing the two smaples but can't find any difference.

Wondering if someone can help correcting AJAX paging when bound with Dataset.

Model

namespace TelerikMvcApplication1.Models

{

public class Detail

{

#region "Properties"

public string companyName { get; set; }

public string formName { get; set; }

private DataTable getDataTableSchema

{

get

{

DataTable objDataTable = new DataTable();

objDataTable.Columns.Add(new DataColumn("Id", typeof(Guid)));

objDataTable.Columns.Add(new DataColumn("Date of entry", typeof(DateTime)));

objDataTable.Columns.Add(new DataColumn("IP Address", typeof(String)));

objDataTable.Columns.Add(new DataColumn("Country Name", typeof(String)));

return objDataTable;

}

#endregion

#region "Methods"

public DataTable getUserFilledEnteries()

{

DataTable objDataTable = this.getDataTableSchema;

for (int i = 0; i < 20; i++)

{

// Dummy data

DataRow dr = objDataTable.NewRow();

dr[0] = Guid.NewGuid();

dr[1] = DateTime.Now;

dr[2] = "192.168.1.1.";

dr[3] = "Austria - " + i.ToString();

objDataTable.Rows.Add(dr);

}

return objDataTable;

}

#endregion

}

Controller

namespace TelerikMvcApplication1.Controllers

{

public class HomeController : Controller

{

public ActionResult Index()

{

ViewBag.Message = "Welcome to ASP.NET MVC!";

TelerikMvcApplication1.Models.Detail objDetail = new TelerikMvcApplication1.Models.Detail();

return View(objDetail);

}

[GridAction]

public ActionResult fetchUserEnteries()

{

TelerikMvcApplication1.Models.Detail objDetail = new TelerikMvcApplication1.Models.Detail();

return View(new GridModel(objDetail.getUserFilledEnteries()));

}

_Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.black.css").Combined(true).Compress(true)))</

head>

<body>

<div class="page">

<header>

<div id="title">

<h1>My MVC Application</h1>

</div>

@(Html.Telerik().Menu()

.Name("menu")

.Items(menu => {

menu.Add().Text("Home").Action("Index", "Home");

menu.Add().Text("About").Action("About", "Home");

}))

</header>

<section id="main">

@RenderBody()

</section>

<footer>

</footer>

</div>

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)))</body>

</html>

View - Home/Index

@model TelerikMvcApplication1.Models.Detail

@using System.Data;

@{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

}

@(Html.Telerik().Grid(Model.getUserFilledEnteries())

.Name("Grid")

.Columns(columns =>

{

foreach (DataColumn column in Model.getUserFilledEnteries().Columns)

{

columns.Bound(column.DataType, column.ColumnName);

}

})

.DataBinding(dataBinding => dataBinding.Ajax().Select("fetchUserEnteries", "Home"))

.Pageable()

.Sortable()

.Filterable()

.Groupable()

)

Thanks.

3 Answers, 1 is accepted

answered on 29 Mar 2012, 10:14 AM

under VIEW you need to extend Pageable() method.
in current scenario it will be working fine for page 1 but not for next page.
Try it as below:

<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Pageable(paging => 
            paging.PageSize(20)
                  .Style(GridPagerStyles.NextPreviousAndNumeric)
                  .Position(GridPagerPosition.Bottom)
        )
        
 %>

You can set the initial page of the grid by using the PageTo method

<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Pageable(paging => paging.PageTo(3))
 %>

Refer this link:

http://demos.telerik.com/aspnet-mvc/grid/paging

answered on 29 Mar 2012, 01:57 PM

Based on your suggestion, I modified the code to following.... still the same issue.

@(Html.Telerik().Grid(Model.getUserFilledEnteries())

.Name("Grid")

.Columns(columns =>

{

foreach (DataColumn column in Model.getUserFilledEnteries().Columns)

{

columns.Bound(column.DataType, column.ColumnName);

}

})

.DataBinding(dataBinding => dataBinding.Ajax().Select("fetchUserEnteries", "Home"))

.Pageable(paging =>

paging.PageSize(5)

.Style(GridPagerStyles.NextPreviousAndNumeric)

.Position(GridPagerPosition.Bottom))

.Sortable()

.Filterable()

.Groupable()

)

On further investigation, I found that the AJAX request isn't being send.... any thoughts on this?