How to search a Telerik MVC Grid based on ASP.NET MVC 2.0's ListBox's selected Values?

Question

I have a Telerik MVC Grid where there is a column Names , Gender , Age . I am going to use a ListBox which is bound to Gender ( coming from SQL 2k8 Table" Person". I am using Entity Framework, POCO classes , Repository Pattern ). Then there is a Image button as " Search " .

When a user selects few values from ListBox and then hits the " Search" Button Telerik MVC Grid which is on the same page ( I am rendering a User control which has actual Telerik MVC Grid) should be populated .

how to do this ? how to pass the selected ListBox values back to controller Action " SearchPerson" . There is a way of doing this using JQuery . But i dont know how to do this . Please help me

EDIT : Code

       <% using (Ajax.BeginForm("SearchVouDate", "ERA", new AjaxOptions { UpdateTargetId = "ProfileList", LoadingElementId = "LoadingImage", OnSuccess = "ShowMessage" }))
       { %>

    <div  class="SelectNPI" >
        <div class="DivSelectNPI">
            <input name="selection1" value="NPI" id="rdNPI" type="radio"  onclick="toggleLayer(this.checked);"  />
            <%:Html.Label(Resources.Strings.SelectNPI) %>
            <div id="ERANPI" style="display: none;"  >
               <%:Html.ListBoxFor(m => m.Eras.NPI, new MultiSelectList(Model.GetERAs, "NPI", "NPI", Model.NPIListBox), new { ID="NPIList", style = "width: 160px; height:50px" })%>
           </div>
        </div>
        <div class="SelectPIN">
            <input name="selection1" type="radio" id="rdPIN" value="PIN" onclick="toggleLayer1(this.checked);"  />
            <%:Html.Label(Resources.Strings.SelectPIN) %>
            <div id="ERAPIN" style="display: none;" >
               <%:Html.ListBoxFor(m => m.Eras.PIN, new MultiSelectList(Model.GetERAs, "PIN", "PIN", Model.PINListBox), new {ID="PINList", style = "width: 180px; height:50px" })%>
           </div>
        </div>
    </div>

            <input type="submit" class="btnSearchSubmit" id="PaySearchDateSubmit" name="PaySearchDateSubmit" value="Search" />
        </div>

    </div>
     <%} %>
     <br /><br />

     <div class="ERATopDiv" > <label id="Label1" class="lblSearchResult">  Search By Check Number</label> </div>
    <br />


    <div class="ERATopDiv"><label id="Label3" class="lblSearchResult" >Search Result</label> </div>
    <div id="ProfileList">
        <%Html.RenderPartial("SearchVoucherNum"); %>
    </div>
    <div id="results">
    </div>

</div>
<div id="EraPopupWindow">

</div>

My Controller :

           [HttpPost]
         public ActionResult SearchVouDate(ERAViewModel era, FormCollection formValues)
         {
        try
        {

           if (formValues["Eras.NPI"] != null)
            {
              era.NPIListBox = formValues["Eras.NPI"].Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                string[] selectedNPI = era.NPIListBox;
                ERAViewModel ervm = new ERAViewModel();
                foreach (string NPI in selectedNPI)
                {                        
                    ervm = this.WorkerService.SearchByNPI(formValues);
                    return PartialView("SearchVoucherNum", ervm);
                }


            }
            else
            {
                ERAViewModel eras = this.WorkerService.SearchByPIN(era.Eras.PIN);
                return PartialView("SearchVoucherNum", eras);
            }
        }
        catch (Exception ex)
        {
            bool reThrow = ExceptionPolicyWrapper.HandleException(ex, ExceptionPolicies.MVCPolicy);
            if (reThrow)
                throw;
        }
        return null;
    }

