Search in an Autocomplete box, then popup a Window with the Search results in a Grid

[Simon Kingaby]

I am using ASP MVC 5, Razor syntax, the Telerik HTML Helpers and the latest Kendo UI tools.
I would like to create an AutoComplete search box that pops up a Window with a Grid of the search results in it.
I have code that works for the AutoComplete box:

@(Html.Kendo().AutoComplete()
    .Name("mySearchBox")
    .MinLength(3)
    .DataTextField("Description")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("AutoComplete", "Home")
                .Data("getAutoCompleteValue");
        }).ServerFiltering(true);
    })
)
<script type="text/javascript">
    function getAutoCompleteValue() {
        //alert("frak me");
        return { term: $("#mySearchBox").val() };
    }
</script>

I have a Partial View that displays the search results in a Grid.

@using Experiment6.Web.Models.Home;

@model IQueryable<SearchResult>

<div id="searchResultsList" role="grid" class="panel panel-body" >

    @if (Model.Count() != 0)
    {
        <div><h3>Search Results</h3></div>

            @(Html.Kendo()
                  .Grid<Experiment6.Web.Models.Home.SearchResult>()
                  .Name("Grid")
                  .DataSource(datasource => datasource .Ajax() .Read(read => read .Action("GetSearchResults", "Home") .Data("getAutoCompleteValue")))
                  .Pageable(p => p.ButtonCount(5))
                  .Sortable()
            )
    }
</div>

I cannot figure out how to define the Window and wire it up properly.
Here's what I have for the Window:

@(Html.Kendo().Window()
.Name("searchWindow")
.Title("Search Results")
.Visible(true)
.Actions(x => x.Close())
//Neither of these work:
//.Content(Html.Partial("_SearchResults", Model.SearchResults))
//.LoadContentFrom("ShowSearchResultsAjax", "Home", "getAutoCompleteValue"))
)

Any help you can give me showing how to wire up these three controls (AutoComplete, Grid, Window) would be appreciated.
Thanks,
Simon

[Atanas Korchev]

Hello Simon,

Rendering the partial view hidden should do the trick:

@(Html.Kendo().Window()

.Name("searchWindow")

.Title("Search Results")

.Visible(false)

.Actions(x => x.Close())

.Content(Html.Partial("_SearchResults"))

)

Assuming _SearchResults is the partial view that contains the grid. You need to show the window when the autocomplete value changes.

@(Html.Kendo().AutoComplete()
    .Events(e => e.Change("onChange"))
)

<script>
function onChange(e) {
   var window = $("#searchWindow").data("kendoWindow");
   window.open();
}

</script>

Regards,
Atanas Korchev
Telerik

 

 

[Simon Kingaby]

But Html.Partial("_SearchResults") is invalid because no overload of Html.Partial() takes only 1 parameter.
Thanks

[Atanas Korchev]

Hello Simon,

You are right, you have to pass a model or null as the second parameter of Html.Partial. 

Regards,
Atanas Korchev
Telerik

 

 

[Simon Kingaby]

So, I moved the Autocomplete into the Window.  I have the Autocomplete working.  I have the Grid rendering.
I am trying to create a simple search Window that I can popup from a button in the main toolbar of the application.
You then key into the Autocomplete and when you select something there, it refreshes the Grid to show the relevant records.
I need to round trip (Ajax) to the server to get the Json data for the Grid.  I cannot load all the data into the Grid and use a filtering strategy as I will have serious performance problems.  We need to filter the data set at the server to a manageable amount before we send it down to the client.
I have scoured the internet and cannot find a simple example of this situation.   I am attaching the View and Controller for the Search Window, and a Sample Page that will popup the window when you click a button.
Please review the SearchWindow.cshtml View and let me know how to trigger a server side refresh of the Grid.
Thanks, Simon.

[Simon Kingaby]

Ack!  I found the problem...  My Grid DataSource was looking for a SearchController, but it the Search controller is named SearchWindowController.
Once I changed that, the grid would requery, but not refresh.  So I used the:

$("#searchResultsGrid").data('kendoGrid').dataSource.read();
$("#searchResultsGrid").data('kendoGrid').refresh();

And the Grid now refreshes properly.
Yay!