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
Michael Mangelschots
2732
IgGrid: Responsive Mode's Vertical Alignment doesn't work well with RowSelectors
posted

Hello Infragistics team and community

I'm having trouble with my IgGrid. I'm currently using a grid to show a list of contact persons. This grid has, among others, the Selection and rowSelection feature enabled. Users can select contact persons from the grid. The rowSelector adds a column before the other columns, where an arrow is shown, pointing at the selected row. This is how I want it to be. I also have the Responsive feature enabled, with enableVerticalRendering. When the screen size goes small, the Responsive feature turns to vertical rendering, turning the grid in a 2-column key - value list, which is also what I want to happen. 

However, with both enabled, what happens is that the column with the arrow that the rowSelector generates, gets put in front of the first row (the name row). Because of this, this row now has three columns., as seen in the screenshot below.

I also made a jsfiddle to demonstrate the problem: http://jsfiddle.net/u0m1goah/10/ 

If possible, I'd disable the rowSelector when going to phone mode, but it should be re-enabled when I return to tablet or desktop mode.

I'm looking forward to finding a way where I can keep both functionalities.

Kind regards

  • 200
    Offline posted

    Hello Michael,

    What I can suggest is to remove the rowSelector column when responsiveModeChanged event is fired. Using ui.mode the responsive mode is gathered and if it is phone or tablet then the rowSelectors feature can be destroyed using it’s destroy method.

    responsiveModeChanged: function (evt, ui) {
    if (ui.mode === "phone" || ui.mode === "tablet") {
        grid.igGridRowSelectors("destroy");
    } else {
        // Create grid again
        grid.igGrid(settings);
    }
},

    In order to revert the rowSelector column the grid should be created from scratch. Additionally the initial responsive mode should be checked to ensure that it is not in tablet or phone mode and if it is the destroy method of rowSelectors should be applied.

    const currentMode = grid.igGridResponsive("getCurrentResponsiveMode");
if(currentMode === "phone" || currentMode === "tablet") {
    grid.igGridRowSelectors("destroy");
}

    Attached you can find an update of the sample you attached. Feel free to check it and ask me in case you have additional questions.

    responsiveWithSelectorsSample.zip