HtmlAttributes for new rows

2 posts, 0 answers
  1. Richard
    Richard avatar
    8 posts
    Member since:
    Apr 2017

    Posted 08 May 2017 Link to this post

    I have applied a class HTML attribute to the final column in a Grid a

    @(Html.Kendo().Grid<myModel>()
        .Columns(columns =>
        {
            columns.Bound(entity => entity.SurrogateKey).Hidden();
            columns.Bound(entity => entity.column1);
            columns.Bound(entity => entity.column2);
            columns.Command(command => command.Destroy())
                .HtmlAttributes(new { @class = "finalColumn" })
                ;
        })

    When a new row is added using addRow(), the new row's column doesn't have the "finalColumn" class attached to it (it just has the dirty cell class).  Is this expected behavior?  If so, do you have any suggestions on how I should handle this so the new row's final column has the "finalColumn" class?

    Thanks,

    Richard

  2. Georgi
    Admin
    Georgi avatar
    671 posts

    Posted 10 May 2017 Link to this post

    Hi Richard,

    I tried to replicate the behavior you describe, however, attaching HTML attributes with .HtmlAttributes() behaves as expected on my end. 

    In the code snippets below you can see my configuration of the grid and how I invoke the .addRow() function.

    Grid configuration:

    @(Html.Kendo().Grid<EmployeeViewModel>()
        .Name("classesDemoGrid")
        .DataSource(x =>
        {
            x.Ajax().Read(r => r.Action("AllEmployees", "Home")).PageSize(20).Model(y=> y.Id(z=> z.Id));
            x.Ajax().Create(r => r.Action("AddEmployee", "Home"));
            x.Ajax().Update(r => r.Action("AddEmployee", "Home"));
             
        })
        .Columns(x=>
        {
            x.Bound(y => y.LastName);
            x.Bound(y => y.FirstName);
            x.Bound(y => y.BirthDate).Format("{0:dd/MM/yyyy}").HtmlAttributes(new { @class = "customClass" });
            x.Command(y => y.Edit());
        })
        .Pageable()
    )

    Script:

    $('#addRowButton').on('click', add);
      function add() {
          var classesDemoGrid = $('#classesDemoGrid').data('kendoGrid');
          classesDemoGrid.addRow();
      }


    I also made a video where you can see how the functionality works on my end. Check it in the link below and let me know if I am missing something.




    Regards,
    Georgi
    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.
Back to Top