Add date time filters on custom entity picker in SharePoint 2010

Now you have created a custom entity picker which inherits from EntityEditorWithPicker in SharePoint 2010. By default, you have a dropdown and input box as for filters. However, you might have the request to add more filters on the picker to fit your business needs.

In this blog, I’m going to add two SharePoint DateTimeControls on the picker as shown below:

 

How do you achieve this?

First, you’ll need to override the CreateChildControls method in you custom QueryControl class which inherits from the SimpleQueryControl class and create the controls there, e.g. the SharePoint DateTimeControl in this example. Following is part of the the code.

protected DateTimeControl toDate;

protected DateTimeControl fromDate;

protected override void CreateChildControls()

{

    // add a table in here

    // . . . . . . 

    fromDate = new DateTimeControl();

    fromDate.AutoPostBack = true;

    fromDate.DateOnly = true;

    if (this.OpenDateFrom != null) fromDate.SelectedDate = (DateTime)this.OpenDateFrom;

    fromDate.ID = "fromDate";

    TextBox txtDateFrom = fromDate.FindControl(fromDate.ID + "Date") as TextBox;

    txtDateFrom.TextChanged += new EventHandler(fromDate_DateChanged);

    // . . . . . . 

    // add the controls

    base.CreateChildControls();

}

Note that there is an event handler on the text box which is part of the date time control. There are two reasons for doing this. First, the picker control doesn’t post back custom control value in the form submit and there is no way we can get the post back data unless we do a auto postback and catch it in the controls’s onchange event. Second, the event handler is on the text box which composes the date time control. This is because the date time control can’t catch the event when you remove the picked date time from the text box.

You can also add an UpdatePanel for better user interaction.

 

Following is the event handler:

void fromDate_DateChanged(object sender, EventArgs e)

{

    // parse the sender object to a textbox and save the value to ViewState

}

 

After we get the postback date time data, we need to save it in somewhere, like the ViewState, for use when user do a Search submit.

Last, filter your query with the saved date time data in the IssueQuery method. That’s it. Not hard.