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

Not Answered This post has 0 verified answers | 4 Replies | 2 Followers Thread's RSS feed.

Eric Liu
Points 150
Replied On: Mon, Feb 13 2017 8:40 AM Reply

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


  • Post Points: 20

All Replies

Tihomir Iliev
Points 2,490
Infragistics Employee
Replied On: Wed, Feb 15 2017 10:28 AM Reply

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.

Best Regards,
Tihomir Iliev
Software Developer
Infragistics, Inc.

  • Post Points: 20
Eric Liu
Points 150
Replied On: Tue, Feb 21 2017 8:44 AM Reply

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  ?

 

  • Post Points: 20
Tihomir Iliev
Points 2,490
Infragistics Employee
Replied On: Wed, Feb 22 2017 11:13 AM Reply

Hello Eric,

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

Best Regards,
Tihomir Iliev
Software Developer
Infragistics, Inc.

  • Post Points: 5
Tihomir Iliev
Points 2,490
Infragistics Employee
Replied On: Thu, Feb 23 2017 11:27 AM Reply

Hello,

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

Please let me know if you have further questions.

Best Regards,
Tihomir Iliev
Software Developer
Infragistics, Inc.

  • Post Points: 5
Page 1 of 1 (5 items) | RSS