Question

我遇到了如何将行模板数据绑定应用到其中的问题。我不确定这样做的语法是什么。我正在使用服务器绑定模式。以下是我的代码。这就是我想要的http://onabai.wordpress.com/2013/07/19/kendoui-grid-editing-records-when-using-rowtemplate-tips-and-tricks/

型号

    public sealed class m_ShoppingCartItem
{       
    public int ID { get; set; }      
    public string Name { get; set; }       
    public string Description { get; set; }        
    public string PictureUrl { get; set; }         
    public decimal UnitPrice { get; set; }        
    public bool UnitInStock { get; set; }       
    public int Quantity { get; set; }         
    public decimal Totalprice { get; set; }       
    public string CategoryName { get; set; }
}

控制器

public class ShoppingCartController : Controller
{
    private static readonly List<m_ShoppingCartItem> items = new List<m_ShoppingCartItem>();
    public ShoppingCartController()
    {
        items.Add(new m_ShoppingCartItem
        {
            ID = 1,
            CategoryName = "Креатин",
            Description = "Power shock",
            PictureUrl = "product_item_3",
            Name = "Vita complex",
            Quantity = 2,
            UnitPrice = 20,
            Totalprice = 40,
            UnitInStock = true
        });
     }

    public ActionResult ShoppingCarts()
    {
        return View();
    }
    public ActionResult Editing_Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(items.ToDataSourceResult(request));
    }    
 }

查看

 <div class="shopping-cart-grid">
@(Html.Kendo().Grid<m_ShoppingCartItem>()
            .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.ID)
            .Template(@<text>@item.ID @item.Description</text>).Title("Description").Width(200);
    columns.Bound(c => c.CategoryName).Width(80).Title("Category");
           columns.Bound(c => c.Name).Width(80).Title("Name");
           columns.Bound(c => c.Description).Width(100).Title("Description");
           columns.Bound(c => c.PictureUrl).Width(50)
               .ClientTemplate("<img alt='<#= PictureUrl #>' src='"
                   + Url.Content("~/Content/images/")
                   + "#= PictureUrl#.jpg' />").Title("Picture"); 
        columns.Bound(c => c.UnitPrice).Width(100).Title("Unit Price");
        columns.Bound(c => c.UnitInStock).Width(100).Title("Unit In Stock");
        columns.Bound(c => c.Quantity).Width(100).Title("Quantity");
        columns.Bound(c => c.Totalprice).Width(100).Title("Total price");
        columns.Command(command => command.Destroy()).Width(70);
    })
  .DataSource(dataSource => dataSource
                            .Ajax()
                            .Model(model => model.Id(p => p.ID))                                                                                     .Read("Editing_Read", "ShoppingCart")
                                 )
                                     .Scrollable()

尝试解决问题的方法

一：

.Template(@<text>@item.ID @item.Description</text>).Title("Description").Width(200);

二：http://demos.kendoui.com/web/grid/rowtemplate.html

.ClientRowTemplate(
                   "<tr>" +
                       "<td class='photo'>" +
                                                  "<img src='" + Url.Content("~/Content/images/") + "#:PictureUrl#.jpg' alt='#: PictureUrl #' />" +
                       "</td>" +
                       "<td class='details'>" +
                                           "<span class='title'>#: Name #</span>" +
                                           "<span class='description'> :#: CategoryName#</span>" +
                                   "<span class='description'> #: Description# </span>" +
                       "</td>" +
                       "<td class='employeeID'>" +
                                   "#: ID #" +
                       "</td>" +
                    "</tr>"
               )
                       .ClientAltRowTemplate(
                   "<tr class='k-alt'>" +
                       "<td class='photo'>" +
                                                   "<img src='" + Url.Content("~/Content/images/") + "#:PictureUrl#.jpg' alt='#: PictureUrl #' />" +
                       "</td>" +
                       "<td class='details'>" +
                                   "<span class='title'>alt #: Name #</span>" +
                                   "<span class='description'>alt Name : #: CategoryName# #: LastName#</span>" +
                           "<span class='description'>alt Country : #: Country# </span>" +
                       "</td>" +
                       "<td class='employeeID'>" +
                           "#: EmployeeID #" +
                       "</td>" +
                   "</tr>"
               )

三

  .RowTemplate(grid => @<text>
        <div class="employee-details">
            <img src='@Url.Content("~/Content/Grid/Customers/" + item.ID + ".jpg")'
                alt='@item.Name' />
            <h3 class="t-widget">@item.Name</h3>
            <dl>
               <dt>Name:</dt><dd>@item.Name</dd>
               <dt>Company:</dt><dd>@item.CategoryName</dd>
               <dt>Country:</dt><dd>@item.Description</dd>
            </dl>
            <dl class="t-widget">
               <dt>Address:</dt><dd>@item.CategoryName</dd>
               <dt>Phone:</dt><dd>@item.Name</dd>
            </dl>

        </div>
       </text>)

购物车的MVC4 Kendo UI网格行模板

0 个答案: