This is a migrated thread and some comments may be shown as answers.

GridDateTimeColumn double postback on enter

2 Answers 62 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 23 Dec 2014, 07:58 PM
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" />   

2 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 26 Dec 2014, 11:50 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Bill
Top achievements
Rank 1
answered on 02 Jan 2015, 03:03 PM
Perfect! That fixed it.

Thanks,
Bill
Tags
Grid
Asked by
Bill
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Bill
Top achievements
Rank 1
Share this question
or