Search functionality

[walker1234Participant]

Is there an example which can be used to search by column names. For example, if I have 4 columns in a jqxgrid, If there are 10 rows. Let’s say last column has 5 letter A and 5 letter B. If I want to only display rows for letter A using search option, is there a way to do it?

[HristoParticipant]

Hello walker1234,

If you want to show all records (rows) with “A” value then you could use simple filtering by this value.
On the other side if you want to show a particular column (please, write which widget do you want to use) then you could use own logic.
With iteration over all columns to choose particular columns that contain wanted value and show only them.
Could you clarify it?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hi Hristo,

Please find answers to your questions below:

If you want to show all records (rows) with “A” value then you could use simple filtering by this value.

Do you have any widget which does this? Please give me an example or link if something like this is available for React. Thanks

On the other side if you want to show a particular column (please, write which widget do you want to use) then you could use own logic.
Please share some widget examples for this as well. I would like to see some examples and then I think would be in a better position to comment what exactly would work best for me.

Thanks

[HristoParticipant]

Hello walker1234,

On the first point, I would like to ask you to clear the scenario.
For this purpose, please, take a look at this example.
Is this what you want to achieve?

You could use this demo for a base:
https://www.jqwidgets.com/react/react-grid/react-grid-showhidecolumns.htm?light
The listbox is not necessary to exist only the approach that you could use to show and hide particular columns.
This could happen depends on the mentioned from you, case.
You should check the name of each one column is there a wanted value and show or hide it depends on the case.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hi,

I was looking for something like this:

https://www.jqwidgets.com/react/react-grid/index.htm#https://www.jqwidgets.com/react/react-grid/react-grid-filterrow.htm

1) My question is, is it going to work for large records? I mean let’s say if there are 500 records and if the filter criterion gives us 100 records, and we have pageable property set to true with 10 records each page, is it going to show 100 records with 10 different pages?

2) Also, in order for above to work properly, I had to disable OnSort = {this.gridOnSort} property, is there some restriction on this? Where gridOnSort is my custom sorting function.

3) In the type bar, contains is selected by default, what if I want to change it to some other selection?

4) Can I have some text written over there in the search bar saying Please type your search criteria or any text so that as soon as user starts typing it will dissapear and they can go on with their search ?

[HristoParticipant]

Hello walker1234,

It should work no matters with pageable or not.

About the second point could you clarify it?
What is the relation with the onSort option (is this the event)?

If you want to change the default filter condition then you should use the updatefilterconditions property.

On the fourth point how to set in the input your custom text, I would like to suggest you use the createfilterwidget member of the columns property.
More details about this and other things you could find in the classic API Documentation page.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

What is the relation with the onSort option (is this the event)?

It’s referring to a function as described below:

onSort={this.gridOnSort}

And gridOnSort function is defined as follows:

private gridOnSort(event: any): void {
        const sortinformation = event.args.sortinformation;
        let sortdirection = sortinformation.sortdirection.ascending ? 'ascending' : 'descending';
        if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
            sortdirection = 'null';
        }
        this.myGrid.current.updatebounddata('sort')
    };

I tried to search updatefilterconditions and createfilterwidget property in the API documentation page you mentioned (https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=grid)

Could you help me find it?

Thanks

[HristoParticipant]

Hello walker1234,

This is the source code of the onSort event.
Could you provide more details about what is your issue with this?
As I look into your code I saw that you use the updatebounddata method in the onSort event this is not appropriate.
Because sorting functionality invokes this event and there you use method to update the data with the “sort” argument which will go into an infinite loop.

Please, provide us with an example based on it we could continue to work better.
I could share with you an example but I think this is not the desired scenario and then we need to repeat the process.
Please, take a look at this example:

import React, { Component } from "react";
import { render } from "react-dom";
import "jqwidgets-scripts/jqwidgets/styles/jqx.base.css";

import JqxButton from "jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons";
import JqxComboBox from "jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox";
import JqxDropDownList, {
  IDropDownListProps
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist";
import JqxGrid, {
  IGridProps,
  jqx
} from "jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid";
import JqxInput from "jqwidgets-scripts/jqwidgets-react-tsx/jqxinput";
import JqxWindow from "jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow";
export interface IState extends IGridProps {
  dropDownSource: IDropDownListProps["source"];
}

interface AppProps {}
interface AppState {
  name: string;
}

const generatedata = (count: number) => {
  let data = new Array();
  let firstNames =
      [
          'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
      ];
  let lastNames =
      [
          'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
      ];
  let 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'
      ];
  let 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 (let i = 0; i < 200; i++) {
      let row = {};
      let productindex = Math.floor(Math.random() * productNames.length);
      let price = parseFloat(priceValues[productindex]);
      let 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;
  }

  return data;
};

class App extends Component<{}, any> {
  private myGrid = React.createRef<JqxGrid>();
  private myDropDownList = React.createRef<JqxDropDownList>();
  private myInput = React.createRef<JqxInput>();
  private myWindow = React.createRef<JqxWindow>();

