Custom Dropdown Column

[JB]

Hi,

I have an idea in my head about a grid layout but I need assistance in figuring out how I can implement that. This is regarding a column called status.

The status dropdown would have fixed values (say Activate, Deactivate, Suspended etc. and the values will not be full text but char like A, D, S). When the grid is databound, the status dropdown value will be selected to the record's status. The user will have the option to change the status of the record by choosing another value in the dropdown. On change, data will be posted back and database will be updated with the new status for the record.

On top, I have the grid enabled for filtering. For this column, the filtering will have the dropdown and when user chooses a particular status, the grid should filter the records to only the records with that status.

I'm not sure how I can do this because I'm just starting on RadGrid. Can anyone help me figure out how to make this possible? I would really appreciate it.

Kind Regards,
JB

[Princy]

Hello,

You can use GridDropDowmColumn for this requirement and when in browser mode, GridDropDownColumn looks and behaves like a standard GridBoundColumn. When in edit mode,  it displays a drop-down control for each edited cell in the column. When you enable 'AllowFilteringByColumn' property of Radgrid , it will show a DropDownList in filter row for GridDropDownColumn.

For more information on DropDownColumn please go through the following documentation.
Column types
Customize/Configure GridDropDownColumn

Thanks,
Princy.

[JB]

Hi Princy,

I did experiment with GridDropDownColumn. But I did not achieve what I was after. I encountered some problems.

1) The filter for the column was a textbox instead of a dropdown.
2) Is there anyway I can customize the data I bind to this column? The status value from the database is char (A, S, D etc.) but I want to display the word like Activated, Suspended, Deactivated etc.

This is the code I used in the grid for the column.

<telerik:GridDropDownColumn DataField="status"
    FilterControlAltText="Filter status column" Groupable="False"
    HeaderText="Status" ListDataMember="status" ListTextField="status"
    ListValueField="status" UniqueName="status">
</telerik:GridDropDownColumn>

I even experimented with FilterTemplate. This is what I did.

<FilterTemplate>
    <telerik:RadComboBox ID="statusFilter" runat="server" Width="100px">
        <Items>
        <telerik:RadComboBoxItem Text="NoFilter" Value="" />
        <telerik:RadComboBoxItem Text="Activated" Value="A" />
        <telerik:RadComboBoxItem Text="Deactivated" Value="D" />
        <telerik:RadComboBoxItem Text="Suspended" Value="S" />
        </Items>
    </telerik:RadComboBox>
</FilterTemplate>

This changed the filter for the column from textbox to combo box. But when value is changed, it didn't do anything. Am I supposed to write additional code to make it work? If so, can you tell me what I must write? I could really use some help.

Kind Regards,
JB

[JB]

Nevermind. I found a very useful link that helped me figure out the customizing works and now it seems to be working well.

http://www.telerik.com/help/aspnet-ajax/radgrid-filter-template.html

Only thing I would like to know additionally is how I can make the Ajax Loading Panel run when the combo box selection is initiated. Or some sign that it is filtering. Currently it's a pause and then the grid refreshes with the filtered results.

[Princy]

Hello,

You could use a RadAjaxManager to ajaxify the grid. On 'OnClientSelectedIndexChanged' event of the RadComboBox, you should invoke the AjaxManager's AjaxRequest and then explicitly show or hide the loading panel on the OnRequestStart and OnRequestEnd client events of the AjaxManager. Here's a help document on how to conditionaly display loading panel over updated control:
Show and hide loading panel explicitly

Thanks,
Princy.

[Brad H]

JB,

Can you show the rest of us how you did this?  The link you posted did not help me.  When I use a GridDropDownColumn, I get a textbox filter and when I use FilterTemplate, nothing shows.  I would like to have a DropDownList for my Filter.  Thank you.

[JB]

Hi Brad,

Let me go step by step so that it will be easy to understand.

When you use a GridDropDownColumn and have a filter, it will by default give a textbox filter. You need to create a FilterTemplate with ComboBox to achieve the dropdown.

<telerik:GridTemplateColumn FilterControlAltText="Filter status column" Groupable="False" DataField="status"
    HeaderText="Status" ReadOnly="True" UniqueName="status"
    HeaderStyle-HorizontalAlign="Center" HeaderStyle-VerticalAlign="Middle" ItemStyle-HorizontalAlign="Center">
    <FilterTemplate>
    <telerik:RadComboBox ID="statusFilter" runat="server"
        OnClientSelectedIndexChanged="Status_SelectedIndexChanged"
        SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("status").CurrentFilterValue %>'
        Width="100px">
        <Items>
        <telerik:RadComboBoxItem Text="NoFilter" Value="" />
        <telerik:RadComboBoxItem Text="Activated" Value="A" />
        <telerik:RadComboBoxItem Text="Deactivated" Value="D" />
        <telerik:RadComboBoxItem Text="Suspended" Value="S" />
        </Items>
    </telerik:RadComboBox>

    <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server">
        <script type="text/javascript">
        function Status_SelectedIndexChanged(sender, args) {
            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
            tableView.filter("status", args.get_item().get_value(), "EqualTo");
        }
        </script>
    </telerik:RadScriptBlock>
    </FilterTemplate>
    <ItemTemplate>
    <%# SetStatusText(Eval("status").ToString()) %>
    </ItemTemplate>
</telerik:GridTemplateColumn>

That is my code for the column. You would notice that I used GridTemplateColumn instead of GridDropDownColumn. This is because I wanted to customize the status display in the column. Otherwise, it would be the same.

Main thing to notice is the FilterTemplate section.

