Asp Net Core Grid Toolbar Buttons Adaptive Rendering

[Aziz]

Hi Telerik Team,

I can't see from my mobile browser(telephone) my custom commands Attachment, Distribution, Structure. Desktop browser show everything ok.

telerik version: Telerik.UI.for.AspNet.Core 2019.2.619.

Tell me please, why custom command columns is not visible.

 

Code sample:

 

@(Html.Kendo().Grid<WorkFlow.Core.Models.Dto.DocumentTable>()
                                                                                                                        .Name("Grid")
                                                                                                                        .Columns(columns =>
                                                                                                                        {
                                                                                                                            columns.Bound(e => e.Id).Visible(false);
                                                                                                                            columns.Bound(e => e.Number).Title("Номер документа").HtmlAttributes(new { style = "text-align: center;" }).Width(120);
                                                                                                                            columns.Bound(e => e.InboxNumber).Title("Номер вх.документа").Width(120);
                                                                                                                            columns.Bound(e => e.DateReg).Format("{0: dd.MM.yyyy}").Title("Дата регистрации").Width(120);
                                                                                                                            columns.Bound(e => e.OrgName).Title("Откуда").Width(150);
                                                                                                                            columns.Bound(e => e.About).Title("Краткое содержание").Width(200);
                                                                                                                            columns.Bound(e => e.Mail).Title("Факс/Электронный адрес").Width(100);
                                                                                                                            columns.Bound(e => e.DocOwner).Title("От кого").Width(100);
                                                                                                                            columns.Bound(e => e.Address).Title("Адрес").Width(200);
                                                                                                                            columns.Bound(e => e.DepartmentName).Title("Исполнитель").Width(200);
                                                                                                                            columns.Bound(e => e.UserName).Title("ФИО(ОУЧРиДО)").Width(200);
                                                                                                                            columns.Command(command =>
                                                                                                                            {
                                                                                                                                command.Custom("Attachment").Click("openAttachment").Text(" ").IconClass("fa fa-mail-bulk");
                                                                                                                                if (User.IsInRole("Admin"))
                                                                                                                                {
                                                                                                                                    command.Custom("Distribution").Click("openDialog").Text(" ").IconClass("fa fa-mail-bulk");
                                                                                                                                }
                                                                                                                                command.Custom("Structure").Click("openDialogDistribute").Text(" ").IconClass("fa fa-edit");
                                                                                                                            }
                                                                                                                                );
                                                                                                                        })
                                                                                                               
                                                                                                                 .ToolBar(toolbar =>
                                                                                                                 {

                                                                                                                     toolbar.Excel().Text("Экспорт в Excel").HtmlAttributes(new { style = "height:70px;" }).IconClass("fa fa-mail-bulk");
                                                                                                                     if (User.IsInRole("Admin"))
                                                                                                                     {
                                                                                                                         toolbar.Custom()
                                                                                                                        .HtmlAttributes(new { onclick = "onClickCreateOutbox();return false;" })
                                                                                                                        .Name("CreateOutBoxButton").Text("  Создать исходящий документ").IconClass("fa fa-mail-bulk");
                                                                                                                         toolbar.Custom()
                                                                                                                         .HtmlAttributes(new { onclick = "onClickCreateButton();return false;" })
                                                                                                                         .Name("CreateButton").Text("  Создать входящий документ").IconClass("fa fa-mail-bulk");
                                                                                                                     }


                                                                                                                 })

                                                                                                                 .Excel(excel => excel
                                                                                                                                    .AllPages(true))

                                                                                                           .Mobile()
                                                                                                            .Sortable()
                                                                                                            .Pageable()
                                                                                                            .Resizable(resize => resize.Columns(true))
                                                                                                            .Filterable()
                                                                                                            .ColumnMenu()
                                                                                                            .Scrollable()
                                                                                                            .HtmlAttributes(new { style = "height:450px;" })

                                                                                                            .DataSource(datasource => datasource
                                                                                                           .Ajax()

                                                                                                           .PageSize(50)
                                                                                                           .Read(read => read.Action("GetDocuments", "Document", new { year = Model.year, typeDoc = Model.docType }))
                                                                                                           )
                                                                                                           .Resizable(resize => resize.Columns(true))
)
------------

<script type="text/javascript">

    $(document).ready(function () {
        var isMobile = Boolean(kendo.support.mobileOS);

        if (isMobile) {
            $("#Grid").data("kendoGrid").resize();
            alert('i m here');
        }
    });

</script>

[Georgi Denchev]

Hi, Aziz

Thank you for providing a code snippet.

Setting width to the Command Column should resolve this issue. I am going to highlight the change I made.

columns.Command(command =>
          {
          command.Custom("Attachment").Click("openAttachment").Text(" ").IconClass("fa fa-mail-bulk");
          if (User.IsInRole("Admin"))
              {
              command.Custom("Distribution").Click("openDialog").Text(" ").IconClass("fa fa-mail-bulk");
          }
          command.Custom("Structure").Click("openDialogDistribute").Text(" ").IconClass("fa fa-edit");
      }
            ).Width(120);

If a column is missing the Width method and there isn't enough horizontal space, that column will shrink to 0 width.
You can refer to the documentation for other similar scenarios: 

https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/columns/widths

If I can be of further assistance, let me know.

Best Regards,
Georgi Denchev
Progress Telerik