PDA

View Full Version : [OPEN] [#110] GridFilters Plugin MVC



RCM
Sep 07, 2012, 9:20 PM
Hi,

The filter parameters are not being passed to my controller as expected.


Filter Configuration in markup

<ext:GridFilters runat="server" ID="gridFiltersGridView" AutoDataBind="true">
<Filters>
</Filters>
</ext:GridFilters>


i am adding the filters dynamically.


Controller
public StoreResult GetCustomerList(int limit, int start, string dir, string sort, string filter){

}

The filter value is not being passed back to the controller.

Please let me know if i may be missing anything.

Daniil
Sep 10, 2012, 6:12 AM
Hi,

Does explicitly setting

Local="false"
for the GridFilters help?

The answers on the following questions can help us to narrow the problem.

How is the Store configured? In particular, is it configured with an AjaxProxy?

If no, how do you initiate a load request?

RCM
Sep 10, 2012, 4:43 PM
Hi,

See my store settings below. Setting the Local = "false" does not make a difference.



return Ext.create('Ext.data.JsonStore', {
remoteSort: true,
remoteFilter: true,
buffered: true,
fields: fields,
autoLoad: false,
pageSize: model.Grid.DefaultPageSize,
showWarningOnFailure: true,
proxy: {
type: "ajax",
url: "/ResultsManagement/GridView/GetResultSetPage",
reader: {
root: "data",
type: "json",
totalProperty: 'total'
},

filterParam: "Filter",
groupParam: "Group",
limitParam: "Limit",
pageParam: "PageIndex",
directionParam: "SortDirection",
sortParam: "Sort",
startParam: "Start",
listeners: {
exception: { fn: function (el, response, operation, eOpts) {

alert(response.text);

}
}//end exception
}
},
listeners: {
beforeload: { fn: function (store, operation, eOpts) {



}
}//end exception
}
});


for initial load request i use:


store.loadPage(1);

All other requests as buffered.

Daniil
Sep 10, 2012, 8:48 PM
It seems there is a bug.

If you would remove the beforeload listener, are the things going well?

RCM
Sep 11, 2012, 4:11 AM
Hi,

Everything works well after removing the listener but the filter is still not passed to the controller. Is there anything else that I can try?

Daniil
Sep 11, 2012, 8:56 AM
the filter is still not passed to the controller. Is there anything else that I can try?

Can you use the "filter" parameter in a load request? Is it initial load request or when you apply some filter?

Could you, please, provide a full sample to reproduce?

Daniil
Sep 11, 2012, 11:21 AM
It seems there is a bug.

If you would remove the beforeload listener, are the things going well?

I investigated, there is no bug with BeforeLoad listener.

RCM
Sep 11, 2012, 4:33 PM
Hi,

Please see my sample below.




Controller

public class GridController : Controller
{
//
// GET: /Grid/

public ActionResult Index()
{
return View();
}


public StoreResult GetData(int start, int limit, int page, string filters)
{
StoreResult response = new StoreResult();

List<User> data = new List<User>();

Random randow = new Random();
DateTime now = DateTime.Now;

for (int i = start + 1; i <= start + limit; i++)
{
User user = new User()
{
Firstname = "User " + i,
Lastname = "User Last " + i,
};

data.Add(user);
}

response.Data = data;
response.Total = 3000;

return response;
}

}

public class User
{
public String Firstname { get; set; }

public String Lastname { get; set; }
}




JS

GridView = {

InitializeView: function () {

GridView.ReconfigureGrid();
},


ReconfigureGrid: function () {
var columns = [{ text: 'First Name', dataIndex: 'Firstname' }, { text: 'Last Name', dataIndex: 'Lastname'}];
var fields = [{ name: 'Firstname', type: 'string' }, { name: 'Lastname', type: 'string'}];



var grid = App.gridPanelGridView;

var store = grid.store;
var oldStore = store;

store.removeAll();
store = GridView.CreateStore(fields);

grid.reconfigure(store, columns);

GridView.SetGridFilters(fields, columns);
store.loadPage(1);
oldStore.destroy();
},



CreateStore: function (fields) {

return Ext.create('Ext.data.JsonStore', {
remoteSort: true,
remoteFilter: true,
buffered: true,
fields: fields,
autoLoad: false,
pageSize: 500,
showWarningOnFailure: true,
proxy: {
type: "ajax",
url: "/Grid/GetData",
reader: {
root: "data",
type: "json",
totalProperty: 'total'
},
listeners: {
exception: { fn: function (el, response, operation, eOpts) {

alert(response.text);

}
}//end exception
}
},
listeners: {
}
});
},

SetGridFilters: function (fields, columns) {
App.gridPanelGridView.filters.clearFilters();
for (var i = 0; i < columns.length; i++) {
for (var j = 0; j < fields.length; j++) {
if (columns[i].dataIndex == fields[j].name) {
App.gridPanelGridView.filters.addFilter({ dataIndex: columns[i].dataIndex, type: fields[j].type });
break;
}
}
}
}
}





View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<%-- Override the default label seperator and set to ""--%>
<ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
<script type="text/javascript">
Ext.Component.prototype.labelSeparator = "";
</script>
<script src="/Scripts/GridView.js" type="text/javascript"></script>
<style type="text/css">
.Header
{
font: 12px helvetica,arial,sans-serif;
}
.list-over
{
background-color: white;
}

.my-listview .x-list-body dt
{
white-space: normal;
cursor: arrow;
}
</style>
<script type="text/javascript">
var formatDate = function (v) {
return value.format(Common.GetJSDateFormat());
};
</script>
</head>
<body>
<ext:ResourceManager runat="server">
<Listeners>

</Listeners>
</ext:ResourceManager>
<ext:Viewport ID="viewportResultView" runat="server" Layout="FitLayout" IDMode="Static">
<Items>
<ext:GridPanel ID="gridPanelGridView" runat="server" Region="Center">
<TopBar>
</TopBar>
<SelectionModel>
<ext:RowSelectionModel runat="server" PruneRemoved="false" Mode="Multi" />
</SelectionModel>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" Width="50" Sortable="false" />
</Columns>
<Listeners>
</Listeners>
</ColumnModel>
<Store>
<ext:Store runat="server" Buffered="true" PageSize="5">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="dummy" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Features>
<ext:GridFilters runat="server" ID="gridFiltersGridView" Local="false" MenuFilterText="temp"
AutoDataBind="true">
<Filters>
<ext:BooleanFilter />
</Filters>
</ext:GridFilters>
</Features>
<Listeners>
<CellDblClick Fn="" />
<ContainerContextMenu Fn="" />
<ViewReady Handler="GridView.InitializeView();" />
</Listeners>
</ext:GridPanel>
</Items>
<Listeners>
<Render />
</Listeners>
</ext:Viewport>
</body>
</html>

Daniil
Sep 11, 2012, 4:48 PM
Thank you for the sample.

FiltersFeature doesn't know about reconfiguring.

You should bind a new store manually calling the bindStore method.

filtersFeature.bindStore(newStore);

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ux.grid.FiltersFeature-method-bindStore

RCM
Sep 11, 2012, 5:22 PM
Hi,
Thanks and please mark as closed.

Daniil
Dec 29, 2012, 9:15 AM
I reported it to Sencha.
http://www.sencha.com/forum/showthread.php?242183

They opened a bug ticket.

Created an Issue to track this defect.
https://github.com/extnet/Ext.NET/issues/110