how filter grid columns by dropdown numerical values

[sudhesh]

hi all,

i have a grid with two columns ID and Name in that i need the filter option by with the help of drop down contain numerical values.
i know how to do that in Server side code. can u please tell me how write the logic in java script.

aspx page:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
                  EnableLinqExpressions="false">
                  <MasterTableView PagerStyle-AlwaysVisible="true" AllowFilteringByColumn="true">
                      <Columns>
                          <telerik:GridBoundColumn HeaderText="ID" UniqueName="ID" DataField="ID" DataType="System.Int64">
                              <FilterTemplate>
                                  <telerik:RadComboBox ID="RadComboBoxDpi" DataTextField="ID" Width="50px" AppendDataBoundItems="true"
                                      runat="server" AutoPostBack="true" OnClientSelectedIndexChanged="DPIIndexChanged">
                                      <Items>
                                          <telerik:RadComboBoxItem Text="All" />
                                          <telerik:RadComboBoxItem Text="1" Value="1" />
                                          <telerik:RadComboBoxItem Text="2" Value="2" />
                                          <telerik:RadComboBoxItem Text="3" Value="3" />
                                          <telerik:RadComboBoxItem Text="4" Value="4" />
                                          <telerik:RadComboBoxItem Text="5" Value="5" />
                                          <telerik:RadComboBoxItem Text="6" Value="6" />
                                          <telerik:RadComboBoxItem Text="7" Value="7" />
                                          <telerik:RadComboBoxItem Text="8" Value="8" />
                                          <telerik:RadComboBoxItem Text="9" Value="9" />
                                          <telerik:RadComboBoxItem Text="10" Value="10" />
                                      </Items>
                                  </telerik:RadComboBox>
                              </FilterTemplate>
                          </telerik:GridBoundColumn>
                          <telerik:GridBoundColumn HeaderText="Name" UniqueName="Name" DataField="Name">
                          </telerik:GridBoundColumn>
                      </Columns>
                      <EditFormSettings>
                          <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                          </EditColumn>
                      </EditFormSettings>
                      <PagerStyle AlwaysVisible="True"></PagerStyle>
                  </MasterTableView>
                  <FilterMenu EnableImageSprites="False">
                  </FilterMenu>
              </telerik:RadGrid>

code :

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
   {
       dynamic data = new[] {
               new { ID = 1, Name ="Name1"},
               new { ID = 2, Name = "Name2"},
               new { ID = 3, Name = "Name3"},
               new { ID = 4, Name = "Name4"},
               new { ID = 5, Name = "Name5"},
               new { ID = 6, Name ="Name6"},
               new { ID = 7, Name = "Name7"},
               new { ID = 8, Name = "Name8"},
               new { ID = 9, Name = "Name9"},
               new { ID = 10, Name = "Name10"}

           };

       RadGrid1.DataSource = data;
   }
   protected void RadComboBoxDpi_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
   {
       RadComboBox rdcmb = (RadComboBox)sender;
       RadGrid1.MasterTableView.FilterExpression = "([ID] = " + rdcmb.SelectedValue + ")";
       GridColumn column = RadGrid1.MasterTableView.GetColumnSafe("ID");
       column.CurrentFilterFunction = GridKnownFunction.EqualTo;
       column.CurrentFilterValue = rdcmb.SelectedValue;
       RadGrid1.Rebind();
   }

the javascript code i tried for numeric sorting is not working  but the below the logic for string data is working fine ...still no luck on this can  u please help me out this issue

<script type="text/javascript">

 

       function DPIIndexChanged(sender, args) {

           debugger;

           var LangaugeView = $find("<%=RadGrid1.ClientID%>").get_masterTableView();

           LangaugeView.filter("ID", args.get_item().get_value(), "EqualTo");

       }

   </script>

        

[Jayesh Goyani]

Hello sudhesh,

