Client-side data validation based on selected Filter Function

[Arif]

Hi,

I want to be able to implement client-side validation for data entered into the filter text box of a column. The things I want to check for include:

1. Data type, e.g., only numbers are allowed in a column with numeric data
2. Based on the filter function selected, check that the data has been specified in the correct format. For example, when the EQUALTO function is selected, only a single value is specified (if a comma-separated list is specified instead, it should fail the validation check).

Here's is what I think I would need:

A. When a filter function is selected from the dropdown, a client-side function handles the event. The following information would need to be available:
    (i) The filter function that was clicked
    (ii) The data specified in the filter textbox

I'm not sure how to obtain the above information on the client side. Can you please help implement the above scenario, or suggest an alternative solution?

Thanks.

[Radoslav]

Hello Arif,

To achieve the desired functionality you could try handling the client side OnCommand event of the RadGrid:

<ClientSettings>
   <ClientEvents OnCommand="onCommand"  />
</ClientSettings>

And then you could get the filter function and data specified in the filter textbox from the event argument's  command argument:

<telerik:RadCodeBlock runat="server">
  <script type="text/javascript">
     function onCommand(sender, eventArgs)
     {
         var arguments = eventArgs.get_commandArgument().split("|");
         var valueEnteredIntoFilterControl = arguments[1];
         var filterFunction = arguments[2];
         alert("Entered vlaue: " + valueEnteredIntoFilterControl + ", Filter function: "+ filterFunction);
     }
  </script>
</telerik:RadCodeBlock>

After getting the needed values you could perform checks if the values are correct. If the validation fails you could cancel the postback with the following code snippet:

if(validationFaild)
{
   eventArgs.set_cancel(true);
}

I hope this helps.

Kind regards,
Radoslav
the Telerik team

[Arif]

Thanks for your suggestion. As soon as I add the following code and try and debug the page,

<ClientSettings>

   <ClientEvents OnCommand="onCommand"  />

</ClientSettings>

I get the error
Cannot find any bindable properties in an item from the datasource.

When the page with the grid first loads, no data is supposed to be displayed in the grid. It only gets populated when the user makes a selection from a list.

Could you please elaborate on how the OnCommand event and the above error message are related please?

[Radoslav]

Hi Arif,

This error usually occurs when the DataSource for the grid is null/not assigned or if you do not handled properly the NeedDataSource event. If you implement hierarchical grid structure you may receive this server error if the DataSources for the detail tables in the grid body are nulls or there are problems with the handling of the DetailTableDataBind event (used for detail table binding).
Note that if you want to set empty sources for the MasterTableView/DetailTables in the grid in some occasions you can use the following syntax:

<GridInstance>.DataSource = new Object[0];

Please give it try and let me know if the issue still persists.

All the best,
Radoslav
the Telerik team

[Leadeng Leadeng]

Hi there,

I added the following code as shown previously in this ticket to validate date filter input for one of the grid columns as shown below:

<ClientSettings>

   <ClientEvents OnCommand="ValidateFilter"  />

</ClientSettings>

but I got the NoRecordtemplate text appended at the end of the grid as shown in the picture attached.

