GridDateTimeColumn double postback on enter

[Bill]

Hello,

I have a GridDateTimeColumn with a filter (markup below) that works fine if the user uses the datepicker.  If they type a date and hit enter, however, the page posts back once, where the filter is applied, but then posts back a second time which causes all kinds of bad behavior in our app.  I've tried setting autopostbackonfilter = false and setting a filter delay but the filter never gets applied.  Any ideas?

The markup:

<rad:GridDateTimeColumn DataField="OrderDate" UniqueName="GridDateTimeColumnOrderDate"
                                HeaderText="Date" FilterControlWidth="170px" HeaderStyle-Width="170px" SortExpression="OrderDate"
                                AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" DataType="System.DateTime"
                                ShowFilterIcon="false" EnableTimeIndependentFiltering="true" FilterListOptions="VaryByDataType" />   

[Konstantin Dikov]

Hi Bill,

Such behavior could be observed if you have a submit element somewhere on the page. The default behavior of all forms is that on pressing the Enter key, the first submit element on the page is used for submitting the form. Having that in mind, I could only assume that you have buttons on your page.

However, you can use the following workaround and allow the enter key to be used only for the filtering:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function keyPress(sender, args) {
            if (args.get_keyCode() == "13") {
                var domEvent = args.get_domEvent();
                preventEvent(domEvent);
            }
        }

        function preventEvent(e) {
            var evt = e ? e : window.event;
            if (evt.stopPropagation) evt.stopPropagation();
            if (evt.preventDefault) evt.preventDefault();
            if (evt.cancelBubble != null) evt.cancelBubble = true;
            if (evt.stopImmediatePropagation) evt.stopImmediatePropagation();
            evt.returnValue = false;
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxPanel runat="server">
    <telerik:RadButton runat="server"></telerik:RadButton>

    <telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="true" ClientSettings-ClientEvents-OnKeyPress="keyPress">
        <MasterTableView AutoGenerateColumns="false">
            <Columns>
                <telerik:GridDateTimeColumn DataField="OrderDate" UniqueName="GridDateTimeColumnOrderDate"
                    HeaderText="Date" FilterControlWidth="170px" HeaderStyle-Width="170px" SortExpression="OrderDate"
                    AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" DataType="System.DateTime"
                    ShowFilterIcon="false" EnableTimeIndependentFiltering="true" FilterListOptions="VaryByDataType" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</telerik:RadAjaxPanel>

As you can see, the client-side OnKeyPress event of the grid is handled for canceling the event if the Enter key is press. 

Please give this a try and see how it works.


Regards,
Konstantin Dikov
Telerik

 

 

[Bill]

Perfect! That fixed it.

Thanks,
Bill