Date Picker to filter data

Dec 16, 2011 at 9:43 AM

Hi 

Thank you very much for a very useful package! Very often it's necessary to display/edit custom data, and this package makes it very easy. 

However, I wish to extend the search with additional filtering to narrow the search: 

  • "From date" and "To date" - 2 Date Pickers to filter the table data to a specific date range based on a DateTime column

How can this be implemented? 

Best regards, 

Søren T

 

 

Coordinator
Dec 17, 2011 at 10:06 PM

Hi Søren,

Just an example on how to extend the search functionality. Basically you need to implement a custom view and a custom SearchPanel. You can point to a custom view type in the XML-configuration file like this:
<view name="All" type="CustomSearchView,App_Code" showPager="false">
<htmlInject>
<![CDATA[
// demonstrates how to include some datepicker js in the head-tag, if needed
<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js"></script>
<script type="text/javascript">
jQuery(function() { jQuery("input.dp").datepicker(); });
</script>
]]>
</htmlInject>
...

And the code for CustomSearchView in App_Code:

using System;
using Eksponent.Dewd.Views;
using Eksponent.Dewd.Controls.View;
using System.Web.UI.WebControls;
using Eksponent.Dewd.Repositories.Table;
using Eksponent.Dewd.Repositories;
using System.Xml.Linq;
using System.Data;

/// <summary>
/// Summary description for CustomSearch
/// </summary>
public class CustomSearchView : TableView
{
    public CustomSearchView(XElement viewElement, IRepository repository)
        : base(viewElement, repository)
    {
    }

    public CustomSearchPanel MySearchPanel
    {
        get { return (CustomSearchPanel)searchPanel; }
    }

    public override Eksponent.Dewd.Controls.View.SearchPanel GetSearchPanel()
    {
        // creates the custom search panel using the class below
        return new CustomSearchPanel();
    }

    public class CustomSearchPanel : SearchPanel
    {
        public TextBox DateBox { get; set; }

        public override void AddSearchInputControls()
        {
            // add standard text field
            base.AddSearchInputControls();
            
            // add any custom fields
            Controls.Add(new Label() { Text = " Date filter: " });
            Controls.Add(DateBox = new TextBox() { AutoPostBack = true, CssClass="dp" }); // could add .net datepicker here
        }

        public override void OnClear(object sender, EventArgs args)
        {
            base.OnClear(sender, args);
            if (DateBox != null) DateBox.Text = ""; // when pressing clear-link, clear the date box also
        }
    }

    public override System.Data.DataTable GetFilteredResult(System.Data.DataTable originalData)
    {
        // perform standard filtering (from DataTableBasedView)
        var filteredView = new DataView(base.GetFilteredResult(originalData)); 
        
        // add custom search logic using dataview.rowfilter
        if (MySearchPanel.DateBox.Text.Length != 0)
            filteredView.RowFilter = String.Format("dateField>Convert('{0}', System.DateTime)", MySearchPanel.DateBox.Text);
        return filteredView.ToTable();
    }
}

This only demonstrates how to make the from-field, but should be easy to extend to your needs.

Don't hesitate to ask, if you have any questions to the code or configuration.



- Sune

Dec 23, 2014 at 12:42 PM
Edited Dec 23, 2014 at 12:46 PM
For anyone wondering what the strangely-formatted text at the top should say:
<view name="All" type="CustomSearchView,App_Code" showPager="false">
<htmlInject>
<![CDATA[
<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js">
</script>
<script type="text/javascript">
jQuery(function() { jQuery("input.dp").datepicker(); });
</script>
]]>
</htmlInject>
...
I managed to get this working (Umbraco 6) by using this code in my custom .config file, and added Sune's class (above ) into the App_Code folder. Custom search functionality can then be added in the GetFilteredResult method.

It seems that the showPager attribute is no longer valid; I just removed this.