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
Ram p
85
Virtualization Disable GridFilter and Header wordwrap
posted

HI,

Enabled Virtulaization for the IgGrid. But this was  disable Grid Filters. and wordwrap in Grid Header text.

Any work around to enable filters for the Iggrid with Virtualization was enabled.

Here is the sample code

$(function () {
$("#grid").igGrid({
autoGenerateColumns: false,
renderCheckboxes: true,
width: "100%",
height: "500px",
virtualization: true,
virtualizationMode: "continuous",
avgRowHeight: "30px",
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "30%" },
{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" }
],
features: [
{
name: "Filtering",
persist: false
}
],

dataSource: adventureWorks
});
});

Parents
  • 485
    Offline posted

    Hello Ram p,

     

    Thank you for posting in our forum.

     

    The Filtering feature should work out-of-the-box when virtualization is enabled - I used the configuration you have provided along with the adventureworks.min.js data file, Ignite UI 18.1.147 and Google Chrome 67.0.3396.99 but I wasn’t able to reproduce this behavior on my side.

    Which browser and which version of Ignite UI do you use? Typing “$.ui.igGrid.version” in the browser console would show you the build number.

    I see you have set “width: 100%” in the grid initialization options – that would set the grid’s width to 100% of its parent element. What width(or what CSS) have you set for that parent?

    Do you get any errors in the browser console when the filtering conditions get disabled?

     

    If you need any additional assistance, feel free to contact me.

  • 85
    Offline posted in reply to Vasil Pavlov

    Hi Vasil Pavlov,

    Thanks for the Reply.

    Actually I use the sample which was posted in this forum. Below is the link.

    https://jsfiddle.net/hdqw81nt/10/

    In the above sample once enable Virtualization lost the filters and Column word wrap.

    Present we are using the Ignite UI Version "17.2.456".

    I have used the Google Chrome version Version 67.0.3396.99

    IE version IE11.

    Kindly advice.

Reply
  • 485
    Offline posted in reply to Ram p

    Hello Ram p,

     

    Correct me if I am wrong, but I guess by “filtering conditions get disabled” you mean they disappear when you enable virtualization: what actually is happening is the filtering mode gets changed from “simple” to “advanced” – this is the default mode when virtualization is enabled: https://www.igniteui.com/help/api/2018.1/ui.iggridfiltering#options:mode

     

    The mode could be explicitly set to “simple”, which would give you the desired filtering UI:

    {

    name: "Filtering",

    mode: "simple",

    persist: false

    }

     

    I am still not able to reproduce the word-wrap issue on my side, even when using the versions of Ignite UI and Chrome/IE you have provided. I have used the following code sample:

     

     

    <!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.loader.js"></script>
    <script src="https://igniteui.github.io/help-samples/data-files/adventureworks.min.js"></script>
</head>
<body>
    <table id="grid"></table>
    <script>
        $.ig.loader({
			scriptPath: "http://cdn-na.infragistics.com/igniteui/2017.2/latest/js/",
			cssPath: "http://cdn-na.infragistics.com/igniteui/2017.2/latest/css/",
			resources: "igGrid.*",
            ready: function () {
                $("#grid").igGrid({
                    autoGenerateColumns: false,
                    renderCheckboxes: true,
                    width: "100%",
                    height: "500px",
                    virtualization: true,
                    virtualizationMode: "continuous",
                    avgRowHeight: "30px",
                    columns: [
                    { headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%" },
                    { headerText: "Product Name", key: "Name", dataType: "string", width: "40%" },
                    { headerText: "Product Number", key: "ProductNumber", dataType: "string", width: "30%" },
                    { headerText: "Make Flag", key: "MakeFlag", dataType: "bool", width: "15%" }
                    ],
                    features: [
                    {
                    name: "Filtering",
                    mode: "simple",
                    persist: false
                    }
                    ],
                    dataSource: adventureWorks
                });
            }
        })
    </script>
</body>
</html>

     

    Please run the sample on your side and let me know if this behavior persists. You may want to change the igLoader’s scriptPath and the cssPath to point to your local Ignite UI files as I am using the CDN links, but I have tested locally with your version as well.

     

    If you need any additional assistance, feel free to contact me.

Children
No Data