Creating data bound Html Attributes in MVC Grid cells

[Frank]

I am trying to add HTML5 data- attributes to a data bound column in an MVC grid.

I'm looking for something like this without having to resort to using a template.  Obviously, the syntax in the new object is invalid because of the hyphens.
columns.Bound(i => i.InvoiceNumber).Title("Company").HtmlAttributes(new { data-company-id = @item.CompanyId});

Is there a way to accomplish this?

[Dimiter Madjarov]

Hello Frank,


The MVC recommended way to achieve this is to use underscores instead of hyphens.
E.g.

columns.Bound(e => e.FirstName).HtmlAttributes(new { data_company_id = "id" });

Regards,
Dimiter Madjarov
Telerik

 

 

[Frank]

Thank you, the underscores work for the data attribute.

Is there a way to set the value to a property the data bound item?

[Dimiter Madjarov]

Hello Frank,


I assume that a server bound Grid is used in the current application. If that is the case, I would suggest to use the CellAction() method.
E.g.

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductID);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.UnitsInStock);
    })
    .CellAction(cell =>
    {
        if (cell.Column.Member == "UnitsInStock")
        {
            cell.HtmlAttributes["data-company-id"] = cell.DataItem.ProductID;
        }
    })
    ...
)

Regards,
Dimiter Madjarov
Telerik

 

 

[li]

Hi Dimiter Madjarov,

I ran into the same problem, but the code above didn't work.

 

The purpose of this is to allow the cell to display the contents of the display when the mouse is moved?
If so, I have no effect in the experiment. My sample code is as follows.

Although I did not use the recommended attributes of the writing, but title is the original property of HTML. I just want to use the original property to show the effect of mouse.How to do this?

 @(Html.Kendo().Grid<VendorListModel>()
          .Name("grid")
          .Columns(columns =>
          {

              columns.Bound(p => p.Id).Width(60).Hidden();//.Filterable(f=>f.Cell(cell=>cell.Operator("gte")));
              columns.Bound(p => p.VendorName).Title(L("VendorName")).Sortable(false);
              columns.Bound(p => p.Contact).Title(L("Contact")).Sortable(false);
              columns.Bound(p => p.Phone).Title("Phone").Sortable(false);
              columns.Bound(p => p.Phone2).Title("Phone2").Sortable(false);
              columns.Bound(p => p.Fax).Title(L("Fax")).Sortable(false);
              columns.Bound(p => p.WebSite).Title(L("WebSite")).Sortable(false);
              columns.Bound(p => p.Email).Title("Email").Sortable(false);
              // columns.Bound(p => p.Comment).Title(L("Comment")).Sortable(false).Filterable(false);
              columns.Command(command =>
              {
                  command.Edit();
                  command.Destroy();
              }).Title(L("Actions"));//.Width(98);

          })
          .CellAction(cell =>
    {
        if (cell.Column.Member == "VendorName")
        {
            cell.HtmlAttributes["title"] = cell.DataItem.VendorName;
        }
    })
          .ToolBar(tools =>
          {
              tools.Create();
          })

           .Editable(e => e.Mode(GridEditMode.PopUp))
           .Events(e => e.Edit("onEdit"))//处理编辑时编辑弹窗不能显示的字段比如ID
         .Pageable(page =>
                   page.PageSizes(new[] { 5, 10 }))

        .Sortable()
        .Scrollable()
        .Filterable()
        .DataSource(dataSource =>
              dataSource
                .Ajax()
                .PageSize(5)
                .Events(events => events.Error("error_handler"))
                .Model(model => { model.Id(c => c.Id); })
                .Read(read => read.Action("Vendor_Read", "Vendors"))
                .Update(edit => edit.Action("Vendor_Edit", "Vendors"))
                .Destroy(delete => delete.Action("Vendor_Delete", "Vendors"))
                .Create(add => add.Action("Vendor_Add", "Vendors"))
          )
    )

 

 

 

[Viktor Tachev]

Hello Li,

The CellAction() method is suitable when the Grid is using Server binding. 

Based on your code snippet it seems that the Grid is configured to use Ajax binding. In that scenario you can specify the HtmlAttributes directly to the column.

columns.Bound(p => p.VendorName).Title("VendorName").Sortable(false).HtmlAttributes(new { title = "#=VendorName#" });

Regards,
Viktor Tachev
Telerik by Progress

[li]

HI  Viktor Tachev，


  Thank you very much for your reply.