Search functions

[William Morgenweck]

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]

Hi William, 

 

Greetings from Syncfusion support. 

 

Query: The Search page documentation https://ej2.syncfusion.com/vue/documentation/api/grid/#searchsettings-searchsettingsmodel never loads. 

 

We have validated your query and the provided Url link is not a valid one. Find the below link for your reference. 

 

https://ej2.syncfusion.com/vue/documentation/api/grid/searchSettingsModel/ 

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> 

 

... 

 

Sample: https://codesandbox.io/s/valueaccessorsearchllink-u8zfn  

Refer the help documentation. 

 

Link: https://ej2.syncfusion.com/vue/documentation/grid/columns/?no-cache=1#valueaccessor 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[William Morgenweck]

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]

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]

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]

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> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

 

.e-grid .e-rowcell.customcss {                            // css for highlighting the text 

  color: red; 

} 

</style> 

 

We have prepared the simple sample in the following stackblitz link. 

 

Sample: https://codesandbox.io/s/valueaccessorsearchllink-jx3o4 

 

Refer the help documentation. 

 

Link: https://ej2.syncfusion.com/vue/documentation/api/grid#actionbegin 

Link: https://ej2.syncfusion.com/vue/documentation/api/grid#actioncomplete 

Link: https://ej2.syncfusion.com/vue/documentation/api/grid#querycellinfo 

 

Link : https://ej2.syncfusion.com/vue/documentation/grid/cell/?_ga=2.95668954.750722497.1574658271-1925082533.1566191740#customize-cell-styles 

Regards 

Thavasianand S.