Asp Net Core Grid Toolbar Buttons Adaptive Rendering

2 posts, 0 answers
  1. Aziz
    Aziz avatar
    8 posts
    Member since:
    May 2020

    Posted 25 Sep 2020 Link to this post

    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>

  2. Georgi Denchev
    Admin
    Georgi Denchev avatar
    86 posts

    Posted 29 Sep 2020 Link to this post

    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

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top