<telerik:GridTemplateColumn DataField="ParentID" UniqueName="ParentID" HeaderText="ParentID">
                        <ItemTemplate>
                            <%# Eval("ParentID")%>
                        </ItemTemplate>
                        <FilterTemplate>
                            <telerik:RadComboBox ID="RadComboBoxstatus" runat="server" AppendDataBoundItems="true"
                                Width="75px" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ParentID").CurrentFilterValue %>'
                                OnClientSelectedIndexChanged="TitleIndexChanged">
                                <Items>
                                    <telerik:RadComboBoxItem Text="All" />
                                    <telerik:RadComboBoxItem Text="1" Value="1" />
                                    <telerik:RadComboBoxItem Text="2" Value="2" />
                                </Items>
                            </telerik:RadComboBox>
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">

                                    function TitleIndexChanged(sender, args) {
                                        var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                        tableView.filter("ParentID", args.get_item().get_value(), "EqualTo");
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridTemplateColumn>

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
   {
       dynamic data = new[] {
               new { ID = "1", Name ="Name11",ParentID = "0"},
               new { ID = "2", Name ="Name11",ParentID = "1"},
               new { ID = "3", Name ="Name11",ParentID = "2"},
               new { ID = "4", Name ="Name11",ParentID = "3"}
           };
       RadGrid1.DataSource = data;
   }

Thanks,
Jayesh Goyani

[sudhesh]

hello jayesh,

your code works like a charm . can u point out me wat i'm doing wrong in my previous code.

thanks for the reply...

[Jayesh Goyani]

Hello Sudhesh ,

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
                 EnableLinqExpressions="false">
                 <MasterTableView PagerStyle-AlwaysVisible="true" AllowFilteringByColumn="true">
                     <Columns>
                         <telerik:GridBoundColumn HeaderText="ID" UniqueName="ID" DataField="ID" DataType="System.Int64">
                             <FilterTemplate>
                                 <telerik:RadComboBox ID="RadComboBoxDpi" DataTextField="ID" Width="50px" AppendDataBoundItems="true"
                                  SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ID").CurrentFilterValue %>'
                                     runat="server" AutoPostBack="true"  OnSelectedIndexChanged="RadComboBoxDpi_SelectedIndexChanged">
                                     <Items>
                                         <telerik:RadComboBoxItem Text="All" />
                                         <telerik:RadComboBoxItem Text="1" Value="1" />
                                         <telerik:RadComboBoxItem Text="2" Value="2" />
                                         <telerik:RadComboBoxItem Text="3" Value="3" />
                                         <telerik:RadComboBoxItem Text="4" Value="4" />
                                         <telerik:RadComboBoxItem Text="5" Value="5" />
                                         <telerik:RadComboBoxItem Text="6" Value="6" />
                                         <telerik:RadComboBoxItem Text="7" Value="7" />
                                         <telerik:RadComboBoxItem Text="8" Value="8" />
                                         <telerik:RadComboBoxItem Text="9" Value="9" />
                                         <telerik:RadComboBoxItem Text="10" Value="10" />
                                     </Items>
                                 </telerik:RadComboBox>
                             </FilterTemplate>
                         </telerik:GridBoundColumn>
                         <telerik:GridBoundColumn HeaderText="Name" UniqueName="Name" DataField="Name">
                         </telerik:GridBoundColumn>
                     </Columns>
                     <EditFormSettings>
                         <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                         </EditColumn>
                     </EditFormSettings>
                     <PagerStyle AlwaysVisible="True"></PagerStyle>
                 </MasterTableView>
                 <FilterMenu EnableImageSprites="False">
                 </FilterMenu>
             </telerik:RadGrid>

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
   {
       dynamic data = new[] {
              new { ID = 1, Name ="Name1"},
              new { ID = 2, Name = "Name2"},
              new { ID = 3, Name = "Name3"},
              new { ID = 4, Name = "Name4"},
              new { ID = 5, Name = "Name5"},
              new { ID = 6, Name ="Name6"},
              new { ID = 7, Name = "Name7"},
              new { ID = 8, Name = "Name8"},
              new { ID = 9, Name = "Name9"},
              new { ID = 10, Name = "Name10"}

          };

       RadGrid1.DataSource = data;
   }
   protected void RadComboBoxDpi_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
   {
       RadComboBox rdcmb = (RadComboBox)sender;
       RadGrid1.MasterTableView.FilterExpression = "([ID] = " + rdcmb.SelectedValue + ")";
       GridColumn column = RadGrid1.MasterTableView.GetColumnSafe("ID");
       column.CurrentFilterFunction = GridKnownFunction.EqualTo;
       column.CurrentFilterValue = rdcmb.SelectedValue;
       RadGrid1.Rebind();

   }

in server side:
you are not registered the event in aspx page.

Or

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnNeedDataSource="RadGrid1_NeedDataSource"
                  EnableLinqExpressions="false">
                  <MasterTableView PagerStyle-AlwaysVisible="true" AllowFilteringByColumn="true">
                      <Columns>
                          <telerik:GridBoundColumn HeaderText="ID" UniqueName="ID" DataField="ID" DataType="System.Int64">
                              <FilterTemplate>
                                  <telerik:RadComboBox ID="RadComboBoxDpi" DataTextField="ID" Width="50px" AppendDataBoundItems="true"
                                   SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ID").CurrentFilterValue %>'
                                      runat="server"  OnClientSelectedIndexChanged="DPIIndexChanged">
                                      <Items>
                                          <telerik:RadComboBoxItem Text="All" />
                                          <telerik:RadComboBoxItem Text="1" Value="1" />
                                          <telerik:RadComboBoxItem Text="2" Value="2" />
                                          <telerik:RadComboBoxItem Text="3" Value="3" />
                                          <telerik:RadComboBoxItem Text="4" Value="4" />
                                          <telerik:RadComboBoxItem Text="5" Value="5" />
                                          <telerik:RadComboBoxItem Text="6" Value="6" />
                                          <telerik:RadComboBoxItem Text="7" Value="7" />
                                          <telerik:RadComboBoxItem Text="8" Value="8" />
                                          <telerik:RadComboBoxItem Text="9" Value="9" />
                                          <telerik:RadComboBoxItem Text="10" Value="10" />
                                      </Items>
                                  </telerik:RadComboBox>
                              </FilterTemplate>
                          </telerik:GridBoundColumn>
                          <telerik:GridBoundColumn HeaderText="Name" UniqueName="Name" DataField="Name">
                          </telerik:GridBoundColumn>
                      </Columns>
                      <EditFormSettings>
                          <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                          </EditColumn>
                      </EditFormSettings>
                      <PagerStyle AlwaysVisible="True"></PagerStyle>
                  </MasterTableView>
                  <FilterMenu EnableImageSprites="False">
                  </FilterMenu>
              </telerik:RadGrid>

<script type="text/javascript">

      function DPIIndexChanged(sender, args) {

          var LangaugeView = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
          LangaugeView.filter("ID", args.get_item().get_value(), "EqualTo");

      }
 </script>

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        dynamic data = new[] {
               new { ID = 1, Name ="Name1"},
               new { ID = 2, Name = "Name2"},
               new { ID = 3, Name = "Name3"},
               new { ID = 4, Name = "Name4"},
               new { ID = 5, Name = "Name5"},
               new { ID = 6, Name ="Name6"},
               new { ID = 7, Name = "Name7"},
               new { ID = 8, Name = "Name8"},
               new { ID = 9, Name = "Name9"},
               new { ID = 10, Name = "Name10"}

           };

        RadGrid1.DataSource = data;
    }

in this case remove autopostback = "true"


Let me know if any concern.

Thanks,
Jayesh Goyani