1. Home
  2. Forum
  3. React - EJ 2
  4. FILTER ONE COLUMN VALUE FROM PREVIOUS ONE

FILTER ONE COLUMN VALUE FROM PREVIOUS ONE

Hi, 

I have a Grid with 2 columns "Utente" and "Disponibilità"

<ColumnDirective field='anaUserId' foreignKeyValue='name' foreignKeyField='id' dataSource={userData} visible={isAdmin} headerText='Utente' width='150' validationRules={this.validationRules}/>
<ColumnDirective field='availabilityId' foreignKeyValue='name' foreignKeyField='id' dataSource={availabilityData}  headerText='Disponibilità' width='150' validationRules={this.validationRules}/>

I want to filter "Disponibilità" rows after user selects the value from "utente"
Example: User selects "Monica Galbusera" (id = 1) I want that He can see only "Monica Galbusera" values and not all ones.

My availabilityData dataSorce contain anaUserId so i can filter it
I want understand if it's possible to capture the selected value of column "Utente" and so I can filter (it's simple by js code) the second DataSource

Thanks Alex




5 Replies 1 reply marked as answer
TS Thiyagu Subramani Syncfusion Team January 29, 2021 09:01 AM UTC

Hi Alex,  
  
Thanks for contacting Syncfusion forum. 

Query: FILTER ONE COLUMN VALUE FROM PREVIOUS ONE. 

Based on your shared information we suspect that you want to filter one column value from previous column . To achieve this requirement we suggest to use cascading dropdown with foreignkey columns. We have prepared sample in that we have defined two foreignkey columns ( CustomerID and Country ) and also used the editTemplate feature to achieve cascading dropdown 

For your convenience we have attached the sample so please refer them for your reference. 

Code Example: 
 
Index.js 