<telerik:RadComboBox ID="statusFilter" runat="server"
    OnClientSelectedIndexChanged="Status_SelectedIndexChanged"
    SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("status").CurrentFilterValue %>'
    Width="100px">
    <Items>
    <telerik:RadComboBoxItem Text="NoFilter" Value="" />
    <telerik:RadComboBoxItem Text="Activated" Value="A" />
    <telerik:RadComboBoxItem Text="Deactivated" Value="D" />
    <telerik:RadComboBoxItem Text="Suspended" Value="S" />
    </Items>
</telerik:RadComboBox>

This code creates the custom dropdown. Since I have standard values, I have not bounded the dropdown to any outside data source. I will explain how I did that later. In this dropdown, what is important is OnClientSelectedIndexChanged and SelectedValue. SelectedValue sets the value of the filter on grid reload so that it won't lose track. The column name in GetColumn should be the column for which you are applying this dropdown filter. OnClientSelectedIndexChanged calls the javascript for this column. The code is this.

function Status_SelectedIndexChanged(sender, args) {
    var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
    tableView.filter("status", args.get_item().get_value(), "EqualTo");
}

The value "status" here must be the column name you have set in your grid. It will compare your column value to the dropdown value and show the filtered results.

This will allow you to create a custom combo box with static values. If you want a dynamic value for the dropdown, do it this way.

<telerik:RadComboBox ID="countryFilter" DataSourceID="EntityDataSource1"
    DataTextField="Country" DataValueField="Country" Height="200px" AppendDataBoundItems="true"
    SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("Country").CurrentFilterValue %>'
    runat="server" OnClientSelectedIndexChanged="SelectedIndexChanged">
    <Items>
        <telerik:RadComboBoxItem />
    </Items>
</telerik:RadComboBox>

This code shows a Combobox that is bound to a DataSource. It requires a DataSource to work.

<asp:EntityDataSource ID="EntityDataSource1" runat="server" ConnectionString="name=NorthwindEntities"
DefaultContainerName="NorthwindEntities" EntitySetName="Customers" Select="distinct it.[Country]">
</asp:EntityDataSource>

A DataSource like this can be bounded to the Combobox.

A server-side code-behind databinding is more complicated. I don't know if that is what you are looking for. I have done that as well so let me know if that is what you are after.

Hope that helped.

[JB]

Hi Princy,

Thank you for the response on Ajax Loading. Had a bit of trouble initially figuring it out but in the end, I managed to implement it.

Now I only have 1 small question. I hope you can help. I have a workaround for the problem (direct binding to datasource which works) but I just want to know for curiosity/learning.

If I want to bind the data for the RadComboBox from server side in Code-Behind (.cs), where should I do it?

If I try and put it in the Page_Load, it doesn't seem to find the RadComboBox control. I experimented with Grid's Onload but that clashes with the data binding of the grid on postback (cause the filter dropdown is not available during Page PreRender).

I came across this forum post which helped me a bit.
http://www.telerik.com/community/forums/aspnet-ajax/grid/set-datatextfield-of-radcombobox-in-filtertemplate-of-griddropdowncolumn-serverside.aspx#1163395

But I encountered a problem there. If I enable  AppendDataBoundItems="true" in the RadComboBox, it seems to data bind the dataset twice. I only want it to bind it once. If I disable it, then it will bind all the data and works fine. But it won't allow any other items in the ComboBox. I want it to have a NoFilter item as the default item so that it will not be filtered on first load.

I tried to add a new RadComboBoxItem after I bounded the data to RadComboBox. But that item doesn't show up in the dropdown. For some reason, it seems to databind again and only the data form the dataset remains.

Hope you can help me understand by explaining what I did wrong here. I would really appreciate it.

This is my code for ItemCreated.

protected void gridList_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem item = (GridFilteringItem)e.Item;
        RadComboBox filterCombo = (RadComboBox)item["giftCatName"].FindControl("categoryFilter");

        #region Category Set

        GiftCategory giftCategory = new GiftCategory();
        DataSet dataSet = giftCategory.GetGiftCategories();

        DataView dataView = dataSet.Tables[0].DefaultView;
        dataView.Sort = "name";
        dataView.RowFilter = "Status = 'A'";

        filterCombo.DataSource = dataView;
        filterCombo.DataBind();

        filterCombo.Items.Insert(0, new RadComboBoxItem("No Filter", ""));
        filterCombo.SelectedIndex = 0;

        #endregion Category Set
    }
}

Thanks
JB

[Princy]

Hello JB,

Try to populate the RadComboBox in ItemDataBound event and check whether it resolves the issue.

C#:

protected void gridList_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridFilteringItem)
    {
        GridFilteringItem item = (GridFilteringItem)e.Item;
        RadComboBox filterCombo = (RadComboBox)item["giftCatName"].FindControl("categoryFilter");


        GiftCategory giftCategory = new GiftCategory();
        DataSet dataSet = giftCategory.GetGiftCategories();

        DataView dataView = dataSet.Tables[0].DefaultView;
        dataView.Sort = "name";
        dataView.RowFilter = "Status = 'A'";

        filterCombo.DataSource = dataView;
        filterCombo.DataBind();

        filterCombo.Items.Insert(0, new RadComboBoxItem("No Filter", ""));
        filterCombo.SelectedIndex = 0;

    }
}

Thanks,
Princy.

[JB]

Hi Princy,

I tried that. Didn't work. It binds correctly on initial load. But when I select something in the combobox, the postback has a problem with the gridList's data binding. This is the error I get.

"Selection out of range. Parameter name: value"

I bind the gridTable with the datasource in Page's OnPreRender. So the ComboBox may not have any value at that point and that may cause this problem.

Any solutions?

[Tsvetina]

Hi,

If I understand you correctly you bind the grid on Page PreRender which is not recommended when you have filtering/paging/sorting in it. You should better use advanced data-binding through the NeedDataSource event or a declaratively assigned datasource control.

Best wishes,
Tsvetina
the Telerik team