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

Image Button and Status Indicator

1 Answer 221 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 21 Mar 2014, 09:59 PM
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
 

 

 

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 26 Mar 2014, 03:16 PM
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
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or