Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Eric Liu
150
Make infragistics grid responsive while Using responsive infragistcs grid with spliter view
posted

Hi,

I am using Infragistics grid with Spliiter view.as shown in below screenshot.

Here we are having issue that when we click on splitter , the infragistics grid becomes irresponsive but when we change screen size to Ipad , grid layout becomes responsive to single column template view.

so we want when user clicks on splitter , the grid should become to single column template.as shown in image "Expected result "

So we think grid becomes responsive when we change window size , but not when div size changes.so we want when user chages div , the grid should become responsive to single column.

We are using below code for this.

For reference , for single column template 

http://www.igniteui.com/grid/responsive-single-column-template

and for spliter:

http://www.igniteui.com/splitter/overview

Code in both views of Splitter:

1) 1st View

Code of Single column template view 

2) @nd View

Code of splitter.

So w

Parents
  • 2680
    Offline posted

    Hello Eric,

    Thank you for contacting us.

    When you say you change the screen to iPad do you mean you emulate it using a browser or you have an iPad mode?

    The described scenario occurs because the grid becomes responsive based on the window size, not the container size. Please take a look at this help topic - http://www.igniteui.com/help/iggrid-responsive-web-design-mode-overview. If you want to have a grid responsive based on the container, you have to create a custom RWD profile - http://www.igniteui.com/help/iggrid-responsive-web-design-mode-creating-custom-profile. It would look something like this:

     

    $.ig.TestMode = $.ig.TestMode || $.ig.ResponsiveMode.extend({
        init: function (options) {
            this._super(options);
            return this;
        },
        isActive: function () {
            var width = $("#test").outerWidth();
            if (width < 400) {
                return this.settings.key === "phone";
            }
            if (400 <= width && width < 600) {
                return this.settings.key === "tablet";
            }
            return this.settings.key === "desktop";
        }
    });

    where the container has an id "test".

    Please let me know if you need further assistance.

Reply Children