Grid Column filter using dateTime picker

Hi,

I have the requirement here

Filter the grid column using date filter from datetime to end date like 03/03/2020 8:00 AM to 03/03/2020 11:AM .

Currently I see only Dates are filtering properly is there any way to filter date along with time.

Today only I see expiry of my premium membership any how we will update by end of the month.

Thank you in advance.
Vamsi.

Hello Vamsi!

You can customize the FilterHeader plugin as much as you need, for local filters. For remote filters, you always implement the filter from server side. You can start here and look at its neighboring examples: GridPanel > FilterHeader > Overview

Please contact us via hello@ext.net for inquiries regarding your licensing and premium subscription.

Hope this helps!

Thank you for prompt reply..but here as per client requirement we need Gridfilters instead of headfilters. can you please suggest how we can achieve this sir, is there any way we can achieve using stringfilter(like click on string filter(textfieldd) and popsup calender.


How we can set width for string filters(textfield) currently some fixed width is there..
One more question set the default value in string filter but it should filter automatically when user changes then only it needs to filter.. In my case when I use to set default value it's automatically filtering.. Pleae let me know how to avoid automatic filtering.

Thank you,
Vamsi.

Hi Vamsi. Can you provide a sample demonstrating as much of the scenario as possible? Once we see that sample and if there are specific issues or defects, we might be able to offer some suggestions.

Another option would be posting your project requirements in the Jobs forums and hiring an Ext.NET professional from the community to provide some assistance.

Hi , Here is code and my requirement is there any option to set width automatically based on text size and filtering automatically if set the default value to string filter but it should filter only when user enters manually.

Is there any way to popup calender from Textfield (string filter ) and I have attached screenshots with color hightlight.

Code:

---

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
  public static List<object> Data
    {here
        get
        {
            List<object> goods = new List<object>
            {
                new
                {
                    Id = 1,
                    Price = 71.72,
                    Company = "3m Co",
                    Date = new DateTime(2020,03,01,11,45,45),
                    Size = "large",
                    Visible = true
                },
                new
                {
                    Id = 2,
                    Price = 29.01,
                    Company = "Aloca Inc",
                    Date = new DateTime(2020,03,01,11,45,45),
                    Size = "medium",
                    Visible = false
                },
                new
                {
                    Id = 3,
                    Price = 83.81,
                    Company = "Altria Group Inc",
                    Date = new DateTime(2020,03,01,09,45,20),
                    Size = "large",
                    Visible = false
                },
                new
                {
                    Id = 4,
                    Price = 52.55,
                    Company = "American Express Company",
                    Date = new DateTime(2020,03,10,11,45,45),
                    Size = "extra large",
                    Visible = true
                },
                new
                {
                    Id = 5,
                    Price = 64.13,
                    Company = "American International Group Inc.",
                    Date = new DateTime(2020,02,01,11,45,45),
                    Size = "small",
                    Visible = true
                },
                new
                {
                    Id = 6,
                    Price = 31.61,
                    Company = "AT&T Inc.",
                  Date = new DateTime(2020,01,15,11,45,45),
                    Size = "extra large",
                    Visible = false
                },
             
             
                           
            };

            return goods;
        }
    }

 
    protected void Store1_RefreshData(object sender, StoreReadDataEventArgs e)
    {
        List<object> data = Data;

        string s = e.Parameters["filter"];

        //-- start filtering ------------------------------------------------------------
        if (!string.IsNullOrEmpty(s))
        {
            FilterConditions fc = new FilterConditions(s);

            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.Number:
                        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:
                            case Comparison.Like:
                            case Comparison.In:
                                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 (e.Sort.Length > 0)
        {
            data.Sort(delegate(object x, object y)
            {
                object a;
                object b;

                int direction = e.Sort[0].Direction == Ext.Net.SortDirection.DESC ? -1 : 1;

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


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

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

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

        //The Total can be set in RefreshData event as below
        //or (Store1.Proxy.Proxy as PageProxy).Total in anywhere
        //Please pay attention that the Total make a sence only during DirectEvent because
        //the Store with PageProxy get/refresh data using ajax request

        e.Total = data.Count;

        this.GridPanel1.GetStore().DataSource = rangeData;
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>GridPanel with Remote Filtering, Sorting and Paging - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <h1>GridPanel with Remote Filtering, Sorting and Paging</h1>

        <p>Please see column header menu for applying filters</p>

        <ext:Window
            runat="server"
            Width="700"
            Height="400"
            Closable="false"
            Collapsible="true"
            Title="Example"
            Maximizable="true"
            Layout="Fit">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Border="false">
                    <Store>
                        <ext:Store
                            runat="server"
                            RemoteSort="true"
                            RemoteFilter="true"
                            OnReadData="Store1_RefreshData"
                            PageSize="10">
                            <Proxy>
                                <ext:PageProxy />
                            </Proxy>
                            <Model>
                                <ext:Model runat="server" IDProperty="Id">
                                    <Fields>
                                        <ext:ModelField Name="Id" Type="Int" />
                                        <ext:ModelField Name="Company" Type="String" />
                                        <ext:ModelField Name="Price" Type="Float" />
                                        <ext:ModelField Name="Date" Type="Date" />
                                        <ext:ModelField Name="Size" Type="String" />
                                        <ext:ModelField Name="Visible" Type="Boolean" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Sorters>
                                <ext:DataSorter Property="Company" Direction="ASC" />
                            </Sorters>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column runat="server" Text="ID" DataIndex="Id">
                                <Filter>
                                    <ext:NumberFilter />
                                </Filter>
                            </ext:Column>
                            <ext:Column ID="CompanyColumn" runat="server" Text="Company" DataIndex="Company">
                                <Filter>
                                    <ext:StringFilter/>
                                </Filter>
                            </ext:Column>
                            <ext:Column runat="server" Text="Price" DataIndex="Price">
                                <Renderer Format="UsMoney" />
                                <Filter>
                                    <ext:NumberFilter />
                                </Filter>
                            </ext:Column>
                            <ext:DateColumn runat="server" Text="Date" DataIndex="Date" Align="Center" Format="yyyy-MM-dd">
                                <Filter>
                                    <ext:StringFilter Value="2020/03/01 9:00 AM and 2020/03/01 12:00AM"/>
                                </Filter>
                            </ext:DateColumn>
                            <ext:Column runat="server" Text="Size" DataIndex="Size">
                                <Filter>
                                    <ext:ListFilter Options="extra small,small,medium,large,extra large" />
                                </Filter>
                            </ext:Column>
                            <ext:Column runat="server" Text="Visible" DataIndex="Visible" Align="Center">
                                <Renderer Handler="return (value) ? 'Yes':'No';" />
                                <Filter>
                                    <ext:BooleanFilter />
                                </Filter>
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <Plugins>
                        <ext:GridFilters runat="server" />
                    </Plugins>
                    <BottomBar>
                        <ext:PagingToolbar runat="server" />
                    </BottomBar>
                </ext:GridPanel>
            </Items>
        </ext:Window>
    </form>
</body>
</html>

---

Hello @Vamsi!

Quote:

---

Originally Posted by Vamsi

is there any option to set width automatically based on text size

---

Form fields extending the Ext.form.field.Text (Ext.Net.TextField) implement the Grow setting for that.

But text fields used in the menus' string filter don't implement this feature. You'd have to extend or derive the component (into a new one, or override it) to get this feature in the menu items, as it will affect also the menu widths containing the text fields. I don't think that's a trivial change, but that's definitely not impossible.

Quote:

---

Originally Posted by Vamsi

filtering automatically if set the default value to string filter

---

I don't get what in the grid's value should be set to "default string filter" to enable filtering "automatically". But you can manually set filters, while using the Grid Filters plugin (see the Find '3m Co' button by the paging toolbar in the GridPanel > Plugins > GridFilters_Local example). So you can set initial filters at client-side depending on the setup of the grid as soon as you identify the grid state.

Quote:

---

Originally Posted by Vamsi

it should filter only when user enters manually

---

By default, you have a checkbox near the Filters menu items (as you can see in the two screenshots you shared in the last post). The checkbox can be unchecked to disable the filter no matter which value is inside the filter field. By design, the checkbox is cleared as soon as the value in the corresponding filter's field is cleared -- thus filter is disabled for that column.

Quote:

---

Originally Posted by Vamsi

Is there any way to popup calender from Textfield (string filter) and I have attached screenshots with color hightlight.

---

There is no way in the component, as it is, to popup a calendar from the text field when it is a string filter. It is required to extend the component in order to attain this behavior.

This is an advanced topic; you can do virtually anything by extending components; and it does not limit to client-side code. We have a Chart example where we created a 3D Column Series component for the column charts to make the example possible:
- Chart > Column > 3D

There you'll see how a chart series is defined at client-side and also server-side.

Unfortunately the only way I see to the requirements you have are by extensions.

An easier approach would be to use a separate (maybe popup) form to define your filters, from a window with date -and- time fields, like an "advanced filter"; and then using it to apply the filters similarly to how the sample at GridPanel > Plugins > GridFilters_Local (same linked above) highlights.

Hope this helps!