CODEWITHSUNDEEP
angularjsag-grid
undefined
undefined

Reputation: 3632

ag-grid column search not working with object as cell value

I am using cell_renderer to define my cell, something like this:

        var cell_renderer = function(params) {
            var element = "";
            var values = params.value;
                angular.forEach(values, function(each_param){
                    element += '<a href="#/workunit/' + each_param.id + '" target="_blank">' + each_param.id +
                            '<span class="text-danger text-bold">'+
                            '<span class="" title="' + inactive_message +
                            '">' + inactive_flag + ' </span>' +
                            '<span class="" title="' + misconfigured_message +
                            '"> ' +misconfigured_flag + '</span>'+
                            '</span></a><br>';
                })
            return element;
        };

My column definnition is this:

                var testObject = {};
                testObject.headerName = "my header";
                testObject.field = each_branch;
                testObject.width = 200;
                testObject.cellClassRules = cell_class_rules;
                testObject.cellRenderer = cell_renderer;
                columnDefs.push(testObject);

Here testObject.field = each_branch , is a json object.

Hence the inbuild search functionality not working in ag-grid. Can anyone please help me here.

Upvotes: 8

Views: 9716

Answers (4)

stilltrackin
stilltrackin

Reputation: 111

When using a column that is an Object, you have at least 2 options:

  1. Specify a valueGetter function on the column. If you do this, the table will no longer contain the object, but rather the value returned by the valueGetter.

    valueGetter: this.getDateValueGetter("dateCol")

    private getDateValueGetter(col: string): Function { return function (p: ValueGetterParams) { if (!p.data) { return null; } return this.ui.convertStringToDate(p.data[col], "YYYY-MM-DD"); } }

  2. If you want your table to contain the object, specify both a keyCreator function and a valueFormatter function on the column. If you do this, the column, filters, and grouping will work as expected.

    { keyCreator: (param) => {return param.value}, valueFormatter: (param) => {return param.value} }

Upvotes: 0

Roland
Roland

Reputation: 27819

The solution is to provide valueGetter in filter params.

Say for example you have { name: 'Some Name', id: 1 }. In that case you want to filter by the name. So:

{
  filter: 'agTextColumnFilter',
  filterParams: {
    valueGetter: params => {
      return params.data.name
    }
  }
}

Upvotes: 8

Ciprian Rarau
Ciprian Rarau

Reputation: 3120

By default the textFormatter from Ag-grid is returning a string representation, if you include textFormatter and return the same object in the textCustomComparator you'll have the object from the valueGetter:

   filter: "agTextColumnFilter",
filterParams: {
    textCustomComparator: function  (filter, value, filterText) {
        //value is the object from valueGetter
    },
    textFormatter: function(r) { 
        //this is the solution
        return r; 
    }, 
    valueGetter: function getter(params) {
        return {
            ...
        };
    }
}

Upvotes: 8

Alexander Zbinden
Alexander Zbinden

Reputation: 2566

Try setting the text filter-properties on your column:

testObject.filter:'text',
testObject.filterParams:{
...
}

and then implement the textCustomComparator function in the filterParams object:

https://www.ag-grid.com/javascript-grid-filter-text/#gsc.tab=0

Upvotes: 0

Related Questions