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

Ajax Binding and Filtering/Paging by URL

4 Answers 97 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.

Matthew asked on 01 Apr 2010, 02:00 PM

Hey All, I am using Telerik MVC Extensions in my new project :) Its a preetty quick turnaround time, but as my 2nd MVC asp.net project and first with Telerik, I'm so happy to see the Telerik suite leaned down. My organization has purchased a few telerik licenses in the past, but lately we had veered towards just custom js and jquery stuff due to bloat in viewstate. Much was my suprise when I saw <2k page traffics going back and forth between posts with the new controls! Rock on :)

Soo Anyways. I am in a bit of a pickle.

I was originally using server-side binding to parse through a small/medium-sized dataset (~5-10k records). My problem was that when the user was scrolling, because of the postback, he would have to scroll his browser to the bottom of the screen and I know we have alot of users that would complain about that.

No problem, right? I used Ajax binding and am using some controls on the top of the page to perform client-side filtering like so:

    
             var pn = $("#FilterPartNumber").val();  
        
                var desc = $("#FilterDescription").val();  
        
                var project = $("#Projects").val();  
        
                var grid = $("#ItemsGrid").data("tGrid");  
        
                grid.filterBy = "substringof(PartNumber,'" + pn + "')~and~substringof(Description,'" + desc + "')~and~substringof(PartNumber,'" + project + "')";  
        
                grid.pageTo(1);

I have 3 controls for part number, description, and a "project" dropdown. This works great.

My problem however, is that when using URLs or back/forward button, I lose my place within the grid. This is sort of a "pick list" of parts and the user will constantly be going back and forth between the main list and my detail view.

I thought again, no problem right?

    
                var grid = $("#ItemsGrid").data("tGrid");  
        
                var filter = grid.filterBy;  
        
                var page = grid.currentPage;  
        
                var sort = grid.sortBy;  
        
               // this gets my current virtual url path , which already exists on my view  
        
                var URL = $("#URL").val();  
        
                var urlString = URL + "?ItemsGrid-page=" + escape(page) + "&ItemsGrid-filter=" + escape(filter);  
        
                $("#ReturnURL").val(urlString);

I use this to save my return URL to pass to my details page to return to my previous location.

The problem is, with AJAX binding, the '?ItemsGrid-page=' works fine in a URL, but the 'ItemsGrid-filter=' seems to only work on server binding. Does anyone have a suggestion on how I can keep my place in my Ajax bound grid?

Thanks :)

4 Answers, 1 is accepted

Accepted

answered on 01 Apr 2010, 02:30 PM

Works perfectly, thanks! :)

Using this to generate the return URL to the page.

    
                var grid = $("#ItemsGrid").data("tGrid"); 
        
                var filter = grid.filterBy; 
        
                var page = grid.currentPage; 
        
                var URL = $("#OriginalURL").val(); 
        
                var urlString = URL + "?ItemsGrid-page=" + escape(page) + "&ItemsGrid-filter=" + escape(filter); 
        
                $("#CurrentURL").val(urlString);

...Now I just have to figure out how to stuff it into my template column on the grid so that it passes a return url back.