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

Filter grid using combo box - client side

2 Answers 112 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Stanley
Top achievements
Rank 1
Stanley asked on 30 Jun 2011, 06:55 AM
Hi all,

I have a grid created through declarative client side binding. Everything works fine but now I have added a combox and I would like the databind function to be called again as soon as an item is selected.

There is an example in the demo but it looks like this happening on the server side. I need this to happen on the client side. Here is my code:

<%@ Page language="C#" Codebehind="Custom_DealUI.aspx.cs" AutoEventWireup="false" Inherits="KF.Crm.Web.Custom_DealUI" %>
  
  
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  
  
  
<head id="Head1" runat="server">
      
      
     
 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  
  
        <script type="text/javascript">
         
       <!--
            function OnClientSelectedIndexChangedEventHandler(sender, args) {            
              
            //NEED TO SOMEHOW CALL THE CLIENT SIDE DATABIND FUNCTION 
                  
            }
      
        function RadGrid1_DataBinding(sender, args) {
              
  
             
            var dataSourceLocation = args.get_location();
            var selectMethodName = args.get_methodName();
            var methodArguments = args.get_methodArguments();
  
           
              
            var startRowIndexParameterName = sender.ClientSettings.DataBinding.StartRowIndexParameterName;
            
            var maximumRowsParameterName = sender.ClientSettings.DataBinding.MaximumRowsParameterName;
              
            var sortParameterName = sender.ClientSettings.DataBinding.SortParameterName;
             
            var filterParameterName = sender.ClientSettings.DataBinding.FilterParameterName;
         
        }
          
        -->
    </script>
  
</telerik:RadCodeBlock>
  
    <style type="text/css">
        #mainForm
        {
            height: 646px;
        }
    </style>
  
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post">
         
        <telerik:RadScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
        <!-- content start -->
          <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged ="OnClientSelectedIndexChangedEventHandler"
  
       DataTextField="DealSelector"
      DataValueField="DealSelector" Culture="English (Australia)" 
            EnableAutomaticLoadOnDemand="True" Skin="Windows7"  >
              <Items>
                  <telerik:RadComboBoxItem runat="server" Text="All Deals" Value="All Deals" />
                  <telerik:RadComboBoxItem runat="server" Text="New Deals" Value="New Deals" />
                  <telerik:RadComboBoxItem runat="server" Text="Waiting Manager Approval" 
                      Value="Waiting Manager Approval" />
                  <telerik:RadComboBoxItem runat="server" Text="Manager Approved" 
                      Value="Manager Approved" />
                  <telerik:RadComboBoxItem runat="server" Text="Income Recognised" 
                      Value="Income Recognised" />
                  <telerik:RadComboBoxItem runat="server" Text="Pro-forma Invoice Created" 
                      Value="Pro-forma Invoice Created" />
                  <telerik:RadComboBoxItem runat="server" Text="Waiting Accounts Approval" 
                      Value="Waiting Accounts Approval" />
                  <telerik:RadComboBoxItem runat="server" Text="Invoiced" Value="Invoiced" />
                  <telerik:RadComboBoxItem runat="server" Text="Receipt Processed" 
                      Value="Receipt Processed" />
                  <telerik:RadComboBoxItem runat="server" Text="Credit Processed" 
                      Value="Credit Processed" />
                  <telerik:RadComboBoxItem runat="server" Text="Inactive" Value="Inactive" />
              </Items>
    </telerik:RadComboBox>
      
        <telerik:RadGrid ID="RadGrid1" AllowSorting="True" AllowPaging="True" 
            AllowFilteringByColumn="True" runat="server" CellSpacing="0" GridLines="None" 
            PageSize="100" Skin="Windows7" Culture="English (Australia)" 
             ShowStatusBar="True" Height="611px" style="margin-top: 34px">
            <MasterTableView>
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
  
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
  
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="DealNo" HeaderText="DealNo" 
                AllowFiltering="True" >
                        <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
                      
                   <telerik:GridBoundColumn DataField="ID" HeaderText="ID" 
                AllowFiltering="True" Visible="True" >
                        <HeaderStyle Font-Bold="True"  />
                    </telerik:GridBoundColumn>
                      
                        
          <telerik:GridBoundColumn DataField="Location" HeaderText="Location" 
                AllowFiltering="True" >
              <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="Department" HeaderText="Department" 
                AllowFiltering="False" >
              <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="LeadOp" 
                HeaderText="Lead Operative" AllowFiltering="True" >
              <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
          <telerik:GridBoundColumn DataField="TranType" 
                HeaderText="Transaction Type" AllowFiltering="False" >
                  
              <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
                  
          <telerik:GridBoundColumn DataField="LevelSuite" HeaderText="Level Suite" 
                AllowFiltering="False" >
                  
              <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
                  
          <telerik:GridBoundColumn DataField="Address" HeaderText="Address" 
                AllowFiltering="False" >
                  
              <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
                  
          <telerik:GridBoundColumn DataField="KFAAmtExGST" 
                HeaderText="Amount Ex GST" AllowFiltering="False" DataType ="System.Decimal"  >
                  
              <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
                  
          <telerik:GridBoundColumn DataField="DealStatus" HeaderText="Deal Status" 
                AllowFiltering="False" >
                  
              <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
                  
          <telerik:GridBoundColumn DataField="GPDebtor" HeaderText="GP Debtor" 
                AllowFiltering="False" >
                <HeaderStyle Font-Bold="True" />
                    </telerik:GridBoundColumn>
                </Columns>
  
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
  
<PagerStyle AlwaysVisible="True"></PagerStyle>
            </MasterTableView>
<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
  
             
            <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" >
                <DataBinding Location="WebService.asmx"
                    SelectMethod="GetDataAndCount" SelectCountMethod="GetCount" 
                    EnableCaching="True" />
                <ClientEvents OnDataBinding="RadGrid1_DataBinding" />
                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
                <Resizing AllowColumnResize="True" AllowResizeToFit="True" />
                  
                  
            </ClientSettings>
  
<FilterMenu EnableImageSprites="False"></FilterMenu>
        </telerik:RadGrid>
          
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" 
            BackImageUrl="loading.gif" BackgroundPosition="None" HorizontalAlign="Center" />
  
  
         
         
        <!-- content end -->
         
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" 
            DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" 
                            LoadingPanelID="RadAjaxLoadingPanel1"  />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
         
    </form>
</body>
</html>

2 Answers, 1 is accepted

Sort by
0
Genti
Telerik team
answered on 05 Jul 2011, 10:11 AM
Hi Stanley,

In such case, you can update the OnClientSelectedIndexChangedEventHandler in the following:
function OnClientSelectedIndexChangedEventHandler (sender,args) {
    var grid=$find("<%=RadGrid1.ClientID %>");
    grid.get_masterTableView().filter("SomeColumnName",args.get_item().get_value(),"EqualTo");
}

Let me know if this helps.

Regards,
Genti
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Stanley
Top achievements
Rank 1
answered on 11 Jul 2011, 01:11 AM
Hi Genti,

Thanks for the reply but I have already implemented this using server side data binding.

Regards,

Stanley
Tags
Grid
Asked by
Stanley
Top achievements
Rank 1
Answers by
Genti
Telerik team
Stanley
Top achievements
Rank 1
Share this question
or