Hi I wanted to know if there is any specific support for mobile?
If not what are the right steps to use the grid in mobile?
What I am doing currently is, I am projecting my content in a single column. But the problem with that is the grid advanced filter is not showing the columns in its search clause. How do I address this problem?
Hello Arunava,
Thank you for posting to Infragistics Community!
The IgxGrid is built with responsive web design in mind and it does adjust layout of HTML elements based on the device or the browser size. Do you have any particular aspect that you would like to address in terms of grid usage on mobile devices?
To ensure that your issue is addressed correctly, I will need some more details about it. Could you please elaborate on “projecting my content in a single column” and “on the advanced filter dialog not showing the columns in its search clause”? Maybe attach some screenshots, code-snippets, or ideally a small isolated application, where the behavior can be reproduced. Alternatively, you could fork and modify any demo from the Grid Advanced Filtering topic to reproduce your configuration.
Having a working sample on my side, which I can debug, is going to be very helpful in investigating whether there is built-in support for this behavior or finding the potential root cause for it.
Thank you for your cooperation.
Best regards,Bozhidara PachilovaAssociate Software Developer
Hi Bozhidara,
I will work on a demo and send it to you. but currently can you tell me how I can edit my advanced filter dialog styles?
This is the table in mobile view in chrome (it is a single column table with projected content). As you can see that dialog is horizontal and out of screen. How do i make it suitable for mobile?
What I can say is that the IgxGrid’s Advanced Filter Dialog does not currently support adjusting its layout according to the screen size. I have reached out to the development team regarding the possibility of this and will let you know as soon as I have more information.
While the dialog can be dragged by the header area on smaller screen sizes in order to display the parts that are initially out of view, what I could suggest is adopting the following approach that will improve the filtering experience for smaller-width screens. The ResizeObserver interface can be leveraged in order to switch between advanced and quick filtering modes. Here can be found a small sample demonstrating this. Please, test it on your side and let me know of any other questions on the matter.
Our primary aim is not having a horizontal scroll in mobile view. that is why we are projecting our own template. I will wait for your development team to come up with a solution.Thanks
Hi Arunava,
After reviewing this with the dev team, I can confirm that the Advanced filtering feature was not initially intended for use on smaller screen sizes, as it generally is meant to work with grids having multiple columns, which as well are not usually UI components heavily used on mobile screens. While the grid can adjust its width, based on the container, horizontal scroll would be involved when there are multiple columns. As it seems, your project adopts a custom approach to tackle this. I am not familiar with the exact layout that you are building, however, in case your data is presented via a custom template in a single column, as mentioned by you, then any grid filtering mechanism will reflect a single column present in the grid, and this is expected. There would be no way for the advanced or quick filtering to make a distinction of the data values, present as a text in the template, so that it functions, as if the data was presented in separate columns, such as in a regular grid.
By the way, I am wondering if you have considered the Multi-row Layout or the Collapsible Column Groups features. They allow you to save space in terms of width, while maintaining column functionality. For your convenience, I created this small demo project with multi-row layout, where I also included the ResizeObserver logic from the previously suggested sample. As you can see, the grid maintains this layout for mobile screen sizes as well, while the columns remain filterable.
You could leverage the Layout Configurator to easily create your own custom layout as well!
Finally, as already mentioned, the advanced filtering dialog was not intended for use on small-width screens, however, I can suggest initiating a discussion on the possibility of responsive layout by submitting a feature request in our GitHub repository here.
Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case.
This will give you the opportunity to directly communicate with our development team regarding the issue and get notifications whenever new information is available.
Regards,
Bozhidara Pachilova