Row(s) highlighting(Color change) based on a search value

[SravanthiParticipant]

Hi,

I am working on search functionality and highlight of rows based on the search in JqxGrid,

A value entered in the textbox should be searched over the column data and thus highlight(change of row color) the entire row(s) which have that value in its column.

Can anyone please help me?

[SravanthiParticipant]

Anyone worked on this issue? Please respond.

I am looking to implement a function that will search for a value in the column and thus select the row in grid( that is change the row color) which has that value in the column data.

Please let me know if you have any other solutions that can make it up for my problem. I tried working on it with this code,

function setGlobalFilter (filtervalue) {
    var columns = cgTableObject.jqxGrid('columns');
    var filtergroup, filter;
    // clear filters and exit if filter expression is empty
    cgTableObject.jqxGrid('clearfilters');
    if (filtervalue == null || filtervalue == '') {
      return;
    }
    // the filtervalue must be aplied to all columns individually,
    // the column filters are combined using "OR" operator
    for ( var i = 0; i < columns.records.length; i++) {
      if (!columns.records[i].hidden && columns.records[i].filterable) {
        filtergroup = new $.jqx.filter();
        filtergroup.operator = 'or';
        filter = filtergroup.createfilter('stringfilter', filtervalue, 'contains');
        filtergroup.addfilter(1, filter);
        cgTableObject.jqxGrid('addfilter', columns.records[i].datafield, filtergroup);
      }
    }
    cgTableObject.jqxGrid('applyfilters');
  }

But this is filtering the data from grid, but I need to just change the color of the rows that are filtered and show the entire grid as same.

Please help me.

Thanks in advance.

[ivailoParticipant]

Hi phoebe,

You can try to change cellclassname of the cells in your filtered rows based in your filter conditions.
In this case you don’t have to use the built-in filtering options.
With this approach when the condition is changed the rows in your grid will not be reduced.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[SravanthiParticipant]

Hi Ivailo,

I see the cellclassname usage,It is applying color when the grid is initialized based on a value comparison, but here my problem is I have a grid and a seperate text box where I enter some text and click on a button, It should search in a column values of the grid, if a row has that value in the particular column, the entire grid should be shown as same, but the background color of the rows which has that value should be changed. i.e, highlight among other rows. The grid should show the rows highlighted only when we search for a value in the grid.

If you didn’t understand my question, please reply back.

Can you post any sample or example to refer what you want me to try in this case.

Please help me.!!

[ChristianBParticipant]

Hi phoebe,
maybe this?

Best regards
Chrisitan

[SravanthiParticipant]

Hi Christian,

Thank you for the reply.

I need the exact same kind of behavior, but instead of coloring the column, I want the entire row of the selected column should be colored to red.

And the search is need to be done only on a single column ex, first name here in sample.

If the search has first name: Peter, then the rows which have first name as Peter should be colored to red.

Will be waiting for your response.

Thanks,
Phoebe.

[ChristianBParticipant]

The Code is modifyed.

Take a look on this part:

var cellclass = function (row, columnfield, value) {
	var rowid = $('#jqxgrid').jqxGrid('getrowid', row);
	var data = $('#jqxgrid').jqxGrid('getrowdatabyid', rowid);
	if (data.firstname == $("#searchText").val()) {
		return 'red';
	}
}

[Author]

Posts