Search functionality for all the columns in grid

[mullai.bParticipant]

Hi,

In Below code, search is done based on column city. Can you let me know how can i implement search functionality for all the columns in a grid.
And its possible to do search, which searches the text in 2 grids and highlights the search data in grids.

$(document).ready(function () {
var theme = getDemoTheme();
// prepare the data
var source =
{
datatype: “jsonp”,
datafields: [
{ name: ‘countryName’ },
{ name: ‘name’ },
{ name: ‘population’, type: ‘float’ },
{ name: ‘continentCode’ },
{ name: ‘adminName1’ }
],
async: false,
url: “http://ws.geonames.org/searchJSON”,
data: {
featureClass: “P”,
style: “full”,
maxRows: 20
}
};
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
data.name_startsWith = $(“#searchField”).val();
return data;
}
}
);
$(“#jqxgrid”).jqxGrid(
{
width: 680,
source: dataAdapter,
theme: theme,
columns: [
{ text: ‘City’, datafield: ‘name’, width: 170 },
{ text: ‘Country Name’, datafield: ‘countryName’, width: 200 },
{ text: ‘Population’, datafield: ‘population’, cellsformat: ‘f’, width: 170 },
{ text: ‘Continent Code’, datafield: ‘continentCode’, minwidth: 110 }
],
showtoolbar: true,
autoheight: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“

“);
var span = $(“Search City: “);
var input = $(“”);
toolbar.append(container);
container.append(span);
container.append(input);
if (theme != “”) {
input.addClass(‘jqx-widget-content-‘ + theme);
input.addClass(‘jqx-rc-all-‘ + theme);
}
input.on(‘keydown’, function (event) {
if (input.val().length >= 2) {
if (me.timer) clearTimeout(me.timer);
me.timer = setTimeout(function () {
dataAdapter.dataBind();
}, 300);
}
});
}
});
});

[stephanParticipant]

Hi,

I faced a similar problem: I wanted to apply a global filtering condition to all columns of a grid. I have an input field where the user can input a substring and I want the table to show only those rows where anywhere on the row the substring occurs. In order to do this I have writte this function:

  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');
  }

Maybe it helps you ?
(“cgTableObject” is the jQuery object reference for my table object)

Regards,
Stephan

[mullai.bParticipant]

Hi Stephan,

Thanks for the code.
i tried with above code. But i am getting error message for object required when reaches a line code filtergroup = new $.jqx.filter();

This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.

$(document).ready(function () {
var theme = “base”;

$(‘#inputsearch’).keyup(function (e) {

if (e.keyCode == 13) {
var searchText = $(“#inputsearch”).val();
setGlobalFilter(searchText)
}

if ($(‘#inputsearch’).val() == ”) {
$(“#jqxgrid”).jqxGrid(‘clearfilters’);

}
});

function setGlobalFilter(filtervalue) {

alert(“Your Search Value: ” + filtervalue);
var columns = $(“#jqxgrid”).jqxGrid(‘columns’);
alert(columns.records.length);

var filtergroup, filter;

// 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) {

alert(columns.records[i].datafield);
filtergroup = new $.jqx.filter();
// filtergroup.operator = 'or';
// filter = filtergroup.createfilter('stringfilter', filtervalue, 'contains');
// filtergroup.addfilter(1, filter);
// $("#jqxgrid").jqxGrid('addfilter', columns.records[i].datafield, filtergroup);
}
}
// $("#jqxgrid").jqxGrid('applyfilters');
}

// prepare the data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 200; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
width: "100%",
width: "90%",
source: dataAdapter,
theme: theme,
columnsresize: true,
columns: [
{ text: 'First Name', dataField: 'firstName', dataField: 'firstname', width: '10%' },
{ text: 'Last Name', dataField: 'lastname', width: '20%' },
{ text: 'Product', dataField: 'productname', width: '20%' },
{ text: 'Quantity', dataField: 'quantity', width: '10%', cellsalign: 'right' },
{ text: 'Unit Price', dataField: 'price', width: '20%', cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', dataField: 'total', cellsalign: 'right', width: '20%', cellsformat: 'c2' }
]
});
// alert($("#jqxgrid").jqxGrid('columns').records.length);
});

[mullai.bParticipant]

Hi Stephan,

I eradicated the issue. i forget to include the script file

Its working now its searching the content that exists in column first name, second name, product.

How can search for column quantity, unit price.

Thanks for your code.

[mullai.bParticipant]

Hi Stephan,

The Above search mechanism searches the data in all the possible column and filters the grid with search result.

But, i need Search mechanism to be as,

if i search a data, the grid should group the filtered rows and highlight the corresponding rows and unmatched rows should be seen below the filtered rows.

Can you let me know, how this can be accomplished.

With Regards,
Mullai

[stephanParticipant]

Hi mullai,

>> the grid should group the filtered rows and highlight the corresponding rows
>> and unmatched rows should be seen below the filtered rows

Sorry, but that is something I do no know how to do. After all I am also just a user of jQWidgets Maybe Peter can help you better.

As a SIDENOTEand tip for you (this will not solve your highlighting problem though): I have seen in your code that you do not assign “datafield” names to your columns. Earlier on I had problems with sorting when using source type “array” and this was caused by not having defined “datafield” names. This might also have an effect on filtering.

In this posting here you will find my question and also the solution:
http://www.jqwidgets.com/community/topic/problems-with-data-source-type-array/

In particular look for the last reply from Peter which gives a good code example. I ahve also created a working example that applies correctly the “datafields” property to the “source” object:
http://jsfiddle.net/_stephan_/t7G9Z/1/

Regards,
Stephan

[SravanthiParticipant]

Hi,

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

A value entered in textbox will be searched in a column data and thus highlight the rows which have that value in the column.

Can anyone please help me?

[ivailoParticipant]

Duplicated post : http://www.jqwidgets.com/community/topic/rows-highlightingcolor-change-based-on-a-search-value/

[Surendra Kumar BParticipant]

Grid filtering is not working when the columns have cellsrenderer function.

[Author]

Posts