Non-responsive grid

7 posts, 0 answers
  1. Darryl
    Darryl avatar
    6 posts
    Member since:
    Nov 2015

    Posted 04 Feb 2016 Link to this post

    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>


  2. Darryl
    Darryl avatar
    6 posts
    Member since:
    Nov 2015

    Posted 04 Feb 2016 in reply to Darryl Link to this post

    Edit: Another picture showing the Fp column being too long which causes the Gp column to go off the screen
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 08 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Darryl
    Darryl avatar
    6 posts
    Member since:
    Nov 2015

    Posted 08 Feb 2016 Link to this post

    Thank you for this solution, but now I'm wondering if there is a way to incorporate a detail template along with this. 
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 10 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Darryl
    Darryl avatar
    6 posts
    Member since:
    Nov 2015

    Posted 16 Feb 2016 in reply to Iliana Nikolova Link to this post

    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? 
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 18 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top