Creating data bound Html Attributes in MVC Grid cells

7 posts, 0 answers
  1. Frank
    Frank avatar
    4 posts
    Member since:
    Feb 2014

    Posted 11 Sep 2014 Link to this post

    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?
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2213 posts

    Posted 12 Sep 2014 Link to this post

    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.

     
  3. Frank
    Frank avatar
    4 posts
    Member since:
    Feb 2014

    Posted 12 Sep 2014 in reply to Dimiter Madjarov Link to this post

    Thank you, the underscores work for the data attribute.

    Is there a way to set the value to a property the data bound item?
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2213 posts

    Posted 12 Sep 2014 Link to this post

    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.

     
  5. li
    li avatar
    3 posts
    Member since:
    Apr 2017

    Posted 09 May in reply to Dimiter Madjarov Link to this post

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

     

     

     

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1784 posts

    Posted 11 May Link to this post

    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.
  7. li
    li avatar
    3 posts
    Member since:
    Apr 2017

    Posted 11 May in reply to Viktor Tachev Link to this post

    HI  Viktor Tachev,


      Thank you very much for your reply.
Back to Top