PDA

View Full Version : [CLOSED] CalendarPanel filters



marco.morreale
May 11, 2012, 10:14 AM
Hi, I would like applying filters to a CalendarPanel in order to show/hide events depending on a checkmenu item list.

I am displaying appointments of multiple resources and I would like the ability to selectively hide some resource events.

Can you help me?
Thanks in advance
Marco

Daniil
May 11, 2012, 2:04 PM
Hi,

Generally, you can manage it on server side binding to the EventStore only required data.

For client filtering (using the client side Store filter and filterBy methods), please add the following thing for Event Store.

Markup

<CustomConfig>
<ext:ConfigItem Name="queryBy" Value="myQueryBy" Mode="Raw" />
</CustomConfig>

JavaScript

var myQueryBy = function(fn, scope){
var data = this.data;
return data.filterBy(fn, scope||this);
};

Here is the full example.

Example

<%@ Page Language="C#" %>

<%@ 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 runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var myQueryBy = function(fn, scope){
var data = this.data;
return data.filterBy(fn, scope||this);
};

var filter = function (calendar, field, value) {
calendar.eventStore.clearFilter();
calendar.eventStore.filter(field, value);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="North" Height="50">
<Items>
<ext:Button runat="server" Text="Filter 'EventId is 1'">
<Listeners>
<Click Handler="filter(App.CalendarPanel1, 'EventId', 1);" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Filter 'EventId is 2'">
<Listeners>
<Click Handler="filter(App.CalendarPanel1, 'EventId', 2);" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Clear filter'">
<Listeners>
<Click Handler="App.CalendarPanel1.eventStore.clearFilter();" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:CalendarPanel ID="CalendarPanel1" runat="server" Region="Center">
<EventStore runat="server">
<Events>
<ext:EventModel
EventId="1"
Title="My event"
StartDate="2012/5/5"
EndDate="2012/5/6"
CalendarId="1" />

<ext:EventModel
EventId="2"
Title="My event"
StartDate="2012/5/15"
EndDate="2012/5/16"
CalendarId="2" />
</Events>
<CustomConfig>
<ext:ConfigItem Name="queryBy" Value="myQueryBy" Mode="Raw" />
</CustomConfig>
</EventStore>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

Fergus
Aug 05, 2012, 1:12 PM
Hi Daniil,
I have been trying to get your code above to work with an array of Calendar Ids without much success.
I am trying to get multiple calendars to show based upon a treepanel of calendar names.
I have got it working to a certain extent but it is showing entries from previous months in the current month. So it is not filtering correctly.
i have used code as follows -


var myQueryBy = function (fn, scope, record) {
var data = this.data;

var calendarIds = [1,2,3];
return data = this.data.filterBy(function (record) {
return checkedIds.contains(record.data.CalendarId);
})
};

Array.prototype.contains = function (obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
}


This code shows calendars 1 2 and 3 but it also shows all entries from previous months in the first day of the month.

Do you have any idea of how i might achieve this correctly.

Thanks
Fergus

Fergus
Aug 05, 2012, 1:32 PM
Hi Daniil,
I figured this out.
Here is code if interested.



var filterCalendar = function (calendar, field, value) {
var tree = Ext.getCmp('TPCals');
var checkedNodes = tree.getChecked();
var checkedIds = [];
for (var i = 0; i < checkedNodes.length; i++) {
checkedIds.push(parseInt(checkedNodes[i].id));
}
calendar.eventStore.clearFilter();
calendar.eventStore.filterBy(function (record) {
return (checkedIds.contains(record.data.CalendarId));
}, this);
};

var myQueryBy = function (fn, scope) {
var data = this.data;
return data.filterBy(fn, scope || this);
};

//Overrides array
Array.prototype.contains = function (obj) {
var i = this.length;
while (i--) {
if (this[i] === obj) {
return true;
}
}
return false;
}


Thanks anyway
Fergus