About design and nearby

Responsive DHTMLX Grid Table

Posted: January 22nd, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | 2 Comments »

If you ever worked with DHTMLX library and it’s implementation in responsive design.. then you know what I’m talking about :)

By default (if there is not enough width for data grid) a scroll at the bottom of your table appears after page resizing and all your efforts for perfect responsibility are broken.

I solved this issue with a couple of lines of jQuery:

  1. $(window).resize(function () {
  2. if ($(window).width() < 900) {
  3. $(".gridbox").css("width", "100%");
  4. }
  5. });

The idea is to set the width of ‘div’ with id=”gridbox” (where our DHTMLX table is loaded) width:100% after resizing of window (at the code above the window should be resized up to 900px to make it works).

Standalone example: view the Responsive DHTMLX Grid Table in action >>

Related post:
You could be interested to read about jqGrid: How to Make it Responsive (with Twitter Bootstrap).

Share Button

Check Related Posts:

2 Comments on “Responsive DHTMLX Grid Table”

  1. 1 Gonza said at 2:32 pm on March 6th, 2015:
    Reply  |  Quote

    Thanks, but i have a problem, the jquery code change the .gridbox class to width to 100% and the dxhtmlgrid adjust again the width to some value in px, and the table is over floating.

  2. 2 julia said at 8:45 pm on March 19th, 2015:
    Reply  |  Quote

    It could be that div id=”gridbox” has value in px, but the idea is to make its width 100% max. Can you provide the link?

Leave a Reply

  • − 8 = zero

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now