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

6 posts, 0 answers
  1. Simon Kingaby
    Simon Kingaby avatar
    24 posts
    Member since:
    Apr 2008

    Posted 27 Feb 2015 Link to this post

    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
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 03 Mar 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Simon Kingaby
    Simon Kingaby avatar
    24 posts
    Member since:
    Apr 2008

    Posted 03 Mar 2015 in reply to Atanas Korchev Link to this post

    But Html.Partial("_SearchResults") is invalid because no overload of Html.Partial() takes only 1 parameter.
    Thanks
  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 05 Mar 2015 Link to this post

    Hello Simon,

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

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Simon Kingaby
    Simon Kingaby avatar
    24 posts
    Member since:
    Apr 2008

    Posted 13 Mar 2015 in reply to Atanas Korchev Link to this post

    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.


  7. Simon Kingaby
    Simon Kingaby avatar
    24 posts
    Member since:
    Apr 2008

    Posted 16 Mar 2015 in reply to Simon Kingaby Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready