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

multicolumn combobox as filter for radgrid

11 Answers 148 Views

Filter

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

Soumya asked on 25 Jul 2012, 01:57 PM

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

11 Answers, 1 is accepted

answered on 27 Jul 2012, 03:31 PM

RadGridFilteredByMultiColumnComboBox.zip

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.

answered on 29 Jul 2012, 07:31 PM

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>

answered on 01 Aug 2012, 01:33 PM

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

answered on 02 Aug 2012, 05:30 AM

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>

answered on 06 Aug 2012, 01:46 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

multicolumn combobox as filter for radgrid

11 Answers, 1 is accepted