I`m using telerik version 2009.3.1314.20 with visual studio 2005, on mozilla firefox 2.0.0.17

below is my ascx code:

 

 

<%@ Control Language="C#" AutoEventWireup="true" Inherits="WW.FS.SPSS.Web.Timesheet.Controls.SPInbox"
    Codebehind="SPInbox.ascx.cs" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<telerik:RadCodeBlock ID="QSCodeBlk" runat="server">

    <script type="text/javascript">

        function ValidateFilter(sender, eventArgs)
        {
            var arguments = eventArgs.get_commandArgument().split("|");
            var columnName = arguments[0];
            var valueEnteredIntoFilterControl = arguments[1];

            if (columnName == "WeekEnding")
            {
                if (valueEnteredIntoFilterControl != "")
                if (isNaN(Date.parse(valueEnteredIntoFilterControl)))
                    eventArgs.set_cancel(true);
            }

        }


        function applySortForSP(sender, eventArgs)
        {
            var masterTable = $find("<%= gvSPInbox.ClientID %>").get_masterTableView();

            if( eventArgs.get_gridColumn().get_uniqueName() != "ShowDetails")
            {
                masterTable.sort(eventArgs.get_gridColumn().get_uniqueName());
            }
        }

        function rowDoubleClickForSP(sender, eventArgs)
        {

           __doPostBack('<%= this.UniqueID %>',eventArgs.get_itemIndexHierarchical());

        }
    </script>

</telerik:RadCodeBlock>
<div class="contentArea" id="sub2profile" style="clear: both; border-left: 0px; border-right: 0px">
    <table width="100%">
        <tr>
            <td align="left" style="padding-bottom: 10px; padding-left:5px;">
                <asp:Label runat="server" ID="lblAddTimeSheet" Text=" you can`t Add new timesheet for one of the following:<br><menu><li>You have saved timesheet</li></menu>" />

            </td>
            <td align="right" style="padding-bottom: 10px;">
                <asp:Button runat="server" ID="btnAddTimesheet" OnClick="btnAddTimesheet_Click" Text="Add Timesheet" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <telerik:RadGrid ID="gvSPInbox" AllowPaging="True" AllowSorting="True" PageSize="100"
                    Skin="Default" AllowFilteringByColumn="true" runat="server" OnNeedDataSource="gvSPInbox_NeedDataSource"
                    AutoGenerateColumns="False" OnItemDataBound="gvSPInbox_ItemDataBound" OnItemCommand="gvSPInbox_ItemCommand">
                    <pagerstyle mode="NextPrevAndNumeric" pagesizelabeltext="Results per page" firstpageimageurl="../../include/img/arrow_rev.gif"
                        nextpageimageurl="../../include/img/arrow_front.gif" prevpageimageurl="../../include/img/arrow_back.gif"
                        lastpageimageurl="../../include/img/arrow_ff.gif" />
                    <groupingsettings casesensitive="false" />
                    <mastertableview datakeynames="TimesheetID">
                    <NoRecordsTemplate>
                        <asp:Label ID="Label1" Text="No results found." runat="server" />
                    </NoRecordsTemplate>
                    <Columns>
                        <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlWidth="30px" HeaderStyle-Width="65px" ItemStyle-Width="65px"
                            DataField="TimesheetID" HeaderText="Auto Control Number" UniqueName="TimesheetID" CurrentFilterFunction="EqualTo"
                            ShowFilterIcon="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn HeaderStyle-Width="95px" ItemStyle-Width="95px" DataField="IntegerRegionCode" HeaderText="Region Code" UniqueName="IntegerRegionCode" AllowFiltering="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn AutoPostBackOnFilter="true" FilterControlWidth="60px" HeaderStyle-Width="95px" ItemStyle-Width="95px"
                            DataField="TerritoryCode" HeaderText="Terr" UniqueName="TerritoryCode" CurrentFilterFunction="EqualTo"
                            ShowFilterIcon="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridDateTimeColumn FilterControlWidth="100px" HeaderStyle-Width="100px" ItemStyle-Width="100px" DataFormatString="{0:MM-dd-yyyy}"
                        DataField="WeekEnding" SortExpression="WeekEnding"
                        UniqueName="WeekEnding" HeaderText="Week Ending" AutoPostBackOnFilter="true" ShowFilterIcon="false"
                        CurrentFilterFunction="EqualTo">
                        </telerik:GridDateTimeColumn>
                        <telerik:GridBoundColumn AutoPostBackOnFilter="true" ItemStyle-Width="70px" FilterControlWidth="70px" HeaderStyle-Width="70px"
                            DataField="Status" HeaderText="Status" UniqueName="Status" CurrentFilterFunction="EqualTo"
                            ShowFilterIcon="false">
                            <FilterTemplate>
                            <telerik:RadComboBox Width="70px" ID="rcbStatusFilter" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Status").CurrentFilterValue %>'
                                    runat="server" OnClientSelectedIndexChanged="StatusIndexChanged" AppendDataBoundItems="true">
                                    <Items>
                                        <telerik:RadComboBoxItem />
                                        <telerik:RadComboBoxItem Value = "1" Text="Saved" />
                                        <telerik:RadComboBoxItem Value = "2" Text="Pending" />
                                        <telerik:RadComboBoxItem Value = "3" Text="Rejected" />
                                        <telerik:RadComboBoxItem Value = "4" Text="Approved" />
                                    </Items>
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">

                                    <script type="text/javascript">
                                        function StatusIndexChanged(sender,args) {
                                            var tableView=$find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("Status",args.get_item().get_value(),"EqualTo");

                                        }
                                    </script>

                                </telerik:RadScriptBlock>
                        </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" FooterStyle-HorizontalAlign="Left"
                         HeaderStyle-Width="100px" ItemStyle-Width="100px" AllowFiltering="false" DataField="RejectionDesc" HeaderText="Rejection Desc" UniqueName="RejectionDesc">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn UniqueName="ShowDetails" AllowFiltering="False" HeaderStyle-Width="35px" ItemStyle-Width="35px"
                            HeaderStyle-Font-Underline="false">
                            <ItemTemplate>
                                <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="../../include/img/btn_arrow.gif"
                                    OnClick="ImageButton1_Click" />
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </mastertableview>
                    <clientsettings clientevents-oncolumnclick="applySortForSP" clientevents-onrowdblclick="rowDoubleClickForSP">
                    <Selecting AllowRowSelect="true" />
                    <ClientEvents OnCommand="ValidateFilter"  />
                </clientsettings>
                    <headerstyle font-bold="true" font-underline="true" />
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
</div>

 

 

Thanks,

P.S: please reply as soon as possible as this urgent

[Radoslav]

Hi Leadeng,

The described problem was a known issue and our developers fixed it.
You could get the latest version of the RadControls from your account. Also on the following links you could find instructions how to use the hotfix dlls and how to upgrade Telerik's RadControls to another version:
http://www.telerik.com/help/aspnet-ajax/installusinghotfix.html
http://www.telerik.com/support/kb/aspnet-ajax/general/updating-radcontrols-for-asp-net-to-another-version-or-license.aspx

Additionally I am sending you a simple example based on your code with the latest dll of the RadControls for ASP.NET AJAX.

Sincerely yours,
Radoslav
the Telerik team