Google Instant with AutoComplete and Grid

[Jason Tully]

Do you enjoy Google’s instant search feature?  If so, this is the tutorial for you.  Basically we want to create a widget that will update search results as you type in a text box. Google calls this “Instant”.  We can achieve this same functionality by combining the AutoComplete widget and the Grid widget.

Setup the AutoComplete control.

<li>
  @(Html.Kendo().AutoComplete()
        .Name("BenefitID")
        .Suggest(false)
        .MinLength(2)
        .DataSource(
            ds => ds.Read(
                r => r.Action("BenefitSearch", "Home").Data("setTemplateListFilters")
                    ).ServerFiltering(true)).DataTextField("Description").HtmlAttributes(new { style="width:450px",placeHolder = "Search Existing Benefits"  })
                    .Events(e=>e.DataBound("BenefitDataBound").Open("OnOpen"))

                    )

        </li>

We need to set Suggest = false, otherwise the control will attempt to suggest a value within the search textbox.  The magic happens in our event handlers, “BenefitDataBound” and “OnOpen”.

When the AutoComplete widget is databound, we simply want to extract the JSON data from the datasource and pass it off to a method that will create and bind a Grid.

function BenefitDataBound(e, args) {

       bindGrid(this.dataSource.data());
 }
   function bindGrid(data) {
       $("#gridResults").kendoGrid(

           {
               dataSource: {
                   data: data,
                   group: {
                       field:"Category"
                   }
               },
               change: rowSelection,
               selectable: "single",
               height: 430,
               navigatable: true,
               scrollable: {
                   virtual: false
               },
               columns: [
                   "ID",
                   "Name",
                   "Description"
               ]
           }


      );
   }

Or if you prefer to create everything using the MVC wrappers, you can do the following:

@(Html.Kendo().Grid<Sbc.Domain.ArtifactSummary>().Name("ContentReport")

   .Columns(c =>
   {
       c.Bound(x => x.Name);
       c.Bound(x => x.Category);
       c.Bound(x => x.Type);
       c.Bound(x => x.Version);
       c.Bound(x => x.LocalVersion).Title("Local Version");

   })
   .DataSource(dataSource => dataSource
       .Ajax()
       .PageSize(20)
       .ServerOperation(false)
    )
   .Scrollable(x => x.Height(200))
   .Sortable(sorting => sorting.SortMode(GridSortMode.SingleColumn))
  )

function BenefitDataBound(e, args) {


                var grid = $("#ContentReport").data("kendoGrid");
                grid.dataSource.data(this.dataSource.data());
  }

Lastly we need to prevent the AutoComplete widget from displaying any UI.  This can be handled by the OnOpen event handler.

function OnOpen(e) {

      e.preventDefault();
  }

There you have it.  Enjoy!