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
igGrid formatter vs filter bar

We have a column on the igGrid defined as follows…
                headerText: "Customer",
                key: "CustomerID",
                dataType: "number",
                formatter: formatCustomerCombo

The formatter function returns the actual customer name referenced by CustomerID, this approach works well until we try to type a customer name  into the column’s filter bar which doesn’t work because  it only accepts numbers (as expected due to the dataType).
So the question is, how can we permit the user to filter rows based on customer name using this approach?

  • 7499

    Hello ClassiFruitSalad,

    Please let us know if you need any further assitance regarding this matter.

  • 23953
    Offline posted


    Filtering functionality is implemented in ig.DataSource and uses the underlying raw data which is stored in the ig.DataSource. Formatter on the other side is a feature of igGrid and is used for data presentation.

    The igGrid uses ig.DataSource instance behind the scenes, but this instance knows nothing about formatter functions. That's why you're observing this problem.

    The best solution in your case is to transform your initial data source into new one that uses customer name column. You can do this either on client or on server.

    If you don't want to go that way I have a second suggestion. You can apply custom filtering function to the ig.DataSource.

    Here is the code:


    Code Snippet
    1. function filterProductName(fieldExpression, data) {
    2.     /*
    3.     Can point to either a string or a function object.
    4.     The parameters that are passed are
    5.     1) the data array to be filtered
    6.     2) the filtering expression definitions.
    7.     Should return an array of the filtered data.
    8.     */
    9. }
    11. $.ig.loader(function () {
    12.     $("#grid1").igGrid({/*initialization*/});
    13.     // bind to custom filtering function
    14.     $("#grid1").data("igGrid").dataSource.settings.filtering.customFunc = filterProductName;
    15. });



    However in this case you have to implement all the filtering logic by yourself which is not an easy job.



    Hope this helps,

    Martin Pavlov

    Infragistics, Inc.

  • 7499

    Dear ClassicFruitSalad,

    Thank you for contacting Infragistics!

    We received your support request concerning igGrid formatter and this case has been assigned to me. Infragistics is dedicated to helping you solve this issue.

    I am looking into this issue and will get back to you by the end of the day Monday with more information or questions for you.