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

[Solved] MVC Grid ListView/DataView

5 Answers 238 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.

5 Answers, 1 is accepted

Accepted

answered on 07 Jun 2011, 01:53 PM

I used the Telerik Aspx2Razor because I wanted to convert the current example about the ListView in MVC:

http://weblogs.asp.net/rashid/archive/2010/03/24/creating-rich-view-components-in-asp-net-mvc.aspx

I made few changes in the layout for the current example (aspx) and It was running correctly in Aspx but when I converted to Razor using Aspx2Razor It is not running. I tried to fix but I could not. I am sending the Aspx, Razor and Bug Message bellow:

ASPX:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<Telerik.Web.Mvc.Playground.Examples.Models.Customer>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">

Customers

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<h2>Customers</h2>

<% Html.Telerik()

.ListView(Model)

.Name("customers")

.PrefixUrlParameters(false)

.BeginLayout(pager =>

{%>

<table border="0" width="100%">

<thead>

<tr>

<td colspan="5" class="t-footer">

<% pager.Render(); %>

</td>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="5" class="t-footer">

<% pager.Render(); %>

</td>

</tr>

</tfoot>

<tbody>

<tr>

<%})

.BeginGroup(() =>

{%>

<td align="center" style="padding-left:15px">

<%})

.Item(item =>

{%>

<div>

<div style="float:left;width:180px; height:200px;">

<img

alt="<%= item.DataItem.CustomerID %>" src="<%= Url.Content("~/Content/Images/Customers/" + item.DataItem.CustomerID + ".jpg") %>"/>

<ul style="list-style:none none;padding:10px;margin:0">

<li>

<strong><%= Html.Encode(item.DataItem.CompanyName) %></strong>

</li>

</ul>

</div>

<%})

.EmptyItem(() =>{%>

<%})

.EndGroup(() =>

{%>

</td>

<%})

.EndLayout(pager =>

{%>

</tr>

</tbody>

</table>

<%})

.GroupItemCount(20)

.PageSize(20)

.Pager<NumericPager>(pager => pager.ShowFirstLast())

.Render(); %>

</asp:Content>

-----------------

Razor:

@model IEnumerable<Telerik.Web.Mvc.Playground.Examples.Models.Customer>

@section TitleContent {

Customers

}

<h2>Customers</h2>

@{ Html.Telerik()

.ListView(Model)

.Name("customers")

.PrefixUrlParameters(false)

.BeginLayout(pager =>

{

<table border="0" width="100%">

<thead>

<tr>

<td colspan="5" class="t-footer">

@{ pager.Render(); }

</td>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="5" class="t-footer">

@{ pager.Render(); }

</td>

</tr>

</tfoot>

<tbody>

<tr>

})

.BeginGroup(@<text>

<td align="center" style="padding-left:15px">

</text>)

.Item(item =>

{

<div>

<div style="float:left;width:180px; height:200px;">

<img alt="@item.DataItem.CustomerID" src="@Url.Content("~/Content/Images/Customers/" + item.DataItem.CustomerID + ".jpg")"/>

<ul style="list-style:none none;padding:10px;margin:0">

<li>

<strong>@item.DataItem.CompanyName</strong>

</li>

</ul>

</div>

})

.EmptyItem(@<text>

</text>)

.EndGroup(@<text>

</td>

</text>)

.EndLayout(pager =>

{

</tr>

</tbody>

</table>

})

.GroupItemCount(20)

.PageSize(20)

.Pager<NumericPager>(pager => pager.ShowFirstLast())

.Render(); }

--------------

Bug message:

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.

Parser Error Message: Encountered end tag "text" with no matching start tag. Are your start/end tags properly balanced?

Source Error:


            Line 51:            .EndGroup(@<text>
Line 52:                             </td>
Line 53:                           </text>)
Line 54:            .EndLayout(pager =>
Line 55:                          {

Do you know which part of the code I need to fix?

Regards
Ricardo Goncalves

answered on 25 May 2012, 09:23 AM

Hi,

I was in search for Telerik, ListView and then I found the custom one made by Mr. Rashid.
http://weblogs.asp.net/rashid/archive/2010/03/24/creating-rich-view-components-in-asp-net-mvc.aspx

I'm using the 2012Q1 version so this listview approach seems old. I had to comment out some culture options and EnsureRequired function in ListView.cs (I dont know the purpose of it, but Listview seems working with comment out version.).

One thing I found was the pager info was showing - Displaying items 7 - 12 of 10 , so I fixed it with small code.
In NumericPager.cs find RenderInternal() function and locate the following code:

if (showInfo)

{

int pageSize = BindingContext.PageSize;

Writer.AddAttribute(HtmlTextWriterAttribute.Class, "t-status-text");

Writer.RenderBeginTag(HtmlTextWriterTag.Div);

int start = ((currentPage - 1) * pageSize) + 1;

int end = start + pageSize - 1;

Writer.Write("Displaying items {0} - {1} of {2}".FormatWith(start, end, BindingContext.TotalCount));

Writer.RenderEndTag();

}

And then add the line,

if (end > BindingContext.TotalCount)

{
end = BindingContext.TotalCount;

}

After,

int end = start + pageSize - 1;

Regards,
Mehmet