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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Toolbar 'Search' not work

Thread ID:

Created:

Updated:

Platform:

Replies:

149678 Dec 5,2019 07:54 AM UTC Dec 11,2019 11:07 AM UTC React - EJ 2 3
loading
Tags: Grid
Lefebvre
Asked On December 5, 2019 07:54 AM UTC

Hi,

I have a component ...

import React, { ComponentFragment } from "react";
import { Row } from "reactstrap";
import {
  ColumnDirective,
  ColumnsDirective,
  GridComponent,
  Edit,
  Inject,
  Toolbar,
  Page,
  ForeignKey,
  Group
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";

L10n.load(data);

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) {
    super(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;
    this.props.showMessage({
      statusText: error.error.statusText,
      responseText: error.error.responseText,
      type: "danger"
    });
  }

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

  render() {
    return (
      <Fragment>
        <div className="animated fadeIn">
          <div className="card">
            <div className="card-header">
              <i className="icon-list"></i> Trabajadores
            </div>
            <div className="card-body"></div>
            <Row>
              <GridComponent
                dataSource={this.users}
                locale="es-US"
                allowPaging={true}
                pageSettings={this.pageSettings}
                toolbar={this.toolbarOptions}
                editSettings={this.editSettings}
                style={{
                  marginLeft: 30,
                  marginRight: 30,
                  marginTop: -20,
                  marginBottom: 20
                }}
                actionFailure={this.actionFailure}
                actionComplete={this.actionComplete}
                allowGrouping={true}
              >
                <ColumnsDirective>
                  <ColumnDirective
                    field="id"
                    headerText="Id"
                    width="100"
                    isPrimaryKey={true}
                    isIdentity={true}
                  />
                  <ColumnDirective
                    field="name"
                    headerText="Nombre"
                    width="100"
                  />
                  <ColumnDirective
                    field="surname"
                    headerText="Apellidos"
                    width="100"
                  />
                  <ColumnDirective
                    field="professionId"
                    headerText="Profesión"
                    width="100"
                    editType="dropdownedit"
                    foreignKeyValue="name"
                    foreignKeyField="id"
                    dataSource={this.professions}
                  />
                  <ColumnDirective
                    field="age"
                    headerText="Edad"
                    width="100"
                    textAlign="Right"
                  />
                </ColumnsDirective>
                <Inject services={[ForeignKeyGroupPageToolbarEdit]} />
              </GridComponent>
            </Row>
          </div>
        </div>
      </Fragment>
    );
  }
}

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??

Thanks

Pavithra Subramaniyam [Syncfusion]
Replied On 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.
 
Regards, 
Pavithra S. 


Lefebvre
Replied On December 10, 2019 08:36 AM UTC

Ok, thanks .... 

I was missing that control on the server side.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 
 
Regards, 
Thavasianand S.  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon