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

Search functions

Thread ID:

Created:

Updated:

Platform:

Replies:

149146 Nov 15,2019 04:11 PM UTC Nov 28,2019 12:43 PM UTC Vue 5
loading
Tags: Data Grid
William Morgenweck
Asked On November 15, 2019 04:11 PM UTC

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


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


William Morgenweck
Replied On 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?

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


William Morgenweck
Replied On 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?

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


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