search functionality

[walker1234Participant]

Is there an example where

1) there is an autocomplete feature shown in the search tool bar using jqxwidget

2) example which displays results in the grid based on the search functionality

[Peter StoevKeymaster]

Hi walker1234,

1. We have built in Grid filtering functionality. On our Grid demos page you will find different types of UI Filtering implementations.
2. We have no built-in Grid search functionality, but we have an example which demonstrates how it could be achieved. Look at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/toolbar.htm?light

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[walker1234Participant]

Hi Peter,

I incorporated the demo code you mentioned in my code and I can see the tool bar showing up. But nothing happens when I type any ID or anything else. It seems like the example you have mentioned is tied up with only one column which is “City”.

1) I am wondering if I am missing something to tie the search value with the particular column value?

2) Also, is it possible to search by using multiple column fields. For example, if I want to search by any one of these at a time (Name or ID or Status), can these be included?

3) Any options to show auto suggestion while searching?

Please note, I am not including demo.js in my code.

 
 var dataAdapter = new $.jqx.dataAdapter(self.source, {

            loadComplete: function(data){},
            loadError: function(xhr,status,error) {},
            formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }

        });

 
 
 // Initialize the JQX grid object.
        self.grid = $_(self.gridSelector).jqxGrid({

            altrows: true,
            autoshowloadelement: true,
            showemptyrow: false,
            pageable: true,
            autoheight: true,
            theme: 'classic',
            showtoolbar:true,

            rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search Records: </span>");
                    var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />");
                    toolbar.append(container);
                    container.append(span);
                    container.append(input);
                   /*if (theme != "") {
                        input.addClass('jqx-widget-content-' + theme);
                        input.addClass('jqx-rc-all-' + theme);
                    }*/
                    var oldVal = "";
                    input.on('keydown', function (event) {
                        if (input.val().length >= 2) {
                            if (me.timer) {
                                clearTimeout(me.timer);
                            }
                            if (oldVal != input.val()) {
                                me.timer = setTimeout(function () {
                                    $(self.gridSelector).jqxGrid('updatebounddata');
                                }, 1000);
                                oldVal = input.val();
                            }
                        }
                        else {
                            $(self.gridSelector).jqxGrid('updatebounddata');
                        }
                    });
              },// End of rendertoolbar

            columnsresize: true,
            columns: [
            {
                text: 'Name',
                datafield: 'full_name',
                filterable: false,
                width: 200
            },
            {
                text: 'ID',
                datafield: 'id',
                filterable: false,
                width: 100
            },
          {
              text: 'Status',
              datafield: 'status',
              filterable: false
          },
            ],

            
            selectionmode: 'multiplecells',
            showdefaultloadelement: true,
            sortable: true,
            source: dataAdapter,
            width: 1130
        });

[Peter StoevKeymaster]

Hi walker1234,

As I mentioned, the search functionality is a custom functionality which if you want to use, you will need to build on your own. The demo I sent you uses a third-party data service and we send requests to it and refresh the Grid’s data source when the requested data comes back from the server. The request is based only on what’s typed in the search input field, it is not depending on a column or something else.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts