Click menu columns then UI sucks

[GridLover]

Hi,

 

I have menu columns in my 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 ? How can I solve?

[Stefan]

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

[GridLover]

Hi Stefan,

Yes, you are correct, I set the width for each . 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

I have 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;
}


[Stefan]

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

[GridLover]

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

[Stefan]

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