Problem about search method and queryCellInfo event

[Luis Carlos]

Good morning.

I have a request about search method and queryCellInfo event. 

In this sample http://jsplayground.syncfusion.com/2u2nonot I have the queryCelInfo event, which  I change a number into a name. However,  When I search a name, it does not show anything, as you can see in the image below.

Furthermore, If I search a number, it shows the name which it is associate to the number searched, as you can see in the image below.

I would like to search by name, not by number. Is it possible?

I will be awaiting for you reply, thanks in advance.

Regards, Luis Carlos.

[Vignesh Natarajan]

Hi Luis, 

Thanks of using Syncfusion products. 

We have analyzed your query and it is not possible to filter the records whose values are changed using QueryCellInfo event. 

Because in queryCellInfo event values changed will be reflected in the DOM level changes only it will not be changed in DataSource.. But when filtering or searching are done the values will compared with the Grid dataSource. So searching cannot be done values changed using queryCellInfo event. 

Note: We suspect that your requirement can be acheived using foreignKey feature in Grid and you search that column based on the foreignKey value (FirstName) not with foreignKeyField (EmployeeID) value. So, that we suggest you to enable ForeignKeyAdaptor in your sample to search the Grid column values based on the foreignKey value (FirstName).  

 

Refer the help documentation for ForeignKey Adaptor 

Link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#foreign-key-adaptor 

UG: https://help.syncfusion.com/js/grid/columns#foreign-key-column   

Sample: https://js.syncfusion.com/demos/web/#!/bootstrap/grid/columns/foreignkeycolumn  

Regards, 

Vignesh Natarajan. 

[Luis Carlos]

Good morning.

Please, can you change my sample ( http://jsplayground.syncfusion.com/2u2nonot ) in order to know how to do it? 

I will be awaiting for your reply, thanks in advance.

Regards, Luis Carlos.

[Vignesh Natarajan]

Hi Luis, 

Thanks for the update. 

Query: “I would like to search by name, not by number. Is it possible?” 

We have analyzed your query and achieved your requirement using ForeignKey adaptor feature of the grid. we have modified the provided sample. 

Sample can be referred from below link 

Sample: http://jsplayground.syncfusion.com/tig1shcc  

Kindly refer the below code snippet 

<script type="text/javascript"> 

          var Source = [{ EmployeeID: 1, FirstName: "Anna" }, 

          { EmployeeID: 2, FirstName: "John" }, 

          { EmployeeID: 3, FirstName: "Vanessa" }, 

          { EmployeeID: 4, FirstName: "Kent" }, 

          { EmployeeID: 5, FirstName: "Grayson" }, 

          { EmployeeID: 6, FirstName: "Africa" }, 

          { EmployeeID: 7, FirstName: "Carlson" }, 

          { EmployeeID: 8, FirstName: "Barbara" }, 

          { EmployeeID: 9, FirstName: "Kelsey" }] 

          $(function () { 

              $("#Grid").ejGrid({ 

                  // the datasource "window.gridData" is referred from jsondata.min.js 

                  dataSource: window.gridData, 

                  commonWidth: 120, 

                  allowPaging: true, 

                  allowSearching: true, 

                  load: "onLoad", 

                  columns: [ 

                      { field: "EmployeeID_FirstName", width: 75, headerText: "First Name" }, 

                      { field: "ShipCity", headerText: "Ship City" }, 

                      { field: "Verified", headerText: "Verified" } 

                  ], 

 

              }); 

              $("#Searching").ejButton({ 

                  size: "small", 

 

                  click: "onSearching", 

 

              }); 

          }); 

          function onSearching(args) { 

              var gridObj = $("#Grid").ejGrid("instance"); 

              var val = $("#serachval").val(); 

              gridObj.search(val); 

          } 

          var foreignObj = [ 

              { 

                  dataSource: Source, 

                  foreignKeyField: "EmployeeID", //Property in the Grid's main dataSource 

                  field: "EmployeeID", //Property in foreignkey dataSource 

                  foreignKeyValue: "FirstName" //Property in foreignkey dataSource 

              } 

          ]; 

 

 

function onLoad(args) { 

              this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor(foreignObj, "remoteSaveAdaptor"); 

               } 

    </script> 

Refer the below screenshot for the output 

 

Regards, 

Vignesh Natarajan