We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Toolbar 'Search' not work


I have a component ...

import React, { ComponentFragment } from "react";
import { Row } from "reactstrap";
import {
from "@syncfusion/ej2-react-grids";
import { DataManagerWebApiAdaptor } from "@syncfusion/ej2-data";
import { configUSERSPROFESSIONS } from "../../constants";
import { L10n } from "@syncfusion/ej2-base";
import data from "../../locales/locale.json";
import { connect } from "react-redux";
import ACTION_APPLICATION from "../../actions/applicationAction";
import { TOKEN_KEY } from "../../services";


class Employees extends Component {
  users = new DataManager({
    adaptor: new WebApiAdaptor(),
    url: `${config.URL_API}/${USERS}`,
    headers: [{ Authorization: 'Bearer ' + localStorage.getItem(TOKEN_KEY) }]

  professions = new DataManager({
    adaptor: new WebApiAdaptor(),
    url: `${config.URL_API}/${PROFESSIONS}`,
    headers: [{ Authorization: 'Bearer ' + localStorage.getItem(TOKEN_KEY) }]

  constructor(props) {

    this.state = {
      users: null,
      professions: null

    this.toolbarOptions = ["Add""Edit""Delete""Update""Cancel""Search"];
    this.editSettings = {
      showDeleteConfirmDialog: true,
      allowEditing: true,
      allowAdding: true,
      allowDeleting: true,
      newRowPosition: "Top"
    this.pageSettings = { pageCount: 5 };
    this.actionFailure = this.actionFailure.bind(this);
    this.actionComplete = this.actionComplete.bind(this);

  actionFailure(args) {
    const error = Array.isArray(args.error) ? args.error[0] : args.error;
      statusText: error.error.statusText,
      responseText: error.error.responseText,
      type: "danger"

  actionComplete(args) {
    if (args.requestType === "save") {
        statusText: "200",
        responseText: "Operación realizada con éxito",
        type: "success"
    if (args.requestType === "delete") {
        statusText: "200",
        responseText: "Operación realizada con éxito",
        type: "success"

  render() {
    return (
        <div className="animated fadeIn">
          <div className="card">
            <div className="card-header">
              <i className="icon-list"></i> Trabajadores
            <div className="card-body"></div>
                  marginLeft: 30,
                  marginRight: 30,
                  marginTop: -20,
                  marginBottom: 20
                <Inject services={[ForeignKeyGroupPageToolbarEdit]} />

Employees.propTypes = {};

const mapStateToProps = state => {
  return {
    errorApplication: state.applicationReducer.error

const mapDispatchToProps = dispatch => ({
  showMessage: message => dispatch(ACTION_APPLICATION.showMessage(message))

export default connect(mapStateToPropsmapDispatchToProps)(Employees);

Why 'Search' does not work??


3 Replies

PS Pavithra Subramaniyam Syncfusion Team December 6, 2019 06:39 AM UTC

Hi Lefebvre, 
Thanks for contacting Syncfusion support. 
We have tried to reproduce the issue at our end but ithe searching is working fine. Please refer to the below sample for more information. 
And for WebApi data, the actions like filtering , paging, searching should be handled on server side and return the processed data to the Grid. So please ensure the below details that will be helpful for us to provide a better solution as early as possible. 
  1. Ensure the searched result is returned from the server properly.
  2. Share the stack trace if any script error.
  3. Share the screenshot/video of the issue.
Pavithra S. 

MJ Maria Jose Sesarino December 10, 2019 08:36 AM UTC

Ok, thanks .... 

I was missing that control on the server side.

TS Thavasianand Sankaranarayanan Syncfusion Team December 11, 2019 11:07 AM UTC

Hi Lefebvre, 
Thanks for your update. 
We are happy that the problem has been resolved at your end. 
Thavasianand S.  

Live Chat Icon For mobile
Up arrow icon