This is a migrated thread and some comments may be shown as answers.

Click menu columns then UI sucks

5 Answers 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
GridLover
Top achievements
Rank 1
GridLover asked on 28 Mar 2017, 04:14 AM

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?

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 29 Mar 2017, 11:19 AM
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 (charts) and form elements.
0
GridLover
Top achievements
Rank 1
answered on 04 Apr 2017, 04:40 AM

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;
}
0
Stefan
Telerik team
answered on 05 Apr 2017, 09:33 AM
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 (charts) and form elements.
0
GridLover
Top achievements
Rank 1
answered on 05 Apr 2017, 05:29 PM

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

0
Stefan
Telerik team
answered on 07 Apr 2017, 08:49 AM
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 (charts) and form elements.
Tags
Grid
Asked by
GridLover
Top achievements
Rank 1
Answers by
Stefan
Telerik team
GridLover
Top achievements
Rank 1
Share this question
or