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

HtmlAttributes for new rows

1 Answer 1047 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 08 May 2017, 05:20 PM

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

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 10 May 2017, 02:19 PM
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.
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or