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

Responsive Grid

2 Answers 104 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Larry
Top achievements
Rank 1
Larry asked on 10 Jun 2017, 04:26 PM

My main concern is having the page display correctly on differently sized desktop and laptop monitors. It's not a mobile accessed application as it's intranet.

My grid columns width resize fine however I'm not able to resize the height when the browser window height is reduced.

I'm unable to reproduce the behaviour in this fiddle: http://jsfiddle.net/dimodi/4eNu4/2/  which I read about here in this thread.

I've watched the responsive video and tried a variety of techniques without luck.  I understand that I need to subscribe to the window resize event, which I believe that I'm doing below. I'm not sure what I need to specify on the grid that I'm not currently (I've tried a variety of heights, 100% and fixed px without luck). I'm using ajax and the fiddle shows a server control - but I don't think that matters.

My scripts in the _layout.cshtml are as follows:  (duplicates got inserted at some point ? )

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet">
    <link href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" rel="stylesheet">
    <link href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.blueopal.min.css" rel="stylesheet">
    <link href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.dataviz.blueopal.min.css" rel="stylesheet">
      <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.dataviz.silver.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.dataviz.silver.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.dataviz.silver.min.css" rel="stylesheet" type="text/css" />
    <link href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.dataviz.metro.min.css" rel="stylesheet" type="text/css" />
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.aspnetmvc.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

The code I'm using is below:

<script>

        $(window).on('resize', function () {
            var grid = $("#PartsHistory").data("kendoGrid");
            grid.resize();
            //or, kendo.resize($('.chart-wrapper'));
        });

    </script>

    @(Html.Kendo().Grid<KendoUI.Sasco.Dashboard.Models.PartsHistoryViewModel>()
      .Name("PartsHistory")
      .HtmlAttributes(new { style = "width: 100%; height: 100%; border: 0;" })
      .AutoBind(true)
      .NoRecords()
      .Columns(columns =>
      {
          columns.Bound(c => c.Month);
          columns.Bound(c => c.SalesVolume).Title("Sales Volume");
          columns.Bound(c => c.SalesAmount).Title("Sales Amount").Format("{0:c0}");
          columns.Bound(c => c.Unit).Hidden();
          columns.Bound(c => c.PPH).Title("Price per 100").Format("{0:c2}");
      })
     .ToolBar(toolbar =>
     {
         toolbar.Excel();
         toolbar.Pdf();
     })

      .Excel(excel => excel
           .AllPages(true)
           .FileName("Part History.xlsx")
       )
      .Pdf(pdf => pdf
          .AllPages()
          .Margin("1cm", "1cm", "1cm", "1cm")
          .FileName("Part History.pdf")
        )
      .Selectable()
      .Scrollable()
      .Pageable()
      .Events(e => e
        .DataBound("onDataBound")
     )
      .Navigatable()
    //.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
       
    .DataSource(dataSource => dataSource
      .Ajax()
      .PageSize(23)
      .ServerOperation(false)
      .Model(m =>
      {
          m.Field(f => f.Month);
          m.Field(f => f.SalesVolume);
          m.Field(f => f.SalesAmount);
          m.Field(f => f.Unit);
          m.Field(f => f.PPH);
      }) // pass data using onRead event
        .Read(read => read.Action("PartsHistory", "PartsHistory").Data("onRead"))
      )
    )

Thanks much,

 

Larry

 

2 Answers, 1 is accepted

Sort by
0
Larry
Top achievements
Rank 1
answered on 12 Jun 2017, 03:14 AM

Actually I found that http://www.macaalay.com/2014/11/21/a-better-100-kendo-ui-grid-height/ worked for the most part, however it doesn't seem to handle the situation when the nav bar collapses.  Suggestions welcome...

 

 

0
Larry
Top achievements
Rank 1
answered on 12 Jun 2017, 04:04 AM

Fixed this so it's pretty good now for mobile. Had to add a a check if the menu is collapsed.

Noticed when starting in mobile it needs some work but it seems to be ok when resizing....

            var canSee = $("#toggle-button").is(":visible");
            var logo = $("#dash-logo");
            var logoHeight = 0;
            //figure in nav bar if collapsed
            if (canSee) {
                logoHeight = logo.outerHeight(true);
            }

            //Padding you want to apply below your page
            var bottomPadding = 10;


            //Check if Calculated height is below threshold
            var calculatedHeight = windowHeight - headerHeight - otherElementsHeight - bottomPadding - logoHeight;
            var finalHeight = calculatedHeight < minimumAcceptableGridHeight ? minimumAcceptableGridHeight : calculatedHeight;

            //Apply the height for the content area
            contentArea.height(finalHeight);

Tags
Grid
Asked by
Larry
Top achievements
Rank 1
Answers by
Larry
Top achievements
Rank 1
Share this question
or