[Solved] Grid on with search form.

[pol verpollen]

Hello,

I don't want to use the filtering of the grid. Instead I want to use 2 textboxes and a search button. I use ASP.NET Ajax mvc to do the get to an action of my controller. The criteria screen + result div looks like this

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<ESyndic.GuiMvc.Models.Building.BuildingSearchModel>" %>
<div id="BuildingSearch_Container">
    <div id="BuildingSearchCriteria">
        <% using (Ajax.BeginForm("SearchBuildingsAction", "Building",
                            new AjaxOptions
                            {
                                HttpMethod = "GET",
                                UpdateTargetId = "BuildingSearchResult"
                            }))
           { %>
        <fieldset>
            <legend>Zoek gebouw</legend>
            <div class="editor-label">
                <%= Html.LabelFor(m => m.BuildingName)%>
                <%= Html.Hidden("buildingId")%>
            </div>
            <div class="editor-field">
                <%=Html.TextBoxFor(m => m.BuildingName)%>
            </div>
            <div class="editor-label">
                <% =Html.LabelFor(m => m.CityName)%>
            </div>
            <div class="editor-field">
                <%=Html.TextBoxFor(m => m.CityName)%>
            </div>
            <div id="BuildingSearch_Button">
                <input id="ButtonSearch" type="submit" value="Zoek" />
            </div>
        </fieldset>
        <%} %>

        <script language="javascript">

            $(document).ready(function() {
                $("input#BuildingName").autocomplete('<%=Url.Action("Find","Building") %>',
            { minChars: 2,
                delay: 300
            });
            });
        </script>

    </div>
    <div id="BuildingSearchResult">

    </div>
</div>

I'm calling the SearchBuildingsAction as this return a partialview which will be rendered.
As you can see I want the partialview be rendered in the BuildingSearchResult div (no postback) when the user click search.

This is the code of the buildingsearchResult view, my result grid with ajax paging and sorting.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ESyndic.DL.Building>>" %>
<div>
    <%= Html.Telerik().Grid(Model)
            .Name("BuildingsGrid")
            .Columns(column =>
                {
                    column.Add(o => o.Name);
                    column.Add(o => o.City.Name);
                })
            .Sortable()
            .Pageable(pager => pager.PageSize(10))
            .Ajax(ajax => ajax.Action("SearchBuildings", "Building")
        )
    %>
    <br />
    <%Html.Telerik().ScriptRegistrar().jQuery(false).Render();%>
</div>

And this is the code of my controller

   public ActionResult SearchBuildingsAction(Models.Building.BuildingSearchModel buildingSearchModel)
        {
            BL.BuildingManager buildingManager = new BL.BuildingManager();
            List<DL.Building> buildings = buildingManager.GetByCriteria(MvcApplication.CustomerId, buildingSearchModel.BuildingName, buildingSearchModel.CityName);
            ViewData["buildings"] = buildings;
            return PartialView("BuildingSearchResult");

        }

        [GridAction]
        public ActionResult SearchBuildings(Models.Building.BuildingSearchModel buildingSearchModel)
        {

            BL.BuildingManager buildingManager = new BL.BuildingManager();
            List<DL.Building> buildings = null;
            buildings = buildingManager.GetByCriteria(MvcApplication.CustomerId, buildingSearchModel.BuildingName, buildingSearchModel.CityName);
            var view = new GridModel<DL.Building> { Data = buildings };
            return View(view);
        }

Now when I click on the search button the grid is shown but the code on the server side not executed. And when I click on the header of the grid the SearchBuildingsAction is executed and not the SearchBuildings from the ajax grid. With the result I got a complete new page without layout and my grid on it.

Now, is this a good way of using MVC and how can I solve this? I also tried other things with HTML.RenderPartial in on the Search view but then I had JSON AllowGet error when refreshing.
Or is there any other best practice to handle these things?

Oh yeah, and after this a user must be able to click a row and another partial view is shown with the details.

Thanks in advance.

Wesley

[Atanas Korchev]

Hello pol verpollen,

There are a few things required when displaying the grid using Ajax forms in mvc. Please take a look at this forum thread which has a sample project attached. It should get you started.

As for row selection - please check this example which shows how to implement row selection.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[pol verpollen]

Hello Atanas,

Thanks for the quick answer.
I will try this at home this evening. I didn't know the Ajax.BeginForm wasn't executing the JS of the partial view.
I think the JS of the partialview is executed if I use the JQuery ajax call (manual js script code).

Regards

[Atanas Korchev]

Hello pol verpollen,

Indeed the jquery ajax methods execute the JavaScript returned from the partial view. You can use them instead of the MVC's built-in Ajax support.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.