Refreshing GridPanel Remote Filtering

  1. #1

    Refreshing GridPanel Remote Filtering

    Hi,

    I was using the example code in Remote Filtering use in the MVC Examples (4.1), particularly the GridPanel_Spreadsheet. I wanted to refresh the Grid ListFilter after saving it but couldn't find a solution.

    I am using ViewBag to store the values in the Grid ListFilter. It is working if I return it as View but not in direct method. I'm just starting to learn MVC and pardon me if my question and method may sound dumb.

    I need to refresh the ViewBag after clicking the SAVE button.

    Here are the changes I made in the MVC sample:

    In my Views: ===> Please refer to LINE 41 below

     @(X.GridPanel()
            .ColumnLines(true)
            .Height(400)
            .Width(775)
            .Title("Spreadsheet")
            .Frame(true)
            .Store(X.Store()
                .ID("Store1")
                .Model(X.Model()
                    .IDProperty("year")
                    .Fields("year", "jan", "feb", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec")
                )
                .Reader(X.ArrayReader())
                .DataSource(Model)
                .ServerProxy(
                    X.AjaxProxy().Url(Url.Action("Reload"))
                )
            )
            .SelectionModel(
                X.SpreadsheetSelectionModel()
                    .ID("SpreadsheetSelectionModel1")
                    .ColumnSelect(true)
                    .CheckboxSelect(true)
                    .PruneRemoved(false)
                    .Extensible(SpreadsheetExtensible.Y)
            )
            .ColumnModel(
                X.Column().Text("Year").DataIndex("year").Flex(1).MinWidth(70),
                X.Column().Text("Jan").DataIndex("jan").Width(50),
                X.Column().Text("Feb").DataIndex("feb").Width(50),
                X.Column().Text("Mar").DataIndex("mar").Width(50),
                X.Column().Text("Apr").DataIndex("apr").Width(50),
                X.Column().Text("May").DataIndex("may").Width(50),
                X.Column().Text("Jun").DataIndex("jun").Width(50),
                X.Column().Text("Jul").DataIndex("jul").Width(50),
                X.Column().Text("Aug").DataIndex("aug").Width(50),
                X.Column().Text("Sep").DataIndex("sep").Width(50),
                X.Column().Text("Oct").DataIndex("oct").Width(50),
                X.Column().Text("Nov").DataIndex("nov").Width(50),
                X.Column()
                .Text("Dec").DataIndex("dec").Width(50).Filter(X.ListFilter().Options(@ViewBag.ProductList))
            )
            .ViewConfig(X.GridView().TrackOver(false))
            .Tools(X.Tool()
                .Type(ToolType.Refresh)
                .ToolTip("Reload Data")
                .Handler("App.Store1.reload();")
            )
            .TopBar(
                X.Toolbar()
                    .Items(
                        X.Component().Html("Selectable:"),
    
                        X.Button()
                                .Text("Save")
                                .DirectEvents(de =>
                                {                             
                                    de.Click.Url = Url.Action("SaveChanges");                              
                                }),
    
                        X.ToolbarFill(),
    
                        X.Component().ID("Status")
                    )
                )
            //.Listeners(events => events.SelectionChange.Fn = "onSelectionChange")
            .Plugins(
                X.Clipboard(),
                X.SelectionReplicator(),
                X.GridFilters()
            )
        )
    In my Controller:

    using System.Web;
    using System.Web.Mvc;
    using Ext.Net.MVC.Examples.Areas.GridPanel_Spreadsheet.Models;
    
    namespace Ext.Net.MVC.Examples.Areas.GridPanel_Spreadsheet.Controllers
    {
        public class OverviewController : Controller
        {
            public ActionResult Index()
            {
                //this is working
                ViewBag.ProductList = "1,4,6";            
                return this.View(GridPanel_SpreadsheetOverviewModel.GetData());
            }
    
            public ActionResult Reload()
            {
                return this.Store(GridPanel_SpreadsheetOverviewModel.GetData());
            }
            public ActionResult SaveChanges(StoreDataHandler handler)
            {
                //this is NOT working, I need to refresh the value of the GridFilter after the SAVE button is clicked.
                ViewBag.ProductList = "1,4,6,10";
                return this.Direct();
            }
        }
    }
    Last edited by chickenjoy; Dec 21, 2016 at 12:14 AM.
  2. #2
    Hello @chickenjoy, and welcome to Ext.NET Forums!

    I'm not sure about your scenario in the description and code snippets you provided. Please provide a simplified code sample demonstrating how to reproduce the issue. You mentioned it works if you set it up in a given way so it would be best if you show both the working and the non-working approach so we can provide you with better feedback.

    The code sample you provide should include only the minimum amount of code required to reproduce the issue. Code unrelated to the issue is to be removed. Anyone should be able to copy + paste your sample into a local Visual Studio test project and run without having to make modifications.

    Tips for creating simplified code samples

    If Exceptions or syntax errors are thrown when testing your code sample, we'll let you know so you can revise your original sample. Then we'll review again with the updated sample.

    When posting your code samples in the forums, please paste that sample within [CODE] tags. The [CODE] tags will add formatting and syntax highlighting to your sample.

    The following two forum posts provide many excellent tips for posting in the forums:

    1. More Information Required
    2. Forum Guidelines
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,

    Thanks for your reply. I have edited my post above and the code also. I have used the sample code in the MVC4.1 GridPanel_Spreadsheet.

    Cheers.
  4. #4
    Hello @chickenjoy!

    Your new sample is much better, a link to the sample you based your sample from would be best, I believe you mentioned GridPanel - Spreadsheet - Overview, right? Would just save us the time to look which exact example that would be.

    But you just left a 'save' button doing nothing. Another button or a feedback from the button would be best. I tried a couple here:

    X.Msg.Alert("viewbag", "viewbag product list is " + ViewBag.ProductList);
    I also checked value before and after replacing it in the viewBag making it return two console.log commands... Changed your SaveChanges() method to this:

    public ActionResult c61663_SaveChanges(StoreDataHandler handler)
    {
        X.AddScript("console.log('had a value of [" + ViewBag.ProductList + "]');");
        //this is NOT working, I need to refresh the value of the GridFilter after the SAVE button is clicked.
        ViewBag.ProductList = "1,4,6,10";
        X.AddScript("console.log('got a value of [" + ViewBag.ProductList + "]');");
        return this.Direct();
    }
    What I get in return is:

    had a value of []
    got a value of [1,4,6,10]
    Every time I hit 'save'. So, you expected here to have something in the first returned 'console.log()'? Or maybe I am looking at the wrong place? If so would you make changes to add feedback to the sample showing what is not really happening?

    At first it seems just that the ViewBag is not being persisted between queries. If that's the main issue let us know, I'm pretty confident we can find the answer just by searching the forums though. :)

    Looking forward for your feedback!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi Fabrício,

    Thanks for your reply. Yes, that is the correct example.

    GridPanel_Spreadsheet Overview

    I intentionally removed the save button with nothing just for this sample as I find the piece not relevant with the problem. Basically, I was just saving changes in the cell. After saving, I need to refresh the value of the GridFilter using the ViewBag.

    As for your script above, I noticed also that the ViewBag value changes, what does not change is the GridFilter Value itself.

    In the modified code above, you may refer to the VIEW, line 40 and 41. I added a filter to the last column (Dec):

    X.Column()
    Text("Dec").DataIndex("dec").Width(50).Filter(X.ListFilter().Options(@ViewBag.ProductList))
    In your sample, once the alert is done, try checking the filter in the last column (i.e. Dec). It does not get refreshed with the new ViewBag values.
  6. #6
    Oh! Of course! I think I understand what your problem is.

    During page load you set up the page with the viewbag list of items. Alright, they will get bound to the page as instructed.

    But then just by returning a new viewbag with new contents won't bind it again to the grid. You would need to explicitly reconfigure the filter with the items.

    What is happening is something similar to doing:

    var x = "zeta";
    
    var y = x; // y will get the value of x
    
    x = "alpha";
    
    print(y); // y would have still the old value of x, not "alpha".
    This works like this because the grid is not whole re-written each ajax request. Stuff returning from the ajax request must be instructed if they are to change something client side.

    For instance, these changes would allow you to update the filter:

    Controller:
    public ActionResult c61663_SaveChanges(StoreDataHandler handler)
    {
        X.AddScript("App.fltclm1.filter.updateOptions(" +
            JSON.JavaScriptSerialize("1,4,6,10".Split(',')) +
            ");");
    
        return this.Direct();
    }
    This will send the filter the command to update itself with the new list of values, converted to an array.

    And in the view, these two changes (actually the fltclm1 change is just to make things simpler to get to the column with the filter).

    Add this script tag which addresses an issue with the filter options update setting:

    <script type="text/javascript">
        Ext.define("Ext.grid.filters.filter.List", {
            override: "Ext.grid.filters.filter.List",
            updateOptions: function (options) {
                var me = this,
                    store = this.store;
    
                this.options = options;
                if (this.menu && store) {
                    var data = [],
                        i,
                        len = options.length;
    
                    for (i = 0; i < len; i++) {
                        data.push([options[i], options[i]]);
                    }
    
                    this.store.loadData(data);
                    this.createMenuItems(store);
                }
            }
        })
    </script>
    And give the column an ID so we can access it while returning from the direct call.

    X.Column().ID("fltclm1")
        .Text("Dec").DataIndex("dec").Width(50).Filter(X.ListFilter().Options(@ViewBag.ProductList))
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hi fabricio,

    This works like a charm! thank you for the solution. Because of the current framework I'm in, the only thing I needed to change was:

    this:

    JSON.JavaScriptSerialize
    to this:

    JSON.Serialize
    Many thanks again! Please mark this thread as closed.
    Last edited by chickenjoy; Dec 21, 2016 at 12:15 AM.
  8. #8
    Glad it helped for you! This change you mentioned must be just something available on latest version (which will be available to coming 4.2.0 release, already available to premium users), but thanks on pointing it out the solution that worked for you!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Refreshing the Calendar with Remote Events
    By leonardm in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 04, 2014, 4:08 AM
  2. Replies: 5
    Last Post: Oct 10, 2013, 3:57 PM
  3. Replies: 6
    Last Post: Nov 03, 2012, 10:48 PM
  4. Replies: 5
    Last Post: Jul 23, 2010, 8:52 AM
  5. remote and local filtering
    By marcmvc in forum 1.x Help
    Replies: 0
    Last Post: Oct 13, 2009, 12:38 PM

Posting Permissions