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
Abdul Latif
590
Grid Height increases on calling igGridFiltering programmatically
posted

When I call the follwing method programmatically

$("#accSelectionGrid").igGridFiltering("filter", ([{ fieldName: "ac_name", expr: accountName, cond: "contains", logic: "OR" }]));

The height of grid which is set to .Height("300px") in my helper syntax gets increased and the grid container oversteps the parent modal div and increases from height 300px although in browser inspector the height of the grid is still set to 300 pixels but the grid exceeds 300px boundary & exceeds the modal container.

When I manually enter a search term in filter textboxes then the grid height readjusts itself & becomes  300px again, but callingit programmatically like this :

.igGridFiltering("filter", ([{ fieldName: "ac_name", expr: accountName, cond: "contains", logic: "OR" }])); results in this strange behavior.

What is solution to this problem?

Thanks in advance.

  • 20255
    Offline posted

    Let me know if I may be of further assistance.

  • 20255
    Suggested Answer
    Offline posted

    Hello allana,

    Thank you for contacting us.

    I have tried to reproduce the issue, although I couldn't. You will find the sample attached to my reply, could you please make the necessary changes in order to invoke it and send it back to me.

    Code snippet:

    1. $(function () {
    2.             $("#grid").igGrid({
    3.                 height: "300px",
    4.                 autoGenerateColumns: false,
    5.                 columns: [
    6.                     { headerText: "Employee ID", key: "EmployeeID", dataType: "number" },
    7.                     { headerText: "First Name", key: "FirstName", dataType: "string" },
    8.                     { headerText: "Last Name", key: "LastName", dataType: "string" },
    9.                     { headerText: "Birth Date", key: "BirthDate", dataType: "date" },
    10.                     { headerText: "City", key: "City", dataType: "string" },
    11.                     { headerText: "Postal Code", key: "PostalCode", dataType: "string" }
    12.                 ],
    13.                 dataSource: northwind,
    14.                 responseDataKey: "results",
    15.                 features: [
    16.                     {
    17.                         name: "Filtering",
    18.                         type: "local",
    19.                         mode: "advanced",
    20.                         filterDialogContainment: "window"
    21.                     }
    22.                 ]
    23.             });
    24.         });

    1. <script>
    2.         function btnClick() {
    3.             $("#grid").igGridFiltering("filter", ([{ fieldName: "FirstName", expr: "ura", cond: "contains", logic: "OR" }]));
    4.         }
    5.     </script>

    Looking forward to hearing from you.

    Filtering-Programmatically.zip