Hello, I'm trying to use a WebDatePicker to update a WebDataGrid asynchronously with new values from a query in my code behind. Currently, I am using the ValueChanged event to fire the async update. The markup looks something like this:
<asp:UpdatePanel ID="WebDataGridUpdatePanel" runat="server">
<ContentTemplate>
<ig:WebDatePicker ID="EndDatePicker" runat="server" PromptChar="0" Width="105px"
DisplayModeFormat="MM/dd/yyyy">
<AutoPostBackFlags ValueChanged="On" />
<Buttons CustomButton-Text="To" CustomButtonDisplay="OnLeft">
</Buttons>
</ig:WebDatePicker>
<ig:WebDatePicker ID="StartDatePicker" runat="server" PromptChar="0" Width="105px"
CssClass="right minormargin" DisplayModeFormat="MM/dd/yyyy">
<Buttons CustomButton-Text="From" CustomButtonDisplay="OnLeft">
<ig:WebDataGrid ID="WebDataGridTest" runat="server" Height="350px"
AutoGenerateColumns="False" DataSourceID="AvailableLocationDataSource"
EnableAjax="true">
<Columns>
<ig:BoundDataField DataFieldName="LocationType" Key="LocationType">
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="LocationName" Key="Location">
</Columns>
<Behaviors>
<ig:Selection CellClickAction="Row" RowSelectType="Single">
</ig:Selection>
</Behaviors>
</ig:WebDataGrid>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="StartDatePicker" EventName="ValueChanged" />
<asp:AsyncPostBackTrigger ControlID="EndDatePicker" EventName="ValueChanged" />
</Triggers>
</asp:UpdatePanel>
However, this is less than ideal, because it means the update doesn't happen until after the WebDatePicker loses focus, which requires the client to click somewhere else on the page. I was hoping to do the async update based on the TextChanged event, but that event seems to be client side only.
What I was hoping to do is use javascript to force fire a Blur event to remove focus from the WebDatePicker, which should trigger the ValueChanged event and cause the async update, without requiring the client to do the blur. However, I'm not sure how to do that with the WebDatePicker controls in javascript.
If anyone knows of a way to use the TextChanged to trigger the async update, that would be ideal, but any advice on solving this would be appreciated.
Hello JoeK486,
Thank you for posting in the community.
Perhaps in this scenario you can trigger an update using the __doPostBack function and targeting your UpdatePanel. For instance:
function WebDatePicker1_TextChanged(sender, eventArgs){ __doPostBack('UpdatePanel1', '');}
Please let me know if this helps.
Thanks for the quick reply.
This does cause the panel to update at the correct time, however, it causes a synchronous postback, rather than async.
Hi JoeK486,
Thank you for your reply.
Upon looking into this a bit more, it seems that the date picker's input element is focused after selecting a new value through the dropdown calendar. Therefore, blur() can be called on that element directly:
ig_controls.WebDatePicker1.get_inputElement().blur();
This should cause the desired async callback.
Hi Petar,
Is this considered a bug in the WebDateTimePicker? I'm using v12.1.
Thanks,
Trent
I had to use slightly different syntax:
startDatePicker.control.get_inputElement().blur();
But this does cause the Blur event to fire, which also fires the ValueChanged and causes an async update, thanks.