. . . . . . .  . . 
    this.country = [ 
      { ContactName: "Paul Henriot", CustomerID: "VINET", id: "1" }, 
      { ContactName: "Karin Josephs", CustomerID: "TOMSP", id: "2" }, 
      { ContactName: "Mario Pontes", CustomerID: "HANAR", id: "3" }, 
      { ContactName: "Mary Saveley", CustomerID: "VICTE", id: "4" }, 
      { ContactName: "Pascale Cartrain", CustomerID: "SUPRD", id: "5" }, 
      { ContactName: "Yang Wang", CustomerID: "CHOPS", id: "6" } 
    ]; 
    this.stateColl = [ 
      { 
        CompanyName: "Alfreds Futterkiste", 
        CustomerID: "VINET", 
        countryId: "1", 
        stateId: "101", 
        Country: "Germany" 
      }, 
      { 
        CompanyName: "Ana Trujillo Emparedados y helados", 
        CustomerID: "TOMSP", 
        stateId: "102", 
        Country: "Mexico" 
      }, 
      { 
        CompanyName: "Antonio Moreno", 
        CustomerID: "VINET", 
        stateId: "103", 
        Country: "Mexico" 
      }, 
      { 
        CompanyName: "Around the Horn", 
        CustomerID: "HANAR", 
        stateId: "104", 
        Country: "UK" 
      }, 
      { 
        CompanyName: "Berglunds snabbköp", 
        CustomerID: "SUPRD", 
        stateId: "105", 
        Country: "Sweden" 
      }, 
      { 
        CompanyName: "Blauer See Delikatessen", 
        CustomerID: "CHOPS", 
        stateId: "106", 
        Country: "Germany" 
      }, 
      { 
        CompanyName: "Blondesddsl père et fils", 
        CustomerID: "SUPRD", 
        stateId: "105", 
        Country: "France" 
      }, 
      { 
        CompanyName: "Bólido Comidas preparadas", 
        CustomerID: "HANAR", 
        stateId: "106", 
        Country: "Spain" 
      }, 
      { 
        CompanyName: "Blauer See Delikatessen", 
        CustomerID: "VICTE", 
        stateId: "106", 
        Country: "Germany" 
      } 
    ]; 
    this.countryParams = { 
      create: () => { 
        this.countryElem = document.createElement("input"); 
        return this.countryElem; 
      }, 
      destroy: () => { 
        this.countryObj.destroy(); 
      }, 
      read: () => { 
        return this.countryObj.value; 
      }, 
      write: () => { 
        this.countryObj = new DropDownList({ 
          change: () => { 
            this.stateObj.enabled = true; 
            const tempQuery = new Query().where( 
              "CustomerID", 
              "equal", 
              this.countryObj.value 
            ); 
            this.stateObj.query = tempQuery;   // in the change event of the first dropdown generate query for second dropdown.  
            this.stateObj.text = ""; 
            this.stateObj.dataBind(); 
          }, 
          dataSource: new DataManager(this.country), 
          fields: { value: "CustomerID", text: "ContactName" }, 
          floatLabelType: "Never", 
          placeholder: "Select a country" 
        }); 
        this.countryObj.appendTo(this.countryElem); 
      } 
    }; 
    this.stateParams = { 
      create: () => { 
        this.stateElem = document.createElement("input"); 
        return this.stateElem; 
      }, 
      destroy: () => { 
        this.stateObj.destroy(); 
      }, 
      read: () => { 
        return this.stateObj.value; 
      }, 
      write: () => { 
        this.stateObj = new DropDownList({ 
          dataSource: new DataManager(this.stateColl), 
          enabled: false, 
          fields: { value: "Country", text: "CompanyName" }, 
          floatLabelType: "Never", 
          placeholder: "Select a state" 
        }); 
        this.stateObj.appendTo(this.stateElem); 
      } 
    }; 
  } 
  render() { 
    return ( 
      <div className="control-pane"> 
        <div className="control-section"> 
          <GridComponent 
            dataSource={orderDetails.slice(0, 8)} 
            allowPaging={true} 
            ref={grid => (this.gridInstance = grid)} 
            allowFiltering={true} 
            allowSorting={true} 
            editSettings={{ 
              allowEditing: true, 
              allowDeleting: true, 
              allowAdding: true 
            }} 
            filterSettings={{ type: "Menu" }} 
            toolbar={this.toolbarOptions} 
          > 
            <ColumnsDirective> 
              <ColumnDirective 
                field="OrderID" 
                headerText="Order ID" 
                width="120" 
                textAlign="Right" 
                validationRules={this.validationRules} 
                isPrimaryKey={true} 
              /> 
              <ColumnDirective 
                field="CustomerID" 
                headerText="Customer Name" 
                width="150" 
                validationRules={this.validationRules} 
                foreignKeyValue="ContactName" 
                foreignKeyField="CustomerID" 
                dataSource={customerData} 
                edit={this.countryParams} 
              /> 

              <ColumnDirective 
                field="Country" 
                headerText="Company Name" 
                foreignKeyValue="CompanyName" 
                foreignKeyField="Country" 
                dataSource={customerData} 
                edit={this.stateParams} 
                width="170" 
              /> 
              <ColumnDirective 
                field="Freight" 
                headerText="Freight" 
                width="100" 
                format="C2" 
                textAlign="Right" 
                editType="numericedit" 
              /> 
              <ColumnDirective 
                field="ShipCountry" 
                headerText="Ship Country" 
                width="150" 
                editType="dropdownedit" 
              /> 
            </ColumnsDirective> 
            <Inject 
              services={[Filter, Page, Edit, Sort, ForeignKey, Toolbar]} 
            /> 
          </GridComponent> 
        </div> 
      </div> 
    ); 
  } 
} 



Please get back to us if you need further assistance. 

Regards, 
Thiyagu S. 


Marked as answer
AL Alex January 29, 2021 01:29 PM UTC

Thanks for your help
I will try your solution and I will give to you a feedback

Alex

TS Thiyagu Subramani Syncfusion Team February 1, 2021 05:59 AM UTC

Hi Alex, 

Thanks for the update. 

We will wait to hear from you. 

Regards, 
Thiyagu S 


AL Alex February 1, 2021 11:36 AM UTC

Hi Thiyagu S,

your example works for me only for "ADD" operation. 
If I try to edit existing value the dropdownlists are white.
I will try to modify your code to show saved value when operation is EDIT
Alex

TS Thiyagu Subramani Syncfusion Team February 2, 2021 11:39 AM UTC

Hi Alex, 

Thanks for your update. 

Yeah, sure if you are facing any difficulties please get back to us. 

Regards, 
Thiyagu S 


Loader.
Up arrow icon