My PartialView which I am rendering on my main View ( Main View contains my ListBox and partialView contains my telerik MVC Grid )

     <% Html.Telerik().Grid(Model.GetERAs)
       .Name("ERA").TableHtmlAttributes(new { style = "height:20px" })
       .Scrollable(scroll => scroll.Enabled(true))
       .DataKeys(datakeys => datakeys.Add(m => m.EraId))
       .Columns(columns =>
           {
               columns.Bound(m => m.NPI).Title(Resources.Strings.NPI).Width(150)
                   .HtmlAttributes(new { style = "text-align:center" })
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" });
               columns.Bound(m => m.PIN).Title(Resources.Strings.PIN).Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.GroupName).Title(Resources.Strings.GroupName).Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.CheckNo).Title(Resources.Strings.CheckNo).Width(100)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.VoucherNo).Title(Resources.Strings.VoucherNo).Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.VoucherDate).Title(Resources.Strings.VoucherDate).Format("{0:dd/MM/yyyy}").Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.PaymentDate).Title(Resources.Strings.PaymentDate).Format("{0:dd/MM/yyyy}").Width(150)
                   .HeaderHtmlAttributes(new { style = "color:black; margin:0 0 0 0; padding-left:15px; background-color:#BDBDBD; text-align:center; border-right:grey" })
                   .HtmlAttributes(new { style = "text-align:center" });
               columns.Bound(m => m.NonHippaVoucherPath).Title(Resources.Strings.NonHippaVoucherPath).Width(150).Format(Ajax.ActionLink("View Non Hippa voucher", "GetPdffile", "ERA", new { Id = "{0}" }, new AjaxOptions() { UpdateTargetId = "EraPopupWindow", HttpMethod = "Get" }, new { Style = "color:#FF0070;" }).ToString().Replace("{", "{{").Replace("}", "}}")).Encoded(false);
               columns.Bound(m => m.HippaVoucherPath).Title(Resources.Strings.HippaVoucherPath).Width(150).Format(Ajax.ActionLink("View Hippa voucher", "GetPdffile", "ERA", new { Id = "{0}" }, new AjaxOptions() { UpdateTargetId = "EraPopupWindow", HttpMethod = "Get" }, new { Style = "color:#FF0070;" }).ToString().Replace("{", "{{").Replace("}", "}}")).Encoded(false);  
               //columns.Bound(m => m.Non_hippa_voucher_path).HtmlAttributes("color:#8A2BE2").Format(Html.ActionLink("View Non Hippa voucher", "GetPdffile", "ERA", new { ID = "{0}" }, new { onclick = "return someFunction();", Style = "color:#8A2BE2" }).ToHtmlString()).Encoded(false).Title("").Width(150);
               //columns.Bound(m => m.Hippa_voucher_path).HtmlAttributes("color:#8A2BE2").Format(Html.ActionLink("View Hippa voucher", "GetFile/", new { ID = "{0}", Style = "color:#8A2BE2" }, "ERA/").ToHtmlString()).Encoded(false).Title("").Width(150);


           })

         //  .ClientEvents(clientEvents => clientEvents.OnDataBinding("dataBinding"))
           .DataBinding(databinding => databinding.Ajax().Select("AjaxERA", "ERA"))
           .EnableCustomBinding(true)
           .Pageable(paging =>{paging.Enabled(true) ;paging.PageSize(5) ;})
            .Sortable()
             .Filterable()
             .Footer(true)
            .Render();

%>

Answer 1

The best way to do this is to use jQuery.

You need your listBox and to bind your grid in AJAX.

Here's some sample code I have in an application :

View

<div class="content-box-filter">
        <label>Filter:</label>
        <%= Html.DropDownList("Years", Model.Years) %>
    </div>
    <div class="content-box">
        <div class="content-box-header">
            <h3>News</h3></div>
        <div class="content-box-content">
            <%= Html.Telerik().Grid<News>()
                    .Name("Grid")
                    .Columns(colums =>
                     {
                         colums.Bound(c => c.Title).Title("Titre").ClientTemplate("<a href=\"" + Url.Action(MVC.News.Modifier()) + "/<#=IdValue#>\" ><#=Title#></a>");
                         colums.Bound(c => c.Title).Title("Inscriptions").ClientTemplate("<a href=\"" + Url.Action(MVC.News.Inscriptions()) + "/<#=IdValue#>\" >fichier excel</a>");
                         colums.Bound(c => c.Published).Title("Publiée").HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).ClientTemplate("<img src=\"../Content/images/icons/<#=Published#>.png\" alt=\"<#=Published#>\" />");
                         colums.Bound(c => c.CreationDate).Title("Date").HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).Format("{0:MM/dd/yyyy}");
                         colums.Bound(c => c.IdValue).Title(" ").HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).ClientTemplate("<a href=\"" + Url.Action(MVC.News.Modifier()) + "/<#=IdValue#>\" title=\"Modifier\" ><img src=\"../Content/images/icons/pencil.png\" alt=\"Modifier\" /></a>");
                         colums.Bound(c => c.IdValue).Title(" ").HeaderHtmlAttributes(new { @class = "center-text" }).HtmlAttributes(new { @class = "center-text" }).Format("<a id=\"deleteLink{0}\" href=\"#\" title=\"Supprimer\" onclick=\"if(confirm('Voulez-vous vraiment supprimer cette nouvelle?')){ return deleteNews('{0}');} else { return false;};\"><img src=\"../Content/images/icons/cross.png\" alt=\"Supprimer\" /></a>");
                     })
                    .DataBinding(d => d.Ajax().Select("ListAjax", "News", new { year = DateTime.Now.Year }))
                    .Sortable()
            %>
            <%= Html.AntiForgeryToken() %>
        </div>
    </div>
    <script type="text/javascript">
        var token = $('[name=__RequestVerificationToken]').val();
        $(document).ready(function() {
            $('#Years').val(<%=DateTime.Now.Year%>);
            $('#Years').change(function() {
                var grid = $('#Grid').data('tGrid');
                grid.rebind({ year: this.value });
            });
        });
        function deleteNews(newsId) {
            $.post('DeleteNews', { __RequestVerificationToken: token, id: newsId }, function(data) {
                if (data == 'true') {
                    $('#deleteLink' + newsId).parent().parent().remove();
                } 
                return false;
            });
            return false;
        };
    </script>

The NewsController action :

[GridAction]
        public virtual ActionResult ListAjax(int year)
        {
            var gridModel = new GridModel<News>();
            gridModel.Data = _newsRepo.GetByYear(year);
            return View(gridModel);
        }

Let me know if you still have question.