How do I search 'Toolbar Search' for fields using column templates in 'Grid Components'?

How do I search 'Toolbar Search' for fields using column templates in 'Grid Components'?


For example, in the code below,,

How to search for search terms in 'b' field as 'PROGRESS'

-----------------------------------------------------------------------------------------------------------------

const template = (props) => {

    if(props.b === 0) return <span>ACCEPTED</span>

    if(props.b === 1) return <span>PROGRESS</span>

    if(props.b === 2) return <span>CHECKING</span>

    if(props.b === 3) return <span>CANCEL</span>

    if(props.b === 4) return <span>CONFIRM</span>

}


return(

 <GridComponent

       ref={gridBannerList}

       dataSource={dataBanerList}

       toolbarClick={(args: any) => { util.toolbarClick(args, gridBannerList, "배너 관리") }}

 >

    <ColumnsDirective>

        <ColumnDirective field='a' headerText='종류'/>

        <ColumnDirective field='b' headerText='종류' headerText={template} />

        <ColumnDirective field='c' headerText='종류' />

   </ColumnsDirective>

   <Inject services={[Toolbar}]/>

 </GridComponent>

)




1 Reply 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team July 25, 2023 09:04 AM UTC

Hi hamin jeon,


The Grid’s search functionality works on the basis of comparing the searched key value with the underlying data source values. So, if you are searching for the values from the data source, it will return the records. But the Grid will not perform a search on the custom template elements since it may contain any values like HTML elements, plain string, image, any other components, etc. This is the default behavior of the Grid’s current architecture and so it is not feasible to achieve your requirement.


Regards,

Pavithra S


Marked as answer
Loader.
Up arrow icon