Image Button and Status Indicator

[Michael]

I am trying to get a gridview to display a clickable icon that shows the current status of the gridview item which can be sorted and filtered. When clicked the status image should toggle between active / Inactive / Unknown images and update the appropriate item's status in the DB(immediately or after a save changes button is pressed, either way). The DB stores the status as an int where 0 = inactive, 1 = active, and any other number is unknown.  The radGrid uses an objectDataSource to access the DB which contains the int as 'Status'.

I tried to use an itemTemplate With a radButton with a buttonType of ToggleButton, a ToggleType of CustomToggle And three toggleStates (one for each status),  while the toggling between the images worked, I can't seem to bind original(default) toggleState to the 'Status' value, and being able to sort/filter based on that. 

.aspx:

01.<telerik:RadGrid ID="InvQryList" runat="server" AllowFilteringByColumn="True"
02.            AllowSorting="True" AutoGenerateDeleteColumn="True" DataSourceID="InvQryDS"
03.            Skin="Windows7">
04.            <ClientSettings EnableRowHoverStyle="True">
05.            </ClientSettings>
06.            <MasterTableView AutoGenerateColumns="False" DataSourceID="InvQryDS" FilterExpression="(it.Active != 0)">
07.              <Columns>
08.                ... Other Columns ...
09.                <telerik:GridTemplateColumn HeaderText="Active Toggle" DataField="Active">
10.                 <ItemTemplate>
11.                  <telerik:RadButton ID="ActiveToggle" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle" AutoPostBack="false"
12.                   Width="16px" Height="16px">
13.                  <ToggleStates>
14.                    <telerik:RadButtonToggleState Value="1" ImageUrl="img/spheres/green-16x16x32.png" />
15.                    <telerik:RadButtonToggleState Value="0" ImageUrl="img/spheres/red-16x16x32.png" />
16.                    <telerik:RadButtonToggleState Value="-1" ImageUrl="img/spheres/grey-16x16x32.png" />
17.                  </ToggleStates>
18.                  </telerik:RadButton>
19.                 </ItemTemplate>
20.                </telerik:GridTemplateColumn>
21.              </Columns>
22.            </MasterTableView>
23.          </telerik:RadGrid>

Any Help would be Great
 

 

 

[Konstantin Dikov]

Hello Michael,

Thank you for contacting Telerik Support.

I have gone through your exact requirements and  for binding the toggle state you should handle the server-side ItemDataBound event of the grid, get reference to the RadButton and depending on the Status value to select the corresponding RadButtonToggleState:

protected void InvQryList_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = e.Item as GridDataItem;
        RadButton button = item["ActiveColumn"].FindControl("ActiveToggle") as RadButton;
        int activeValue = (item.DataItem as CustomObject3).Status;
        foreach (RadButtonToggleState toggleState in button.ToggleStates)
        {
            if (int.Parse(toggleState.Value) == activeValue)
            {
                toggleState.Selected = true;
            }
        }
    }
}

*Please note that in the above example, "ActiveColumn" is the UniqueName I have set for the GridTemplateColumn and the CustomObject3 is the class that I have tested on my end (so you will need to change it accordingly).

However, having the RadButton in the ItemTemplate will not allow you to perform any updates in the database, so for such requirement, the EditItemTemplate should be used and the toggle should be handled while the item is opened for editing. Following is the ItemDataBound handler for such scenario:

protected void InvQryList_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = e.Item as GridDataItem;
        Image button = item["ActiveColumn"].FindControl("ToggleImage") as Image;
        int activeValue = (item.DataItem as CustomObject3).Status;
        switch (activeValue)
        {
            case -1:
                button.ImageUrl = "img/spheres/grey-16x16x32.png";
                break;
            case 0:
                button.ImageUrl = "img/spheres/red-16x16x32.png";
                break;
            case 1:
                button.ImageUrl = "img/spheres/green-16x16x32.png";
                break;
            default:
                break;
        }
    }

    if (e.Item is GridEditableItem && (e.Item.IsInEditMode || (sender as RadGrid).MasterTableView.IsItemInserted))
    {
        GridEditableItem editableItem = e.Item as GridEditableItem;
        RadButton button = editableItem["ActiveColumn"].FindControl("ActiveToggle") as RadButton;
        int activeValue = (editableItem.DataItem as CustomObject3).Status;
        foreach (RadButtonToggleState toggleState in button.ToggleStates)
        {
            if (int.Parse(toggleState.Value) == activeValue)
            {
                toggleState.Selected = true;
            }
        }
    }
}

And here is the markup:

<MasterTableView AutoGenerateColumns="False">
    <Columns>
        <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
        <telerik:GridTemplateColumn UniqueName="ActiveColumn" HeaderText="Active Toggle" DataField="Active"
            HeaderStyle-Width="100px" SortExpression="Status">
            <ItemTemplate>
                <asp:Image ID="ToggleImage" runat="server" />
            </ItemTemplate>
            <EditItemTemplate>
                <telerik:RadButton ID="ActiveToggle" runat="server" ButtonType="ToggleButton" ToggleType="CustomToggle"
                    AutoPostBack="false" Width="16px" Height="16px">
                    <Togglestates>
                             <telerik:RadButtonToggleState Value="1" ImageUrl="img/spheres/green-16x16x32.png" />
                             <telerik:RadButtonToggleState Value="0" ImageUrl="img/spheres/red-16x16x32.png" />
                             <telerik:RadButtonToggleState Value="-1" ImageUrl="img/spheres/grey-16x16x32.png" />
                    </Togglestates>
                </telerik:RadButton>
            </EditItemTemplate>
        </telerik:GridTemplateColumn>
    </Columns>
</MasterTableView>

Finally, when the Update button is clicked, you should get reference to the button and get the selected RadButtonToggleState in order to update the value.

Please let me know if further assistance is needed on this matter.


Regards,
Konstantin Dikov
Telerik