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
30
Hide iggrid features for mobile
posted

I'm evaluating your grid for use with .NET MVC and I want to know how you recommend hiding grid features for mobile users that won't render well. For example if I want to hide filters on the grid for mobile users how should I go about doing that?

  • 345
    Offline posted

    Hello James,

     

    Thank you for posting in our forum.

     

    I would appreciate if you please elaborate some more on why you need to hide the filtering for mobile users? I guess by “filters” you mean the filtering inputs just below the column headers, if the mode has been set to “simple” (it is also the default one if you don’t use virtualization)? In case you simply want to hide them, a media query would allow you to do that: just target the CSS classes applied to the filtering <tr> element, and set the “display” property to “none”:

     

    <style>
        @media screen and (max-width: 600px) {
            .ui-iggrid-filterrow.ui-widget{
                display: none
            };
        }
    </style>
    

     

    Please note that this would only hide the Filtering UI, but the Filtering widget would still get instantiated (as it is enabled in the grid features during initialization), so the Filtering API could still be used to filter the grid programmatically, if needed.

    The igGrid supports a Responsive Web Design mode, which allows you to configure its CSS classes and the way it would get displayed on different types of devices. Additionally, support for the Twitter Bootstrap framework is provided, in case you want to use some of its predefined classes.

     

    Please let me know if you have any further questions.