Non-responsive grid

[Darryl]

Hi,

Attached is a file called Unresponsive grid, which shows the result of the code below. As you can see, the text in the Fp column is too long for that column and runs off the screen. Is there a way to make the grid more responsive, for example, locking the first column so that a horizontal scroll bar appears to scroll across the subsequent columns like in the file, responsive grid.

 <div class="row " style="max-width: 98%">
    <div class="columns">
        <div class="full-width">
            @(Html.Kendo().Grid<EPP.AdminPortal.ViewModels.Test>()
                .Name("grid")
                .HtmlAttributes(new { style = "table-layout: fixed, height: 550px;" })
                .Columns(columns =>
                {
                    columns.Bound(c => c.Id).Width(1000);
                    columns.Bound(c => c.Name).Width(2000);
                    columns.Bound(c => c.Email).Width(5000);
                    columns.Bound(c => c.Ap).Width(5000);
                    columns.Bound(c => c.Bp).Width(5000);
                    columns.Bound(c => c.Cp).Width(5000);
                    columns.Bound(c => c.Dp).Width(5000);
                    columns.Bound(c => c.Ep).Width(5000);
                    columns.Bound(c => c.Fp).Width(200);
                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("T_Read", "Test"))
                )
                //.Groupable()
                .Sortable()
           )
        </div>
    </div>
</div>

[Darryl]

Edit: Another picture showing the Fp column being too long which causes the Gp column to go off the screen

[Iliana Dyankova]

Hi Darryl,

In order to achieve the outcome illustrated in responsive-grid.png I would suggest locking the first grid column and enable the grid scrolling:

@(Html.Kendo().Grid<EPP.AdminPortal.ViewModels.Test>()
   .Name("grid")
   .Columns(columns => {
       columns.Bound(c => c.Id).Width(1000).Locked(true);
       //....
   })
   .Scrollable(scrollable => scrollable.Height(540))
   //....
)

For more details on this topic check the corresponding documentation.

Regards,
Iliana Nikolova
Telerik

 

 

[Darryl]

Thank you for this solution, but now I'm wondering if there is a way to incorporate a detail template along with this. 

[Iliana Dyankova]

Hi Darryl,

There is not a way to achieve this - as pointed in the corresponding documentation, the row template and detail features are not supported in combination with column locking.

Regards,
Iliana Nikolova
Telerik

 

 

[Darryl]

Oh okay. I'm curious about something else, if I were to create a separate grid, is there a way, utilizing the htmlhelper syntax, to bind both grids to the same datasource so that when one gets filtered or sorted, the changes take effect on the other one as well? 

[Iliana Dyankova]

Hi Darryl,

Shared data sources are not supported in Kendo UI for ASP.NET MVC - if you need a shared dataSource you should work with JavaScript syntax.

On a side note, it is accepted to post different questions in separate threads. If you have further questions which are not related to the initial issue, please open new conversations for them.

Regards,
Iliana Nikolova
Telerik