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

Responsive Grid

2 Answers 253 Views

Grid

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

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

The code I'm using is below:

        $(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

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Responsive Grid

2 Answers, 1 is accepted