Click menu columns then UI sucks

6 posts, 0 answers
  1. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 27 Mar 2017 Link to this post

    Hi,

     

    I have menu columns in my grid, when we click menu columns, we can decide which columns to display in UI. But when I click menu columns to decide which columns to display in UI, my UI just sucks. Why this happens? How can I solve?

  2. Stefan
    Admin
    Stefan avatar
    2834 posts

    Posted 29 Mar 2017 Link to this post

    Hello,

    I can assume that all of the columns have fixed width which is not recommended in this scenario.

    Please check the article for the Grid column width property describing the different scenarios and the recommended approach in them:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns

    I hope this will help to achieve the desired result.

    Regards,
    Stefan
    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.
  3. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 03 Apr 2017 in reply to Stefan Link to this post

    Hi Stefan,

    Yes, you are correct, I set the width for each columns. I removed width property for columns, now the UI looks good when I hide some columns. But my columns do not adjust based on its contents. All the columns width look the same. Can you check for me.

    I have add the 

     

     

    @(Html.Kendo().Grid<Myodel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith"))).Hidden();
            columns.Bound(p => p.Name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).ClientTemplate("<a href='/@(Html.Kendo().Grid<Myodel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ID).Filterable(ftb => ftb.Cell(cell => cell.Operator("startswith"))).Hidden();
            columns.Bound(p => p.Name).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).ClientTemplate("<a href='/computer/DetailsPage/#=ID#'>#:Name#</a>");
            
        .ToolBar(tools =>
        {
            tools.Excel();
            tools.Pdf();
            tools.Create();
            tools.Save();
            tools.Custom().Text("Reset Filter").HtmlAttributes(new { id = "gridAllFilterReset" });
        })
        .Excel(excel => excel
            .FileName("Kendo UI Grid Export.xlsx")
            .Filterable(true)
            )
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ComputerEditPopUp"))
        .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(new int[] { 10, 25, 50, 100 })
                .ButtonCount(5))
        .Sortable()
        .Scrollable(scrolling => scrolling.Enabled(true).Height(660))
        .Groupable()
        .ColumnMenu()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .HtmlAttributes(new { style = "height:430px;" })
        .Events(events => events.PdfExport("pdfExport"))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(m => m.ID);
                model.Field(p => p.ID).DefaultValue(-1);
            })
            .PageSize(20)
            .Read(read => read.Action("Json_Computer_List", "ComputerTest"))
            .Create(create => create.Action("Create", "ComputerTest"))
            .Update(update => update.Action("Update", "ComputerTest"))
            .Destroy(destroy => destroy.Action("Destroy", "ComputerTest"))
         )
    )


    <style>
        #grid > table /* header + data table */
    {
        table-layout: fixed;
    }
  4. Stefan
    Admin
    Stefan avatar
    2834 posts

    Posted 05 Apr 2017 Link to this post

    Hello,

    In the scenario, when the columns can be dynamically added or removed, the columns have to be with no widths. I understand that this may not be the desired result, but for example, if only two columns are left in the Grid, they cannot be with a width based on the content and long enough to fill the empty space.

    Apologies for the inconvenience this may cause you.

    Regards,
    Stefan
    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.
  5. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 05 Apr 2017 in reply to Stefan Link to this post

    Your answer did not help at all.

     

    Can you please directly refactor in my code that the columns width length can be adjusted based on its contents. Thanks

  6. Stefan
    Admin
    Stefan avatar
    2834 posts

    Posted 07 Apr 2017 Link to this post

    Hello,
     
    The columns can be expanded based on their content using the autoFitColumn method of the Grid, but this requires at least one column to be with no width in order to avoid the same issue when all of the widths are set. Still, as the Grid have column menu and the columns can be added and removed, this can create a scenario where the user can remove the column with no width which will again cause an issue.

    I hope this is describing in more details why the column cannot have width based on the content and at the same time to be able to add and remove them dynamically.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-autoFitColumn

    Regards,
    Stefan
    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.
Back to Top