grid column display

7 posts, 0 answers
  1. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 24 Jan 2018 Link to this post

    Hi,

    I have column grid call description and it has sometimes a lot of text.

    I want to see only 5 rows and 3 dots.

    how can I do that?

    thanks

    picture is attached 

    this is my code.

    @(Html.Kendo().Grid<TaskManagementUI.Models.TaskViewModel>()
          .Name("GridTasks")
          .Columns(columns =>
          {
              columns.Bound(c => c.ID).Hidden();
              columns.Bound(c => c.ProjectID).Title("Project Id").Hidden();
              columns.Bound(c => c.ProjectName).Title("Project Name").Hidden();
              columns.Bound(c => c.Name).Title("Name");
              columns.Bound(c => c.DevelopersDataSource).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers")
              .Filterable(f => f.UI("developersMultiFilter").Extra(false).Messages(m => m.Info("Show items contain these developers"))).Sortable(false);
              columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}");
              columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}");
              columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate(" <div style='width:94px; height:94px;'><canvas id='taskChart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas></div>").EditorTemplateName("PercentCompletedEditor");
              columns.Bound(c => c.Description).Title("Description"); 
              columns.Command(command => command.Custom("endTask").Click("endTask").Text("End Task"));
              columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);
          })
        .Scrollable()
        .Resizable(resize => resize.Columns(true))
        .Editable(editable => editable.Mode(GridEditMode.InLine).TemplateName("TaskEdit"))
        .Groupable(g => g.Enabled(false))
        .Filterable()
        .ToolBar(toolbar =>
        {

            toolbar.Template(@<text>
            <div class="toolbar" style="float:left">
                <a class="k-button k-button-icontext" onclick='addTaskAjax()' href="#">
                    <span class="k-icon k-i-add"></span> ADD TASK
                </a>
                <a class="k-button k-grid-excel k-button-icontext" href="#">
                    <span class="k-icon k-i-excel"></span>Export to Excel
                </a>
            </div>
            </text>);

        })
        .Excel(excel => excel
                       .AllPages(true)
                       .FileName("Tasks.xlsx")
                       .Filterable(true)
                       .ForceProxy(true)
                       .ProxyURL(Url.Action("FileExportSave", "Home")))
        .Pageable(pager => pager
                           .Refresh(true)
                           .PageSizes(true)
                           .PageSizes(new int[] { 6, 15, 20 })
                           .ButtonCount(5))
        .Sortable(sortable =>
        {
            sortable.SortMode(GridSortMode.MultipleColumn)
           .Enabled(true);
        })
        .Events(events => events.FilterMenuOpen("onFilterMenuOpen").FilterMenuInit("filterMenuInitTask").DataBound("onDataBoundSavedTasks").Cancel("createPieAfterCancellation").Edit("onTaskEdit").Save("onTaskSave").ExcelExport("exportTasks"))
        .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .Group(group => group.Add(p => p.ProjectName))
                                  .PageSize(20)
                                  .Events(events => events.Error("errorHandlerTask"))
                                  .Read(read => read.Action("GetSavedTasks", "Task").Data("additionalData"))
                                  .Update(update => update.Action("UpdateTask", "Task").Data("serialize"))
                                  .Destroy(update => update.Action("DeleteTask", "Task").Data("serialize"))
                                  .Model(model => model.Id(item => item.ID))))

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2396 posts

    Posted 26 Jan 2018 Link to this post

    Hello Michael,

    In order to show ellipsis in the Grid cells where text is longer you can add the following CSS rule:


    .k-grid td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    With that said, if you would like the appearance to be consistent across different screen widths you can specify width for the Grid columns. When some of the columns have no explicit width defined they will resize according to the available space for the grid container. 

    Furthermore, having the text shown on multiple lines and having ellipsis is not that trivial. This is because the text-overflow property works with a single line of text. In order to have the text span on multiple lines I can suggest using the approach from the example linked below:



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 28 Jan 2018 in reply to Viktor Tachev Link to this post

    this is not good for me. it's display only one row. I want to see 5 rows.

    thanks

  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2396 posts

    Posted 30 Jan 2018 Link to this post

    Hello Michael,

    The text-overflow property supports only text on a single line. If the requirement is to have multiple lines of text and also ellipsis you would need to use custom implementation as illustrated in the example linked in my previous post. 

    For your convenience I have created a sample dojo where the approach is implemented. 


    Note that this is a custom implementation that is not available as a built-in CSS feature. Thus, you may need to adjust it in order to fit your exact scenario. Furthermore, it can behave differently in various browsers. Please test the behavior and ensure that it works as expected in your environment. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 31 Jan 2018 Link to this post

    This is nice, but when the grid is resizable: true, the text is not extend auto fit to the cell limit.

    how can I dot that?

    Thanks
  6. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 31 Jan 2018 Link to this post

    do*
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2396 posts

    Posted 01 Feb 2018 Link to this post

    Hello Michael,

    If the column should be resizable you can remove the max-width setting from the custom CSS. 


    With that said, please note that this feature is a custom functionality that is not directly related to the Grid component. This is a workaround because of the CSS limitation that text-overflow setting supports one line only. Please test the custom code thoroughly to ensure that it works as expected in your environment.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 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