Responsive Grid

3 posts, 0 answers
  1. Larry
    Larry avatar
    22 posts
    Member since:
    Apr 2017

    Posted 10 Jun Link to this post

    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. Larry
    Larry avatar
    22 posts
    Member since:
    Apr 2017

    Posted 11 Jun in reply to Larry Link to this post

    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...

     

     

  3. Larry
    Larry avatar
    22 posts
    Member since:
    Apr 2017

    Posted 11 Jun in reply to Larry Link to this post

    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);

Back to Top