1. Home
  2. Forum
  3. Vue
  4. Search functions

Search functions

The Search page documentation 
https://ej2.syncfusion.com/vue/documentation/api/grid/#searchsettings-searchsettingsmodel
never loads.  I would like to know if it is possible to search a field that has been put together using :valueAccessor="pubInformation"



 res += authors.replace(
        currentAuthor,
        "<font color='Red'>" + currentAuthor + "</font>"
      );


 return (
        res +
        ". <b><a rel='nofollow' href='https://www.ncbi.nlm.nih.gov/pubmed/" +
        pmid +
        "' target='_blank'>" +
        data["data"]["title"] +
        "</a></b> <i> " +
        data["data"]["source"] +
        "</i><b> " +
        pmc +
        "</b> <br />" +
        impactFactor +
        citationCount +
        cancerWordsCount +
        "<br /> <b>" +
        notice +
        "</b> "
      );

I would like to search for an Authors name

Talbert EE, Cuitiño MC, Ladner KJ, Rajasekerea PV, Siebert M, Shakya R, Leone GW, Ostrowski MC, Paleo B, Weisleder N, Reiser PJ, Webb A, Timmers CD, Eiferman DS, Evans DC, Dillhoff ME, Schmidt CR, Guttridge DC. Modeling Human Cancer-induced Cachexia. Cell Rep PMC6733019 
Impact Factor: NA Citation Count: NA Cancer Words Count: NA


5 Replies
TS Thavasianand Sankaranarayanan Syncfusion Team November 18, 2019 10:38 AM UTC

Hi William, 
 
Greetings from Syncfusion support. 
 
 
We have validated your query and the provided Url link is not a valid one. Find the below link for your reference. 
 

Query: I would like to know if it is possible to search a field that has been put together using :valueAccessor="pubInformation" 
 
We have validated your query and by default, while using valueAccessor in column then the value is used for display purpose only. We have performed all the grid actions based on the field value not valueAccessor value. If you want to search the particular value provided in the valueAccessor, then provide the particular field in grid and set visible property of the particular field as false. (For your case, you want to search using Authers Name. So you can provide the Authors Name field in grid and set visible property as false.) 
 
[code snippets] 
 
<template> 
    <div id="app"> 
        <div id="test"> 
            <ejs-grid ref="grid" :dataSource="data" ...> 
               <e-columns> 
                    <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column> 
                    <e-column field="CustomerID" headerText="Customer ID" :visible="false" width="100"></e-column>   //set visible as false 
                    <e-column field="ShipCountry" :valueAccessor="valueAccess" headerText="Customer name(SC)" width="100"></e-column> 
                </e-columns> 
            </ejs-grid> 
        </div> 
    </div> 
</template> 
<script> 
    ... 
 
    export default { 
        data() { 
            ... 
       }, 
        methods: { 
            valueAccess(field, data, column) { 
                return ( 
                    ". <b><a rel='nofollow' rel='nofollow' href='https://www.ncbi.nlm.nih.gov/pubmed/" + 
                    "' target='_blank'>" + 
                    data["CustomerID"] + 
                    "</a></b> <i> " + 
                    data["ShipCountry"] + 
                    "</i><b> " 
                ); 
            } 
        }, 
        ... 
   }; 
</script> 
 
... 
 

Refer the help documentation. 
 
 
Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


WM William Morgenweck November 19, 2019 01:09 PM UTC

Thanks- I've restructured the data so it will be in a hidden column and the search works fine.  Thank you.  Is there a way to "Highlight" the text that was searched in the grid
?  Similar to a find in a browser?  or a background color of yellow?

TS Thavasianand Sankaranarayanan Syncfusion Team November 27, 2019 01:23 PM UTC

Hi William, 

We can highlight the complete words in Grid cell but if we go for searching with incomplete words then it becomes more complex to implement. Also, if we want to highlight the incomplete words in Grid cells while searching then we need to render the Grid columns with template and once we start to search it calls the queryCellInfo, which triggers for every cell rendering in Grid at initially and also for the searching case. In this event we need to add those highlighting HTML elements (Using mark tag for highlight the words) with the Grid cell. If we use template for all columns with more number of data then it takes more time to render and when we do searching case also t takes more time to re-render the cell with the highlighting HTML elements.   

Regards, 
Thavasianand S. 


WM William Morgenweck November 27, 2019 01:29 PM UTC

Totally understand.  I'm not looking for the characters to be highlighted while typing but after the person hits enter or clicks the icon and the results are displayed.  Is that possible?

TS Thavasianand Sankaranarayanan Syncfusion Team November 28, 2019 12:43 PM UTC

Hi William, 
 
We have analyzed your query that highlighting the searched characters. Here we have used the actionBegin, actionComplete, queryCellInfo events to achieve the requirement. A customized css class also used in the style area for highlighting. In the actionBegin event we grab the character enter into the search box and in the queryCellInfo event we refer the custom css class into the searched character’s Grid cell.  
 
Please refer to the below code snippet and sample for more reference. 
 
App.vue 
 
      <ejs-grid 
        ref="grid" 
        :dataSource="data" 
        :actionBegin="actionBegin" 
        :queryCellInfo="queryCellInfo" 
        :actionComplete="actionComplete" 
        :enableHover='false'  
        :toolbar="toolbar" 
        allowPaging="true" 
      > 
      </ejs-grid> 
 
  methods: { 
    actionBegin: function(args) { 
      if (args.requestType === "searching") { 
        if (args.searchString === "") { 
          this.flag = false;                                  // prevents the text highlighting when empty string searched 
        } else { 
          this.flag = true; 
          word = args.searchString; 
          word.toLowerCase();                         // this is used for abnormal casing in the text 
        } 
      } 
    }, 
    actionComplete: function(args) { 
      if (args.requestType === "searching") {       // remove the highlight when searching finished 
        this.flag = false; 
      } 
    }, 
    queryCellInfo: function(args) { 
      if (this.flag === true) { 
        var cellContent = args.data[args.column.field];  
        cellContent = cellContent.toString().toLowerCase(); 
        if (cellContent.indexOf(word) >= 0) {              //  search the character with each cell elements 
          args.cell.classList.add("customcss");             // add the css to the cell elements 
        } 
      } 
   }; 
</script> 
 
<style> 
 
.e-grid .e-rowcell.customcss {                            // css for highlighting the text 
  color: red; 
} 
</style> 
 

We have prepared the simple sample in the following stackblitz link. 
 
 
Refer the help documentation. 
 


 

Regards 
Thavasianand S. 


Loader.
Up arrow icon