Autocomplete Textbox to filter/search and show results from 2 tables in 2 grids

[Megatron]

Hi, User is searching text which could be commonly found, like city, name col or part#, found in more than one column of each database-table/EF entity/grid.
How can I show all the partial hits/results (min 3 chars typed) from search/filter more that one column in both grids in the same view using Ajax or Data Adaptor.
How can I set the filter min to 3 char typed.
For e.g. user could be searching/typing man could match/hit 3 values, for manual in col1, and Manchester in city col2, and mandated in col5. So, I should return/display 3 rows in grid 1 (and simultaneously also in grid 2)




thanks

[Ragavee U S]

Hi Megatron,

We analyzed your requirement to perform custom search operation in multiple grids present in the same view page using an external autoComplete textbox.

We have created a sample, which can be downloaded from the following location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/121878/ze/Sample637931987

In the above sample, we have rendered two separate grids and an autocomplete textbox in a view page. We have performed the search operation using search method of the Grid, while pressing enter key on the autoComplete text box.

API Reference Link: http://help.syncfusion.com/js/api/ejgrid#methods:search

Please refer to the below code example.

@Html.EJ().Autocomplete("search").Datasource((IEnumerable<object>)ViewBag.autoData).MinCharacter(3)

<script type="text/javascript">

    $(function (e) {

        $('#search').keyup(function (e) {

            if (e.keyCode == 13) {               

                $(this).trigger("enterKey");//trigger function on enter

            }

        });

        $('#search').bind("enterKey", function (e) {

            var searchVal = e.target.value;

            //condition to check if the typed characters is of minlength 3

            if (searchVal.length >= 3) {

                $("#Grid1").ejGrid("search", searchVal);//sends a search request to Grid1

                $("#Grid2").ejGrid("search", searchVal);//sends a search request to Grid2

            }

            else if (searchVal.length == 0) {

                $("#Grid1").ejGrid("clearSearching");//clear searching on Grid

                $("#Grid2").ejGrid("clearSearching");

            }

        });

    }) 

</script>

Regards,
Ragavee U S.

[Megatron]

Hi Raghavee, will this search all cols in the grid or just specific ones, how can I search is the full data and just the current grid view. I want to let the user to pick whether he searches just here or the full table in the db.

thanks

[Megatron]

Hi, thanks for the snippet.

I do not need a sample, just a snippet on how to enable remote adapter for the search in a virtual mode, so that the full db table is searched.

thanks

[Ragavee U S]

Hi Megatron,

Query #1: will this search all cols in the grid or just specific ones

By default, the grid searches the key value based on the columns defined in the Grid but not on full dataSource fields. Thus, the provided solution in our earlier update will search only the fields/columns defined in the Grid.

Query #2: how can I search just the current grid view

We can perform search operation to the current Grid view by enabling search tool bar icon of the corresponding Grid and we have to enable AllowSearching Grid API. Please refer to the below online sample link for more information.

Online Sample Link: http://mvc.syncfusion.com/demos/web/grid/searching

Online documentation Link: http://help.syncfusion.com/js/grid/search

Query #3: how can I search is the full data

For searching the full data upon entering value in autocomplete, we suggest you to add all the field names to the searchSettings.fields parameter of the corresponding Grid. Please refer to the below code snippet.

$('#search').bind("enterKey", function (e) {

            var searchVal = e.target.value;

            //condition to check if the typed characters is of minlength 3

            if (searchVal.length >= 3) {

                var obj = $("#Grid1").ejGrid("instance");//create grid instance

                for (var key in obj.model.currentViewData[0])//traverse through the first JSON array of the dataSource

                    obj.model.searchSettings.fields.push(key);//push the field names to the searchSettings.fields array

                $("#Grid1").ejGrid("search", searchVal);//sends a search request to Grid1

                $("#Grid2").ejGrid("search", searchVal);//sends a search request to Grid2

            }          

        });

Query #4: snippet on how to enable remote adapter for the search in a virtual mode, so that the full db table is searched

Since the grid searches the key value only in the columns defined in the Grid column definition, if we want to search the whole table, then we need to pass all the field names to the server side using model.searchSettings. Please refer to the below code example.

<div style="margin-top:30px">

    @(Html.EJ().Grid<object>("Grid")

            .Datasource(d => d.URL("/Home/DataSource").Adaptor(AdaptorType.UrlAdaptor))           

            .AllowScrolling()

            .ScrollSettings(scroll=>scroll.Width("100%").Height(300).AllowVirtualScrolling())//Virtual Scrolling enabled

            . . . .

            .ClientSideEvents(eve=>eve.ActionBegin("OnBegin"))

    )

</div>

<script type="text/javascript">

    //actionBegin event of the Grid

    function OnBegin(args) {

        if (args.requestType == "searching") {

            for (var key in args.model.currentViewData[0])//traverse through the first JSON array of the dataSource

                args.model.searchSettings.fields.push(key);//push the field names to the searchSettings.fields array

        }

    }

   
</script>

[In Controller]

public ActionResult DataSource(DataManager dm)

        {

            IEnumerable DataSource = OrderRepository.GetAllRecords();

            DataOperations operation = new DataOperations();

            DataResult result = new DataResult();

            result.result = DataSource;

            if (dm.Search != null)//if search query is not null

            {

                result.result = operation.PerformSearching(result.result, dm.Search);//for search operations

            }           

            result.count = result.result.AsQueryable().Count();

            if (dm.Skip > 0)

                result.result = operation.PerformSkip(result.result, dm.Skip);//for skip action

            if (dm.Take > 0)

                result.result = operation.PerformTake(result.result, dm.Take);//for take action

            return Json(result, JsonRequestBehavior.AllowGet);

        }
    }

Regards,
Ragavee U S.