[CLOSED] Dynamically loading GridFilters causes multiple load events

[cynsystems]

I need to preset the filter values when a page is initially loaded. The problem I am having is I cannot turn off the load request theis generated by setting these filter values.

I am using MVC.Ext.Net with razor.
Initially I was having 3 loads until I added true to grid.filters.clearFilters(true);
Now I only have two.

I have tried turning off remote filter on the store during the setup
var store = Ext.getCmp('store_gridList');

store.remoteFilter = false;
?code to set filters
store.remoteFilter = true;

Still two loads.

I tried tried suspending ane restoring events

grid.suspendEvents();
?code to set filters
grid.resumeEvents();

Still two loads?

The store does not load if I set autoload = false
The store does not load if I add return false to
.Listeners(l => l.BeforeLoad.Handler = @"set_filters();return false;")

so is there a method that allows for setting the initial value of the filter that does not involve triggering the reload of the store???

Thanking you'all in advance.
Any help will be appreciated!
Cyndi Pruett


Here is an outline of the code.
Html.X().GridPanel().ID("gridList")
.Store(Html.X().Store().ID("store_gridList").Liste ners(l => l.BeforeLoad.Handler = @"set_filters();").AutoLoad(true)

var first = true;
function set_filters() {

if (first) { //as to not fire on subsequent changed of filters

var grid = Ext.getCmp('gridList');
grid.suspendEvents();
grid.filters.clearFilters(true);
var filters = grid.getFilterPlugin(); //filters;
setFilter(filters, 'Machine_Prefix', ?,AB,AC,AD,?, ''); //this is a type of list
?more setFilter values?
grid.resumeEvents();

}
first = false;

}

function setFilter(filters, filtername, filtervalue, comparisonvalue) {
var filter = filters.getFilter(filtername);
if (filtervalue != "") {

switch (filter.type) {

case "boolean":
break;

case "numeric":

filter.menu.items.each(function (item) {
if (item instanceof Ext.form.NumberField) {
if (comparisonvalue == "") {
filter.setValue(filtervalue);
filter.setActive(true);
}
else
{
switch (comparisonvalue) {
case 'gt':
filter.setValue({ gt: filtervalue }); //numeric filter
break;
case 'lt':
filter.setValue({ lt: filtervalue }); //numeric filter
break;
case 'eq':
filter.setValue({ eq: filtervalue }); //numeric filter
break;

}
filter.setActive(true);
}

}
});

break;

case "date":

filter.menu.items.each(function (item) {
if (item instanceof Ext.menu.CheckItem) {
var itemText = item.text.toLowerCase();
var picker = filter.getPicker(itemText);
var dateValue = ReturnDate(filtervalue);
var boolSet = false;
if (comparisonvalue.indexOf('gt') > -1 && itemText == "after") {
boolSet = true;
} else if (comparisonvalue.indexOf('lt') > -1 && itemText == "before") {
boolSet = true;
} else if (comparisonvalue.indexOf('eq') > -1 && itemText == "on") {
boolSet = true;
}
if (boolSet) {
picker.setValue(dateValue);
filter.values[itemText] = dateValue;
filter.setActive(true);
item.setChecked(true);
}
}
});

break;

case "list":

filter.menu.items.each(function (item) {
//alert(item.value + " " + filtervalue.indexOf(item.value));
if (filtervalue.indexOf(item.value) > -1) {
item.setChecked(true);
filter.setActive(true);
}
});

break;

case "string":

filter.menu.items.each(function (item) {
filter.setValue(filtervalue);
filter.setActive(true);
});

break;

};

}


}

[Daniil]

Hi @cynsystems,

It might be problematic or just wrong preventing the load event.

Please clarify why do you need to avoid the Load event?

P.S. Please wrap the code in [CODE] tags instead of formatting it manually. Here you can find more details:
Forum Guidelines For Posting New Topics

[cynsystems]

Hi @cynsystems,

It might be problematic or just wrong preventing the load event.

Please clarify why do you need to avoid the Load event?

P.S. Please wrap the code in [CODE] tags instead of formatting it manually. Here you can find more details:
Forum Guidelines For Posting New Topics

Thanks for the speedy response and the tip about [CODE] tags!!!

I only need one load event. I am getting at least two...
If I put a break point in my server side code - I'm hitting the function "ReadData_LoadTestList" twice
I narrowed down what is causing it...
First setting the filters using the listener .Listeners(l => l.BeforeLoad.Handler = @"set_filters()") is causing the proxy to fire
Second the AutoLoad(true) is causing another.

.Listeners(l => l.BeforeLoad.Handler = @"set_filters()")
          .AutoLoad(true)
          .Proxy(Html.X().AjaxProxy().Url(Url.Action("ReadData_LoadTestList"))
                                            .ActionMethods(actions => {actions.Read = HttpMethod.POST;})
                                            .Reader( Html.X().JsonReader().Root("data"))
                     )

If I set AutoLoad(false) - no loading at all (trigger BeforeLoad is never executed)
If I add .Listeners(l => l.BeforeLoad.Handler = @"set_filters();return false;") an infinite loop ensues posting back to the URL

So I either turn disable the loading from the setting of the filters (which I have not been able to do)
Or Remove the "BeforeLoad" trigger, set AutoLoad(false) and try to set the filters with an OnReady.
...I tried that but the system did not recognize the grid.
There possibly one more way - Is there any way to set the filters up server side.
I am using return this.Store(dtoArray, count); as my return for an Action Result...are there any constructors that take filtervalues???...Looking at it...not obvious...
And one more way would be to have a default filter value when setting up the gridfilter item - but I do not think that is an option...
But there is a .SetValueFunc - I have not seen any documentation on how that works...could this be a solution???

Once again thanks for the help (and the quote tags make it look so wonderful!!!!)
Cyndi Pruett

[Daniil]

Do you use remote or local filtering? There is also something more that I am not sure about. For example, why the ReadData_LoadTestList method is being called twice.

If you can provide a runnable test case (copy, paste and run), it would clarify everything and we could investigate in details.

And one more way would be to have a default filter value when setting up the gridfilter item - but I do not think that is an option...

Filters have the Value property. It might work to set up initial filters.

[cynsystems]

Sorry about the delay - finally had enough time to setup an example
I want to store the user's filters in their session state and pre-populate the filters upon returning to a list function
I'm using this example
http://forums.ext.net/showthread.php...thin-a-session

If you put a breakpoint when entering the "ReadData" function -
it gets hit when this listener is added to the store.Listeners(l => l.BeforeLoad.Handler = @"set_filters();")
remove the listener - and it only post back to the server once

Thanks! Cyndi Pruett

@{
    ViewBag.Title = "GridPanel with Remote Filtering, Sorting and Paging - Ext.NET MVC Examples";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}
@section headtag
{
    <script>
     var first = true;
        function set_filters() {
            if (first) {
                var grid = Ext.getCmp('gridList');
                grid.suspendEvents();
                grid.filters.clearFilters(true);
                var filters = grid.getFilterPlugin(); 
                
                setFilter(filters, 'ID',        '@ViewBag.ID', '@ViewBag.ID_Comparison');
                setFilter(filters, 'Company',   '@ViewBag.Company', '');
                setFilter(filters, 'Date',      '@ViewBag.Date', '@ViewBag.Date_Comparison');      
                setFilter(filters, 'Price',     '@ViewBag.Price', '@ViewBag.Price_Comparison');	
                setFilter(filters, 'Size',      '@ViewBag.Size', '');	
                setFilter(filters, 'Visible',   '@ViewBag.Visible', '');	
                

                grid.resumeEvents();
                
            }
            first = false;
        }
     </script>
}
@section example
{
    <h1>GridPanel with Remote Filtering, Sorting and Paging</h1>        
    <p>Please see column header menu for apllying filters</p>

    @(
        Html.X().Panel()
            .Width(700)
            .Resizable(false)            
            .Closable(false)
            .Title("Example")
            .ShrinkWrap(ShrinkWrap.Height)
            .Items(
                Html.X().GridPanel().ID("gridList")
                    .Border(false)
                    .Store(
                        Html.X().Store()
                            .Listeners(l => l.BeforeLoad.Handler = @"set_filters();")
                            .RemoteSort(true)
                            .PageSize(10)                            
                            .Proxy(
                                Html.X().AjaxProxy()
                                    .Url(Url.Action("ReadData"))
                                    .ActionMethods(actions => {
                                        actions.Read = HttpMethod.POST;
                                    })
                                    .Reader(
                                        Html.X().JsonReader().Root("data")
                                    )
                            )
                            .Model(
                                Html.X().Model()
                                    .IDProperty("Id")
                                    .Fields(
                                        Html.X().ModelField().Name("Id").Type(ModelFieldType.Int),
                                        Html.X().ModelField().Name("Company").Type(ModelFieldType.String),
                                        Html.X().ModelField().Name("Price").Type(ModelFieldType.Float),
                                        Html.X().ModelField().Name("Date").Type(ModelFieldType.Date).DateFormat("yyyy-MM-ddTHH:mm:ss"),
                                        Html.X().ModelField().Name("Size").Type(ModelFieldType.String),
                                        Html.X().ModelField().Name("Visible").Type(ModelFieldType.Boolean)
                                    )
                            )
                            .Sorters(
                                Html.X().DataSorter().Property("Company").Direction(Ext.Net.SortDirection.ASC)                                
                            )
                    )
                    .ColumnModel(
                        Html.X().Column().Text("ID").DataIndex("Id"),
                        Html.X().Column().Text("Company").DataIndex("Company"),
                        Html.X().Column().Text("Price").DataIndex("Price").Renderer(RendererFormat.UsMoney),
                        Html.X().DateColumn().Text("Date").DataIndex("Date").Align(Alignment.Center).Format("yyyy-MM-dd"),
                        Html.X().Column().Text("Size").DataIndex("Size"),
                        Html.X().BooleanColumn().Text("Visible").DataIndex("Visible").Align(Alignment.Center).TrueText("Yes").FalseText("No")
                    )
                    .Features(
                        Html.X().GridFilters()
                            .Filters(
                                Html.X().NumericFilter().DataIndex("Id"),
                                Html.X().StringFilter().DataIndex("Company"),
                                Html.X().NumericFilter().DataIndex("Price"),
                                Html.X().DateFilter().DataIndex("Date")
                                    .DatePickerOptions(options => {
                                        options.TodayText = "Now";
                                    }),
                                Html.X().ListFilter().DataIndex("Size").Options("extra small,small,medium,large,extra large"),
                                Html.X().BooleanFilter().DataIndex("Visible")
                            )
                    )
                    .TopBar(
                        Html.X().PagingToolbar()
                    )
            )
    )
}

 public class GridFilters_RemoteController : Controller
    {
        public ActionResult Index()
        {

            ViewBag.ID = "";
            ViewBag.ID_Comparison = "";
            ViewBag.Company = "";
            ViewBag.Date = "";
            ViewBag.Date_Comparison = "";
            ViewBag.Price = "";
            ViewBag.Price_Comparison = "";
            ViewBag.Size = "large";
            ViewBag.Visible = "";

            return View();
        }

        public ActionResult ReadData(StoreRequestParameters parameters)
        {
            List<object> data = GridFiltersModel.Data;

            FilterConditions fc = parameters.GridFilters;

            //-- start filtering ------------------------------------------------------------
            if (fc != null)
            {
                foreach (FilterCondition condition in fc.Conditions)
                {
                    Comparison comparison = condition.Comparison;
                    string field = condition.Field;
                    FilterType type = condition.Type;

                    object value;
                    switch (condition.Type)
                    {
                        case FilterType.Boolean:
                            value = condition.Value<bool>();
                            break;
                        case FilterType.Date:
                            value = condition.Value<DateTime>();
                            break;
                        case FilterType.List:
                            value = condition.List;
                            break;
                        case FilterType.Numeric:
                            if (data.Count > 0 && data[0].GetType().GetProperty(field).PropertyType == typeof(int))
                            {
                                value = condition.Value<int>();
                            }
                            else
                            {
                                value = condition.Value<double>();
                            }

                            break;
                        case FilterType.String:
                            value = condition.Value<string>();
                            break;
                        default:
                            throw new ArgumentOutOfRangeException();
                    }

                    data.RemoveAll(
                        item =>
                        {
                            object oValue = item.GetType().GetProperty(field).GetValue(item, null);
                            IComparable cItem = oValue as IComparable;

                            switch (comparison)
                            {
                                case Comparison.Eq:

                                    switch (type)
                                    {
                                        case FilterType.List:
                                            return !(value as List<string>).Contains(oValue.ToString());
                                        case FilterType.String:
                                            return !oValue.ToString().StartsWith(value.ToString());
                                        default:
                                            return !cItem.Equals(value);
                                    }

                                case Comparison.Gt:
                                    return cItem.CompareTo(value) < 1;
                                case Comparison.Lt:
                                    return cItem.CompareTo(value) > -1;
                                default:
                                    throw new ArgumentOutOfRangeException();
                            }
                        }
                    );
                }
            }
            //-- end filtering ------------------------------------------------------------


            //-- start sorting ------------------------------------------------------------
            if (parameters.Sort.Length > 0)
            {
                DataSorter sorter = parameters.Sort[0];
                data.Sort(delegate(object x, object y)
                {
                    object a;
                    object b;

                    int direction = sorter.Direction == Ext.Net.SortDirection.DESC ? -1 : 1;

                    a = x.GetType().GetProperty(sorter.Property).GetValue(x, null);
                    b = y.GetType().GetProperty(sorter.Property).GetValue(y, null);
                    return CaseInsensitiveComparer.Default.Compare(a, b) * direction;
                });
            }
            //-- end sorting ------------------------------------------------------------


            //-- start paging ------------------------------------------------------------
            int limit = parameters.Limit;

            if ((parameters.Start + parameters.Limit) > data.Count)
            {
                limit = data.Count - parameters.Start;
            }

            List<object> rangeData = (parameters.Start < 0 || limit < 0) ? data : data.GetRange(parameters.Start, limit);
            //-- end paging ------------------------------------------------------------

            return this.Store(rangeData, data.Count);
        }
    }
    public class GridFiltersModel
    {
        public static List<object> Data
        {
            get
            {
                List<object> goods = new List<object>
                                {
                                    new
                                        {
                                            Id = 1,
                                            Price = 71.72,
                                            Company = "3m Co",
                                            Date = new DateTime(2007, 9, 1),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 2,
                                            Price = 29.01,
                                            Company = "Aloca Inc",
                                            Date = new DateTime(2007, 08, 01),
                                            Size = "medium",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 3,
                                            Price = 83.81,
                                            Company = "Altria Group Inc",
                                            Date = new DateTime(2007, 08, 03),
                                            Size = "large",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 4,
                                            Price = 52.55,
                                            Company = "American Express Company",
                                            Date = new DateTime(2008, 01, 04),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 5,
                                            Price = 64.13,
                                            Company = "American International Group Inc.",
                                            Date = new DateTime(2008, 03, 04),
                                            Size = "small",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 6,
                                            Price = 31.61,
                                            Company = "AT&T Inc.",
                                            Date = new DateTime(2008, 02, 01),
                                            Size = "extra large",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 7,
                                            Price = 75.43,
                                            Company = "Boeing Co.",
                                            Date = new DateTime(2008, 01, 01),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 8,
                                            Price = 67.27,
                                            Company = "Caterpillar Inc.",
                                            Date = new DateTime(2007, 12, 03),
                                            Size = "medium",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 9,
                                            Price = 49.37,
                                            Company = "Citigroup, Inc.",
                                            Date = new DateTime(2007, 11, 24),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 10,
                                            Price = 40.48,
                                            Company = "E.I. du Pont de Nemours and Company",
                                            Date = new DateTime(2007, 05, 09),
                                            Size = "extra large",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 11,
                                            Price = 68.1,
                                            Company = "Exxon Mobile Corp",
                                            Date = new DateTime(2007, 12, 12),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 12,
                                            Price = 34.14,
                                            Company = "General Electric Company",
                                            Date = new DateTime(2008, 06, 16),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 13,
                                            Price = 30.27,
                                            Company = "General Motors Corporation",
                                            Date = new DateTime(2006, 12, 07),
                                            Size = "medium",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 14,
                                            Price = 36.53,
                                            Company = "Hewlett-Packard Co.",
                                            Date = new DateTime(2007, 05, 13),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 15,
                                            Price = 38.77,
                                            Company = "Honweywell Intl Inc",
                                            Date = new DateTime(2006, 11, 07),
                                            Size = "medium",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 16,
                                            Price = 19.88,
                                            Company = "Intel Corporation",
                                            Date = new DateTime(2007, 01, 09),
                                            Size = "small",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 17,
                                            Price = 81.41,
                                            Company = "International Business Machines",
                                            Date = new DateTime(2005, 01, 21),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 18,
                                            Price = 64.72,
                                            Company = "Johnson & Johnson",
                                            Date = new DateTime(2008, 01, 10),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 19,
                                            Price = 45.73,
                                            Company = "JP Morgan & Chase & Co",
                                            Date = new DateTime(2008, 02, 20),
                                            Size = "large",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 20,
                                            Price = 36.76,
                                            Company = "McDonald's Corporation",
                                            Date = new DateTime(2007, 06, 12),
                                            Size = "large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 21,
                                            Price = 27.96,
                                            Company = "Pfizer Inc",
                                            Date = new DateTime(2007, 12, 30),
                                            Size = "small",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 22,
                                            Price = 45.07,
                                            Company = "The Coca-Cola Company",
                                            Date = new DateTime(2007, 01, 30),
                                            Size = "medium",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 23,
                                            Price = 34.64,
                                            Company = "The Home Depot, Inc",
                                            Date = new DateTime(2006, 12, 31),
                                            Size = "small",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 24,
                                            Price = 61.91,
                                            Company = "The Procter & Gamble Company",
                                            Date = new DateTime(2007, 04, 08),
                                            Size = "extra large",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 25,
                                            Price = 63.26,
                                            Company = "United Technologies Corporation",
                                            Date = new DateTime(2006, 06, 04),
                                            Size = "medium",
                                            Visible = true
                                        },
                                    new
                                        {
                                            Id = 26,
                                            Price = 35.57,
                                            Company = "Verizon Communications",
                                            Date = new DateTime(2005, 07, 09),
                                            Size = "small",
                                            Visible = false
                                        },
                                    new
                                        {
                                            Id = 27,
                                            Price = 45.45,
                                            Company = "Wal-Mart Stores, Inc",
                                            Date = new DateTime(2006, 09, 09),
                                            Size = "large",
                                            Visible = true
                                        }
                                };

                return goods;
            }
        }
    }

[Daniil]

Thank you for the test case, but it throws a JavaScript error.

setFilter is not defined

Please provide the setFilter function.

[cynsystems]

sorry - it was part of my _baseLayout.cshtml

function setFilter(filters, filtername, filtervalue, comparisonvalue) {
            
                        
            var filter = filters.getFilter(filtername);
            if (filtervalue != "") {
                 switch (filter.type) {
                    case "boolean":
                        break;
                    case "numeric":
                       
                        filter.menu.items.each(function (item) {
                            if (item instanceof Ext.form.NumberField) {
                                if (comparisonvalue == "") {
                                    filter.setValue(filtervalue);
                                    filter.setActive(true);
                                }
                                else
                                {
                                    switch (comparisonvalue) {
                                        case 'gt':
                                            filter.setValue({ gt: filtervalue }); //numeric filter
                                            break;
                                        case 'lt':
                                            filter.setValue({ lt: filtervalue }); //numeric filter
                                            break;
                                        case 'eq':
                                            filter.setValue({ eq: filtervalue }); //numeric filter
                                            break;

                                    }
                                    filter.setActive(true);
                            }

                            }
                        });
                        break;
                    case "date":
                        filter.menu.items.each(function (item) {
                            if (item instanceof Ext.menu.CheckItem) {
                                var itemText = item.text.toLowerCase();
                                var picker = filter.getPicker(itemText);
                                var dateValue = ReturnDate(filtervalue);
                                var boolSet = false;
                                if (comparisonvalue.indexOf('gt') > -1 && itemText == "after") {
                                    boolSet = true;
                                } else if (comparisonvalue.indexOf('lt') > -1 && itemText == "before") {
                                    boolSet = true;
                                } else if (comparisonvalue.indexOf('eq') > -1 && itemText == "on") {
                                    boolSet = true;
                                }
                                if (boolSet) {
                                    picker.setValue(dateValue);
                                    filter.values[itemText] = dateValue;
                                    filter.setActive(true);
                                    item.setChecked(true);
                                }
                            }
                        });
                        break;
                    case "list":
                        filter.menu.items.each(function (item) {
                            if (filtervalue.indexOf(item.value) > -1) {
                                item.setChecked(true);
                                filter.setActive(true);
                            }
                        });
                        break;
                    
                    case "string":
                        filter.menu.items.each(function (item) {
                            filter.setValue(filtervalue);
                            filter.setActive(true);
                        });
                        break;
                };
               
            }
           

        }

[Daniil]

Thank you.

Please:

1. Remove the BeforeLoad listener.

2. Set .AutoLoad(false) for the Store.

3. Set this for the GridPanel.

.Listeners(events => events.ViewReady.Handler = "set_filters();")

4. Call this after setting up the filters.

grid.getStore().load();

There is also an alternative approach - setting up values for the Filters in this way:

Html.X().NumericFilter().DataIndex("Id").GreaterThanValue(@ViewBag.Id),
Html.X().StringFilter().DataIndex("Company").Value(@ViewBag.Company),
...