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

Client-side data validation based on selected Filter Function

5 Answers 210 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Arif
Top achievements
Rank 1
Arif asked on 08 Sep 2010, 03:44 PM
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.

5 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 13 Sep 2010, 09:23 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Arif
Top achievements
Rank 1
answered on 14 Sep 2010, 11:25 AM
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?
0
Radoslav
Telerik team
answered on 15 Sep 2010, 12:02 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Leadeng Leadeng
Top achievements
Rank 1
answered on 28 Oct 2010, 06:17 PM
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
0
Radoslav
Telerik team
answered on 02 Nov 2010, 02:56 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
Arif
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Arif
Top achievements
Rank 1
Leadeng Leadeng
Top achievements
Rank 1
Share this question
or