  constructor(props: {}) {
    super(props);

    this.firstNameColumnFilter = this.firstNameColumnFilter.bind(this);
    
    const rendertoolbar = (toolbar: any): void => {
      const style: React.CSSProperties = { float: "left", marginLeft: "5px" };
      const buttonsContainer = (
        <div
          style={{ overflow: "hidden", position: "relative", margin: "5px" }}
        >
          <div id={"addButton"} style={style} />
        </div>
      );
      // ReactDOM.render(buttonsContainer, toolbar[0]);
      render(buttonsContainer, toolbar[0]);
    };
    this.state = {
      columns: [
        {
          text: "First Name",
          columntype: "textbox",
          datafield: "firstname",
          filtertype: "list",
          width: 140,
          createfilterwidget: function (column, htmlElement, editor) {
            setTimeout(_ => {
              editor.jqxDropDownList("updateAt", "Choose item", 0 );
            });
          }
        },
        {
          text: "Last Name",
          datafield: "lastname",
          columntype: "textbox",
          width: 120,
          createfilterwidget: function (column, htmlElement, editor) {
            editor[0].setAttribute("placeholder", "Filtering value");
          }
        },
        { text: "Product", datafield: "productname", width: 170 },
        {
          text: "In Stock",
          datafield: "available",
          columntype: "checkbox",
          width: 125
        },
        {
          text: "Quantity",
          datafield: "quantity",
          width: 85,
          cellsalign: "right",
          cellsformat: "n2"
        },
        {
          text: "Price",
          datafield: "price",
          cellsalign: "right",
          cellsformat: "c2"
        }
      ],
      dropDownSource: [
        "First Name",
        "Last Name",
        "Product",
        "Quantity",
        "Price"
      ],
      rendertoolbar,
      source: this.getAdapter()
    };
  }
  public componentDidMount() {
    setTimeout(() => {
      this.createButtons();
    });
  }
  public firstNameColumnFilter = (): void => {
    let filtergroup = new jqx.filter();
    let filter_or_operator = 1;
    let filtervalue = 'Nancy';
    let filtercondition = 'contains';
    let filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    this.myGrid.current!.addfilter('firstname', filtergroup);
    this.myGrid.current!.applyfilters();
  };

  public ready = () => {
    // setTimeout(() => {
    //   this.firstNameColumnFilter();
    // });
  }

  public render() {
    return (
      <div>
        <JqxGrid
          ref={this.myGrid}
          width={750}
          source={this.state.source}
          showtoolbar={true}
          filterable={true}
          showfilterrow={true}
          rendertoolbar={this.state.rendertoolbar}
          columns={this.state.columns}
          ready={this.ready}
        />
      </div>
    );
  }
  private getAdapter = (): any => {
    const source: any = {
      datafields: [
        { name: "firstname", type: "string" },
        { name: "lastname", type: "string" },
        { name: "productname", type: "string" },
        { name: "quantity", type: "number" },
        { name: "price", type: "number" },
        { name: "available", type: "bool" }
      ],
      datatype: "array",
      localdata: generatedata(15),
      updaterow: (rowid: number, rowdata: any, commit: any): void => {
        // synchronize with the server - send update command
        // call commit with parameter true if the synchronization with the server is successful
        // and with parameter false if the synchronization failed.
        commit(true);
      }
    };
    const dataAdapter: any = new jqx.dataAdapter(source);
    return dataAdapter;
  };
  private createButtons(): void {
    const handleClick = (event?: any) => {
      this.myGrid.current!.clearfilters();
    };

    var testableDiv = document.createElement("div");
    testableDiv.innerText = "This is the Text!";

    render(
      <JqxButton onClick={handleClick}
          width={120} height={25} value={'Remove Filter'} imgSrc={'https://www.jqwidgets.com/angular/images/close.png'}
          imgPosition={'center'} textPosition={'center'} textImageRelation={'imageBeforeText'} />,
      document.getElementById("addButton")
    );
  }
}

render(<App />, document.getElementById("root"));

I would like to purpose your attention in the first two columns.
It demonstrates two approaches how to set the placeholder option there.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Hello Hristo,

Thanks. I will look into your solution and will answer your question soon. Before that, I have one more question.

Whatever search is happening in Filtering–>Filter Row section of this demo:

https://www.jqwidgets.com/react/react-grid/index.htm#https://www.jqwidgets.com/react/react-grid/react-grid-filterrow.htm

And whatever search criteria it has like contains,contains(match case), not empty etc, if I want to have a call to webservice when a user selects these options , is it possible to do so? Right now it’s your javascript code which is handling it without any server side calls.

Thanks

[HristoParticipant]

Hello walker1234,

There is no built-in option to catch this change but this is provided with the request to the server.
Please, take a look at this tutorial:
https://www.jqwidgets.com/react-components-documentation/documentation/react-serverside/react-serverside-filtering.htm?search=
I would like to propose your attention to filtercondition variable.
It is relevant to the mentioned from you a search criterion.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts