0

I am trying to implement a custom search function for jqgrid in which it can search for table cells with have html content. Please refer below example

https://jsfiddle.net/ukyde000/1/

In the fiddle there are two columns which have div elements inside the table cell 'client' and 'notes'. I am using html cells because i like the cells to have styles and some cells are hyperlinks with anchor tags. In this example i have not changed all column cells to have html content but the actual grid i use has all cells in html div tags. I was able to implement a custom sort function by returning the innerText value of the cells. I am now trying to implement similar functionality for search where the search function can check for text content of the cell to match data. 

<td><div><span>text/number/date</span></div></td>
sorttype: funtion(cell) { return $(cell)[0].innerText;}

Edit : Using jqgrid 4.7.0

hitech0101
  • 95
  • 7
  • 1
    The input data, which you use, contains HTML fragments. It's very bad choice. One should better use **pure data** and to use jqGrid formatters, custom formatters, `callattr` and other to create the same HTML fragments *based on the input data*. It allows to implement any searching or sorting behavior which you need. The usage of `$(cell)[0].innerText` will work, but it's dirty way (one can improve the performance by usage `$.jgrid.stripHtml(cell)` instead of `$(cell)[0].innerText`). If you would change the format of input data, then the problem, which you try to solve, will not exist. – Oleg Dec 12 '16 at 17:48
  • 1
    Custom searching not exist in jqGrid 4.7. It's implemented in free jqGrid only (see [the wiki](https://github.com/free-jqgrid/jqGrid/wiki/Custom-filtering-searching-Operation)). Free jqGrid allows you to define `filter` callback inside of `customSortOperations`. The `filter` callback get the searching patters and the data from the cell and you can define yourself *how to compare* the data. – Oleg Dec 12 '16 at 17:51
  • Thank you Oleg for your informative comments. I will try free jqgrid to implement a custom search. Your answers on other jqgrid questions have helped me a lot on developing the grid, some of your answers have been perfect solutions to issues i had. Will try your suggestions and report the outcome. Thanks. – hitech0101 Dec 13 '16 at 15:06
  • 1
    You are welcome! I'm glad that me old answers could help you too. [The answer](http://stackoverflow.com/a/28615923/315935), [this one](http://stackoverflow.com/a/29676941/315935), [this one](http://stackoverflow.com/a/40484119/315935) [this one](http://stackoverflow.com/a/29415927/315935) and some other contains demos, which can help you to use `customSortOperations` in your case. – Oleg Dec 13 '16 at 15:47
  • Thank you Oleg i was able to get the search implemented, i will work on my actual grid with this solution and add enhancements and more options. – hitech0101 Dec 14 '16 at 15:41

1 Answers1

1

Based on Oleg's inputs i was able to create a fiddle with the solution for my problem. This needs improvements for advanced search and also for better performancebut it works for now.

https://jsfiddle.net/OlegKi/ukyde000/11/

customSortOperations: {
     nIn: {
          operand: "nIN",
          text: "equals",
          filter: function (options) {
                    var searchKey = options.searchValue;
                    var searchCol = options.cmName;
                    var searchText = options.item[searchCol];
                    searchText = $.jgrid.stripHtml(searchText);
                    if ( searchKey ===  searchText){
                        return true;
                    }

                }
           } 
        },

Edit : Updated fiddle link & code to reflect Oleg's improvements.

hitech0101
  • 95
  • 7
  • 1
    I like that I could help you. I suggest you only to use `$.jgrid.stripHtml(searchText)` instead of `$(searchText)[0].innerText`, which is much slowly. Moreover you should never fill the grid by calling `addRowData` in the loop, because it's the slowlest way to fill the grid. You should just use `data: mydata` parameter of jqGrid. See https://jsfiddle.net/OlegKi/ukyde000/11/ – Oleg Dec 14 '16 at 16:03
  • Thank you Oleg. I apologize for not including it in my solution as per your previous comments. I have updated the solution to reflect the changes. – hitech0101 Dec 14 '16 at 16:15