grid only shows the first 20 records

jhaines

i am new to datatables and am trying to get my grid to display more than the first 20 recrods in the dataset. If I look at my model data used to load the table I have 875 records. Any suggestions on where to look?

This is my page...

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Import Namespace="Harris.Project.MCS2.Models" %>
<%@ Import Namespace="MvcContrib.UI.Pager" %>
<%@ Import Namespace="MvcContrib.UI.Grid" %>
<%@ Import Namespace="MvcContrib.UI.Grid.ActionSyntax" %>

Proposal Search




$(document).ready(function() {
$('#proposalIndex').dataTable({
"iDisplayLength": 25
, "aaSorting": [[2, "asc"]]
, "aoColumns": [{ "bSortable": false }, { "bSortable": false }, null, null, null, null, null, null, null]
, "sPaginationType": "full_numbers"
});
});



#proposalIndex
{
width: 100%;
}
#container
{
width: 100%;
}

<%=Html.ActionLink("Create New Proposal", "Create", new { proposalId = 0 }) %>
<% using (Html.BeginForm())
{%>

Search Parameters:



Proposal ID


Create Date


Proposal Administrator


Modified By


Modified Date




<%= Html.TextBox("proposalName", null, new { maxlength="25", style = "", width="250" })%>


<%= Html.TextBox("startDate", null, new { maxlength = "15", style = "", width = "150" })%>


<%= Html.TextBox("admin", null, new { maxlength = "35", style = "", width = "350px" })%>


<%= Html.TextBox("lastUpdatedBy", null, new { maxlength = "20", style = "", width = "200" })%>


<%= Html.TextBox("lastUpdatedDateTime", null, new { maxlength = "15", style = "", width = "150" })%>









<% Html.Grid(Model)
.Columns(column =>
{
column.For(rec => Html.ActionLink("Edit", "Edit", new { id = rec.Id })).DoNotEncode();
column.For(rec => Html.ActionLink("Copy", "Copy", new { id = rec.Id })).DoNotEncode();
column.For(rec => rec.ProposalName).Named("Proposal ID");
column.For(rec => rec.Revision).Named("Revision");
column.For(rec => rec.State).Named("State");
column.For(rec => rec.OrigAdmin).Named("Created By");
column.For(rec => rec.StartDate).Named("Create Date");
column.For(rec => rec.LastUpdatedBy).Named("Modified By");
column.For(rec => rec.LastUpdatedDateTime).Named("Modified Date");
}).Empty("There are no proposals to show.")
.Attributes(id => "proposalIndex")
.Render()
;
%>

<% } %>

allan

Hi jhaines,

A couple of things here:

1. Does the Html.Grid output tbody and thead tags - which are required by DataTables: http://datatables.net/usage
2. If you don't use DataTables does it show all the records?

Regards,
Allan

jhaines

Allan,

Thank you for your response.

The HTML.Grid command is ouputting the THEAD and TBODY elements.

If I don't use datatables, it too only shows me only 20 records. However if I set a breakpoint on the html.grid line, it shows me the 1175 records that came back in the list.

When I step through the code in this grid, it exits the loop after the twentieth iteration. It also shows that Model has 1175 items.


<%
int i = 1;
foreach (var item in Model)
{ %>


<%= Html.Encode(item.ProposalName)%>


<%= Html.Encode(item.Revision)%>


<%= Html.Encode(item.OrigAdmin)%>


<%= Html.Encode(item.LastUpdatedBy)%>


<%= Html.Encode(item.LastUpdatedDateTime)%>


<%
i++;
} %>


Any thoughts?

jhaines

ok I got the number of rows to show up....

I had to change from this ...

<% Html.Grid(Model)
.Columns(column =>
{
column.For(rec => Html.ActionLink("Edit", "Edit", new { id = rec.Id })).DoNotEncode();
column.For(rec => Html.ActionLink("Copy", "Copy", new { id = rec.Id })).DoNotEncode();
column.For(rec => rec.ProposalName).Named("Proposal ID");
column.For(rec => rec.Revision).Named("Revision");
column.For(rec => rec.State).Named("State");
column.For(rec => rec.OrigAdmin).Named("Created By");
column.For(rec => rec.StartDate).Named("Create Date");
column.For(rec => rec.LastUpdatedBy).Named("Modified By");
column.For(rec => rec.LastUpdatedDateTime).Named("Modified Date");
}).Empty("There are no proposals to show.")
.Attributes(id => "proposalIndex")
.Render()
;
%>

to this... (notice the change from Html.Grid(Model) to Html.Grid(Model.Proposals))

<% Html.Grid(Model.Proposals)
.Columns(column =>
{
column.For(rec => Html.ActionLink("Edit", "Edit", new { id = rec.Id })).DoNotEncode();
column.For(rec => Html.ActionLink("Copy", "Copy", new { id = rec.Id })).DoNotEncode();
column.For(rec => rec.ProposalName).Named("Proposal ID");
column.For(rec => rec.Revision).Named("Revision");
column.For(rec => rec.State).Named("State");
column.For(rec => rec.OrigAdmin).Named("Created By");
column.For(rec => rec.StartDate).Named("Create Date");
column.For(rec => rec.LastUpdatedBy).Named("Modified By");
column.For(rec => rec.LastUpdatedDateTime).Named("Modified Date");
}).Empty("There are no proposals to show.")
.Attributes(id => "proposalIndex")
.Render()
;
%>

now---

I need to figure out how to get the prev next first last buttons to show up. All I have is the text. I saw another posting that comments on this but I don't have a lot of experience on how to do css stuff.

This also did not work for me in the grid-example.sln that I downloaded.

Suggestions?

allan

Hi jhaines,

Have a look at this thread: http://datatables.net/forums/comments.php?DiscussionID=126

Regards,
Allan

jhaines

I have done all the things noted in the thread. But I am still having the problem. The text labels for prev next work as links but no buttons are showing up.

here's what the demos.css section looks like now...

div.dataTables_info {
width: 40%;
}

.dataTables_paginate {
width: 400px;
height: 22px;
line-height: 22px;
}

div.dataTables_paginate span.paginate_button,
div.dataTables_paginate span.paginate_active {
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
cursor: pointer;
*cursor: hand;
}

div.dataTables_paginate span.paginate_button {
background-color: #ddd;
}

div.dataTables_paginate span.paginate_button:hover {
background-color: #ccc;
}

div.dataTables_paginate span.paginate_active {
background-color: #99B3FF;
}


also, here;s my Site.Master file...

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">














My MVC Application



<% Html.RenderPartial("LogOnUserControl"); %>





<%= Html.ActionLink("Home", "Index", "Home")%>
<%= Html.ActionLink("About", "About", "Home")%>
















thanks again for your help.

jhaines

i have this working after upgrading my jqeury.js file to 1.3.2.

allan

Hi jhaines,

Interesting - I wonder what is different about 1.3.2. I'll make sure that is shipped with DataTables by default in the package. Thanks for the update.

Regards,
Allan