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

Creating data bound Html Attributes in MVC Grid cells

6 Answers 1168 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Frank
Top achievements
Rank 1
Frank asked on 11 Sep 2014, 05:29 PM
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?

6 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 12 Sep 2014, 10:35 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Frank
Top achievements
Rank 1
answered on 12 Sep 2014, 10:53 AM
Thank you, the underscores work for the data attribute.

Is there a way to set the value to a property the data bound item?
0
Dimiter Madjarov
Telerik team
answered on 12 Sep 2014, 11:35 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
li
Top achievements
Rank 1
answered on 10 May 2017, 03:14 AM

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"))
          )
    )

 

 

 

0
Viktor Tachev
Telerik team
answered on 11 May 2017, 01:13 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
li
Top achievements
Rank 1
answered on 11 May 2017, 02:13 PM
HI  Viktor Tachev,


  Thank you very much for your reply.
Tags
Grid
Asked by
Frank
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Frank
Top achievements
Rank 1
li
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or