multicolumn combobox as filter for radgrid

12 posts, 0 answers
  1. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 25 Jul 2012 Link to this post

    I am trying to implement multicolumn combobox as filter for one column in the grid.
    I have done filter with combobox as below. I am taking the filter value in the item command event and grid is bind in Needdatasource event.  


    <telerik:GridBoundColumn HeaderText="Company" UniqueName="ComId" DataField="ComId" >
                        <FilterTemplate>
                        <telerik:RadComboBox ID="CBCompany" runat="server" DataSourceID="SQL_Company" DataTextField="CDName" DataValueField="ComId" Height="200px"
                         AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("ComId").CurrentFilterValue %>' OnClientSelectedIndexChanged="CompanyIndexChanged"  >
                         <Items>
                         <telerik:RadComboBoxItem Text="All" />
                         </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
     
                                    <script type="text/javascript">
                                        function CompanyIndexChanged(sender, args) {
                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("ComId", args.get_item().get_value(), "EqualTo");
     
                                        }
                                    </script>
     
                                </telerik:RadScriptBlock>
                        </FilterTemplate>
                    </telerik:GridBoundColumn>


    But confused how to use it for a multicolumn combobox.Please provide an example for the same.
    Thanks,
    Soumya
  2. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 26 Jul 2012 Link to this post

    Any answer?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 26 Jul 2012 Link to this post

    Telerik team ,
    Please help on this 

    Thanks,
    Soumya
  5. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 27 Jul 2012 Link to this post

    Hi Soumya,

    Thank you for contacting us.

    I have created a sample RadGrid web site where I implemented the desired functionality. Please check out the attached application and let me know about the result.

    You could also check out the following demo for additional styling your combobox:
     ComboBox / Multi-column ComboBox

    Kind regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 29 Jul 2012 Link to this post

    Thanks Eyup for the answer.
    I have tried your code,still have an issue.Please guide me on this.
    In my case I have 2 text field(var_Emp_NAME & dept_name )
    and a value field(MdiSft_Emp_ID )for the combobox filter.I am using value field 'MdiSft_Emp_ID ' from the combobox as filter variable in the code behind.I need to show one of the text field var_Emp_NAME  as the grid column data and value field as the filtering value in the code behind.
    But here in my code,javascript part is getting executed and have value in args.get_item().get_value() .But
      control is not coming into the program.What could be the issue here.How should I keep the unique name,value field and tableView.filter ?
    Please help me on this.


    <telerik:GridBoundColumn HeaderText="Doctor" UniqueName="MdiSft_Emp_ID" DataField="MdiSft_Emp_ID" Visible="false" ></telerik:GridBoundColumn>
                   <telerik:GridTemplateColumn HeaderText="Doctor Name" Visible="false" UniqueName="tempCol"  >
                   <ItemTemplate>
                   <asp:Label ID="lblDoctor" runat="server" Text='<%#Eval("var_Emp_NAME")%>'></asp:Label>
                   </ItemTemplate>
                   <FilterTemplate>                   
                        <telerik:RadComboBox ID="CBDr" runat="server" DataSourceID="SqlDoctor" Skin="Web20"
                                DataTextField="var_Emp_NAME" DataValueField="MdiSft_Emp_ID" Height="200px"  Width="150px" DropDownWidth="550px" AppendDataBoundItems="true"
                                SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("MdiSft_Emp_ID").CurrentFilterValue %>'
                                  EmptyMessage="Select Doctor" OnClientSelectedIndexChanged="DoctorIndexChanged">                          
                                <HeaderTemplate>                           
                                     <table style="width:550px" cellspacing="0" cellpadding="0">                                       
                                            <tr>
                                            <td style="text-align:left;width:250px">Doctor Name
                                            </td>
                                            <td style="text-align:left;width:250px">Speciality
                                            </td>               
                                            <td width="50px" >                                           
                                                <telerik:RadButton ID="RadButton1" AutoPostBack="false" runat="server" Text="All items"
                                                    OnClientClicked="allClicked">
                                                </telerik:RadButton>
                                            </td>
                                        </tr>
                                    </table>
                                </HeaderTemplate>
                                <ItemTemplate>
                                     
                                    <table  style="width:550px" cellspacing="0" cellpadding="0">
                                        <tr>
                                        <td style="text-align:left;width:250px">                              
                                            <%# DataBinder.Eval(Container.DataItem, "var_Emp_NAME")%></td>
                                        <td style="text-align:left;width:250px">
                                            <%# DataBinder.Eval(Container.DataItem, "dept_name")%></td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                                <FooterTemplate>
                                    <asp:Label Text="Please select a Doctor to filter" runat="server" ID="Label1" />
                                </FooterTemplate>
                            </telerik:RadComboBox>  
                            <telerik:RadScriptBlock ID="RBDr" runat="server">
                                 <script type="text/javascript">
     
                                     function DoctorIndexChanged(sender, args) {
                                         var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                         tableView.filter("MdiSft_Emp_ID", args.get_item().get_value(), "EqualTo");
                                     }
                                     function allClicked(sender, args) {
                                         var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                         tableView.filter("MdiSft_Emp_ID", "", Telerik.Web.UI.GridFilterFunction.NoFilter);
                                     }
                
                                 </script>
                            </telerik:RadScriptBlock>
                                                           
                   </FilterTemplate>
                   </telerik:GridTemplateColumn>
  7. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 31 Jul 2012 Link to this post

    Any one knows the answer,please help.
  8. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 01 Aug 2012 Link to this post

    Any Answer?
  9. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 01 Aug 2012 Link to this post

    Hello Soumya,

    You could access the performed filtering operation details as demonstrated below:
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == RadGrid.FilterCommandName)
        {
            Pair arguments = e.CommandArgument as Pair;
            string function = arguments.First.ToString();
            string field = arguments.Second.ToString();
        }
    }

    I hope this helps. Actually, it is difficult to understand your exact desired functionality. If you have different requirements or further instructions, could you please elaborate some more on the issue?

    Greetings,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 02 Aug 2012 Link to this post

    Hi,
    In the multicolumn combobox,there are 2 text fields Emp_Name and dept_name.The value field is MdiSft_Emp_Id.
    In the grid column,I need to show the EmpName while I need to filter the grid using EmpID.I know how to handle the filter in Item command event.My Issue is like when I give MdiSft_Emp_Id as the unique name,selected value and tableview.filter,filtering of grid is working properly.But Iam having the EmpId as the grid column instead of EmpName. 
    I tried giving EmpName as a Grid template column and EmpID as a seperate Gridbound column.Then the EmpName comes as grid column,but the Item command event is not fired,hence filtering is not working.
    Since the value and text fields of combobox are different,how should I give the unique name,selected value and tableview.filter fields in the aspx page,so that I can get the text field in the grid column and ID field inside the program as filter variable.
    Hope it is clearnow.

    telerik:GridBoundColumn HeaderText="Doctor" UniqueName="MdiSft_Emp_ID" DataField="MdiSft_Emp_ID" Visible="false" ></telerik:GridBoundColumn>
                   <telerik:GridTemplateColumn HeaderText="Doctor Name" Visible="false" UniqueName="tempCol"  >
                   <ItemTemplate>
                   <asp:Label ID="lblDoctor" runat="server" Text='<%#Eval("var_Emp_NAME")%>'></asp:Label>
                   </ItemTemplate>
                   <FilterTemplate>                  
                        <telerik:RadComboBox ID="CBDr" runat="server" DataSourceID="SqlDoctor" Skin="Web20"
                                DataTextField="var_Emp_NAME" DataValueField="MdiSft_Emp_ID" Height="200px"  Width="150px" DropDownWidth="550px" AppendDataBoundItems="true"
                                SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("MdiSft_Emp_ID").CurrentFilterValue %>'
                                  EmptyMessage="Select Doctor" OnClientSelectedIndexChanged="DoctorIndexChanged">                         
                                <HeaderTemplate>                          
                                     <table style="width:550px" cellspacing="0" cellpadding="0">                                      
                                            <tr>
                                            <td style="text-align:left;width:250px">Doctor Name
                                            </td>
                                            <td style="text-align:left;width:250px">Speciality
                                            </td>              
                                            <td width="50px" >                                          
                                                <telerik:RadButton ID="RadButton1" AutoPostBack="false" runat="server" Text="All items"
                                                    OnClientClicked="allClicked">
                                                </telerik:RadButton>
                                            </td>
                                        </tr>
                                    </table>
                                </HeaderTemplate>
                                <ItemTemplate>
                                      
                                    <table  style="width:550px" cellspacing="0" cellpadding="0">
                                        <tr>
                                        <td style="text-align:left;width:250px">                             
                                            <%# DataBinder.Eval(Container.DataItem, "var_Emp_NAME")%></td>
                                        <td style="text-align:left;width:250px">
                                            <%# DataBinder.Eval(Container.DataItem, "dept_name")%></td>
                                        </tr>
                                    </table>
                                </ItemTemplate>
                                <FooterTemplate>
                                    <asp:Label Text="Please select a Doctor to filter" runat="server" ID="Label1" />
                                </FooterTemplate>
                            </telerik:RadComboBox
                            <telerik:RadScriptBlock ID="RBDr" runat="server">
                                 <script type="text/javascript">
      
                                     function DoctorIndexChanged(sender, args) {
                                         var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                         tableView.filter("MdiSft_Emp_ID", args.get_item().get_value(), "EqualTo");
                                     }
                                     function allClicked(sender, args) {
                                         var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                         tableView.filter("MdiSft_Emp_ID", "", Telerik.Web.UI.GridFilterFunction.NoFilter);
                                     }
                 
                                 </script>
                            </telerik:RadScriptBlock>
                                                            
                   </FilterTemplate>
                   </telerik:GridTemplateColumn>
  11. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 06 Aug 2012 Link to this post

    Any suggestions?
  12. Eyup
    Admin
    Eyup avatar
    3005 posts

    Posted 06 Aug 2012 Link to this post

    Hello Soumya,

    Since you want to filter by EmpID but display the EmpName, you could try to hide the GridBoundColumn for the EmpID field using Display="false". Then you can pass the searched ID of the current employee as the value and fire a filter command using the unique name of the hidden column holding the EmpID values. Therefore, the grid will be filtered with the EmpID, but display the EmpName as you have requested.

    In addition, you could change the following part of the code to retrieve the selection from the filtering:
    SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("HiddenEmpIDColumn").CurrentFilterValue %>'

    I hope this will prove helpful.

    All the best,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  13. Soumya
    Soumya avatar
    108 posts
    Member since:
    Jul 2012

    Posted 07 Aug 2012 Link to this post

    Thanks Eyup.That works perfectly.

    Thanks,
    Soumya
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017