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
javie cholson
20
Filtering
posted

I have a column with text and a small icon beside the text.

The text is one property in the data object. The URL to the icon is another property in the data object.

Example object:
{
TextProperty: "Some Text",
ImageProperty: "/images/image.jpg"
}

Column definition:
{
headerText: "Header",
key: "TextProperty",
dataType: "string",
template: "<img src = ${ImageProperty}></img> ${TextProperty}"
}

The problem here, is that with TextProperty as the key ImageProperty does not exist. 

If I view source once the column is rendered I see that ImageProperty is set to "(unknown)".  

Likewise, if I use the ImageProperty as the key the TextProperty is not found.

To solve this, I moved both properties in a container object and changed the dataType in the column definition to object.

Example object:
{
ContainerObject: {
TextProperty: "Some Text",
ImageProperty: "/images/image.jpg"
}
}

Column definition:
{
headerText: "Header",
key: "ContainerObject",
dataType: "object",
template: "<img src = ${ContainerObject.ImageProperty}></img> ${ContainerObject.TextProperty}"
}

In this way the entire container object is now bound and data exists for both the image and the text - exactly what I want.

But a new problem arises, which is that filtering no longer works on this column.

In summary:

  • If I use a dataType of string and set the key to a single property, I lose access to the other property.
  • If I use a dataType of string and set the key to an object, binding does not work.
  • If I use a dataType of object and set the key to an object containing both properties, string filtering does not work.

I also tried overriding toString() on ContainerObject to see if filtering was perhaps using toString(), but this did nothing.

How can I create a column definition that uses two properties on the data object, but also allows filtering?

  • 485
    Offline posted

    Hello Javie,

     

    Thank you for posting in our forum.

    I guess you are not binding your column to the dataSource properly. The filtering needs it in order to work correctly. If the “Example object” you use is your dataSource, use the “mapper” function to tell the grid which property to use in order to bind. This would also fix the filtering issue.

    Your code may look like this:

    {

headerText: "Header",

key: "ContainerObject",

dataType: "object",

mapper: function(rec) { return rec.ContainerObject.TextProperty;},

template: "<img src = ${ ImageProperty}></img> ${TextProperty}"

}

    I suggest that you also check this sample, the “Nationality” column is quite similar to the thing you want to do:

     https://www.igniteui.com/templating-engine/nested-templates

    The dataSource used is here:

    http://www.igniteui.com/js-data/actors

    For each different flag the URL gets constructed by the Templating engine, using the “nationality.key” as a name for the image file to load. This approach is applicable to local files also.

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

     

     

    Best Regards,

    Vasil Pavlov

    Associate Software Developer

    Infragistics, Inc.