What's New?

[CLOSED] CalendarPanel filters

  1. #1
    May 11, 2012, 10:14 AM

    [CLOSED] CalendarPanel filters

    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
    Last edited by Daniil; May 18, 2012 at 4:54 PM. Reason: [CLOSED]
  2. #2
    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>
  3. #3
    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
  4. #4
    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

Similar Threads

  1. [CLOSED] Loop through filters Gridpanel
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Apr 27, 2012, 11:42 AM
  2. [CLOSED] Ext.Net GridPanel Filters (The filters are not maintained if they are created by code)
    By egdev in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 12, 2012, 3:26 PM
  3. [CLOSED] Grid Filters Dynamic
    By majunior in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 18, 2011, 3:49 PM
  4. [CLOSED] [1.0] TreeGrid Filters - Plugins
    By methode in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 30, 2010, 4:00 AM
  5. Filters for DataView?
    By shaun in forum 1.x Help
    Replies: 10
    Last Post: Jul 24, 2009, 5:05 PM

Tags for this Thread

Posting Permissions