Refresh Grid through Javascript

This is a migrated thread and some comments may be shown as answers.

3 Answers 381 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

3 Answers, 1 is accepted

answered on 30 Jun 2010, 02:04 PM

We've implemented searching for the grid by using the code below. This code works in some circumstances, but when we apply grouping it fails. It might help you though, and if there's any telerik admins, please tell me how to get my grouping back.

                    var options = {         
                    callback: function () { GetFilteredContacts(); },         
                    wait: 300,         
                    highlight: false,         
                    captureLength: 1         
                }         
                     
                $("#SearchBox").typeWatch(options);         
                     
                function GetFilteredContacts() {         
                    var query = $('#SearchBox').val();         
                    $.post('/EmployeeSettings/Search',         
                            { q: query },         
                            function (data) {         
                                $('#Contacts').data('tGrid').dataBind(data.data);         
                                $('#Contacts').data('tGrid').total = data.data.length;         
                                $('#Contacts').data('tGrid').updatePager();         
                            });         
                }         

Accepted

answered on 30 Jun 2010, 06:30 PM

I've found a solution that incorporates grouping.

Step #1: Fire the ajax call

                    function GetFilteredContacts() {         
                    var query = $('#SearchBox').val();         
                    $.post('/EmployeeSettings/Search',         
                            { q: query },         
                            function (data) {         
                                $('#Contacts').data('tGrid').ajaxRequest();         
                            });         
                }         

2) Set a variable to hold the search results in the controller:

                    [GridAction]         
                    public ActionResult Search(string q)         
                    {         
                        IEnumerable<ExternalContactModel> externalContacts = null;         
                        externalContacts = _session.All<AllStarContact>().SelectMany(x => x.ExternalContacts).Where(x => x.FirstName.Contains(q)).ToExternalContactModels();         
                        Session["searchResults"] = externalContacts;         
                        return new EmptyResult();         
                    }         

3) ajaxRequest() is going to hit whatever is specified in the databinding setting

                    .DataBinding(         
                             dataBinding => dataBinding.Ajax()         
                                 .Select("_ContactList", "EmployeeSettings")         

Therefore just modify this controller action to check the result

                    [GridAction]         
                    public ActionResult _ContactList()         
                    {         
                        var contacts = Session["searchResults"] as List<ExternalContactModel>;         
                        if (contacts == null || contacts.Count == 0)         
                            contacts = GetContacts().SelectMany(x => x.ExternalContacts).ToList();         
                                 
                        return View(new GridModel<ExternalContactModel>         
                                        {         
                                            Data = contacts         
                                        });         
                    }         

I hope this helps someone because I was stumped trying to wrestle the javascript for days.