Make infragistics grid responsive while Using responsive infragistcs grid with spliter view

150

Eric Liu posted over 7 years ago

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

2680

Offline Tihomir Iliev posted over 7 years ago

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

Cancel
150

Eric Liu posted over 7 years ago in reply to Tihomir Iliev

Hello Tihomir,

Thanks for your reply.

We have tried you solution in our code but it didn't work..

So can you please check our code by downloading from this url: http://web1.anasource.com/xfer/Demo%20App%20Infra.zip

In code,we have created two demos with combination of grid and splitter

For splitter, we have used this link : http://www.igniteui.com/splitter/overview

Demo 1 : Grid > Responsive Web Design Mode with Splitter ( Using Asp.net mvc helper )

For Grid > Responsive Web Design Mode, we have used this link : http://www.igniteui.com/grid/responsive-web-design-mode

Refer below files for Demo 1:

Demo1.cshtml
DemoController.cs -> "Demo1" Method
_Layout.cshtml -> for loading css and jqueries

Demo 2: Single column template grid with Splitter ( Using jquery)

For single column template grid, we have used this link : http://www.igniteui.com/grid/responsive-single-column-template

Refer below files for Demo 2:

Demo2.cshtml
DemoController.cs -> "Demo2" and "GetGridData" Method
_Layout.cshtml -> for loading css and jqueries

Can you please check in our demo code and implement necessary changes in our demo to produce the desired output ?
Cancel
Reply

Cancel
2680

Offline Tihomir Iliev posted over 7 years ago in reply to Eric Liu

Hello Eric,

I will check your application and get back to you as soon as possible.
Cancel
Reply

Cancel
2680

Offline Tihomir Iliev posted over 7 years ago in reply to Tihomir Iliev

Hello,

I updated Demo2.cshtml file and I am sending it to you.

Please let me know if you have further questions.

Demo2.zip
Cancel
Reply

Cancel