Using HtmlAttributes to add a class to a Window object

2 posts, 0 answers
  1. Adam
    Adam avatar
    7 posts
    Member since:
    Aug 2018

    Posted 28 Feb 2019 Link to this post

    I am trying to add a CSS class to a window object that is created when the popup is initialized for editing in a grid component but the class isn't being added to the window. Am I missing something here?

    01.@(Html.Kendo().Grid<NotificationSystem.Web.Models.CategoryViewModel>()
    02.                  .Name("categories")
    03.                  .Columns(columns =>
    04.                  {
    05.                      columns.Command(command =>
    06.                      {
    07.                          command.Destroy().TemplateId("categories_delete");
    08.                      }).Width(80);
    09.                      columns.Bound(c => c.Name);
    10.                      columns.Bound(c => c.Description);
    11.                      columns.Bound(c => c.CreatedBy);
    12.                      columns.Bound(c => c.Created);
    13.                      columns.Command(command =>
    14.                      {
    15.                          command.Edit().TemplateId("categories_update");
    16.                      }).Width(80);
    17.                  })
    18.                  .Scrollable()
    19.                  .Sortable()
    20.                  .Pageable(pageable => pageable
    21.                      .Refresh(true)
    22.                      .PageSizes(true)
    23.                      .ButtonCount(5))
    24.                  .NoRecords(true)
    25.                  .Editable(editable =>
    26.                  {
    27.                      editable.Mode(GridEditMode.PopUp);
    28.                      editable.TemplateName("CategoryEditor");
    29.                      editable.Window(window =>
    30.                      {
    31.                          window.HtmlAttributes(new
    32.                          {
    33.                              @class = "k-window-lg"
    34.                          });
    35.                      });
    36.                  })
    37.                  .DataSource(dataSource => dataSource
    38.                      .Ajax()
    39.                      .PageSize(20)
    40.                      .ServerOperation(false)
    41.                      .Model(model => model.Id(m => m.Id))
    42.                      .Create(create => create.Action("Create", "Categories"))
    43.                      .Read(read => read.Action("Read", "Categories"))
    44.                      .Update(update => update.Action("Update", "Categories"))
    45.                      .Destroy(destroy => destroy.Action("Delete", "Categories"))
    46.                  )
    47.                  .Deferred()
    48.                  )
  2. Georgi
    Admin
    Georgi avatar
    703 posts

    Posted 05 Mar 2019 Link to this post

    Hi Adam,

    Generally speaking, the HtmlAttributes method is inherited from the WidgetBuilderBase class and it sets attributes to the generated html. However, in the context of the editor, no html is generated as the actual popup window is created on the client when the user presses the edit/create command. In other words, the configuration from the Editable.Window is serialized to a JS object which then is used when the window is created on the client. Therefore, the object passed to HtmlAttributes is ignored.

    As a workaround I can suggest you to add the class within the Edit event handler of the grid.

    e.g.

    function onEdit(e) {
        e.container.addClass('k-window-lg');
    }


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top