How to use Gauge inside the Grid

[Alex]

Hi.
I want to display the gauge as one of the column in the RADgrid.

Instead of showing the performance in number, i want to display the guage.
And i want to get the value from datasource.
Is that possible...?
If yes, pls help me by giving the solution.

thanks
--Alex

[Danail Vasilev]

Hi Alex,

You can use the GridTemplateColumn of RadGrid, in order to integrate the RadGauge control with the RadGrid. Then you can use the RadGrid's OnItemDataBound event, in order to get the respective values from the datasource for the particular row of the RadGrid and assign them to the RadGauge. For example:
ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" OnItemDataBound="OnItemDataBound1">
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn UniqueName="Chart" AllowFiltering="false" HeaderText="RadGauge Column">
                <ItemTemplate>
                    <telerik:RadRadialGauge ID="RadRadialGauge1" Width="100" Height="100" runat="server">
                    </telerik:RadRadialGauge>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadGrid1.DataSource = GetData();
    RadGrid1.DataBind();
}

protected void OnItemDataBound1(object sender, GridItemEventArgs e)
{
    if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
    {
        GridDataItem item = e.Item as GridDataItem;
        DataRowView currentRow = (DataRowView)item.DataItem;
        decimal currValue = decimal.Parse(currentRow.Row["myValue"].ToString());
        RadRadialGauge radialGauge1 = (RadRadialGauge)item.FindControl("RadRadialGauge1");
        radialGauge1.Pointer.Value = currValue;
    }
}

protected DataTable GetData()
{
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("ID"));
    tbl.Columns.Add(new DataColumn("myValue"));

    tbl.Rows.Add(new object[] { 1, 10 });
    tbl.Rows.Add(new object[] { 2, 55 });
    tbl.Rows.Add(new object[] { 3, 25 });
    tbl.Rows.Add(new object[] { 4, 83 });

    return tbl;
}

Note that the RadGauge is not a databound control, however, it can be created programmatically with the respective data from the RadGrid's datasource. You can also find useful Programmatic Creation help article related on how to create RadGauge programmatically, as well as Grid - Chart in GridTemplateColumn online demo, related on how to put a RadHtmlChart control inside RadGrid.

Greetings,
Danail Vasilev
the Telerik team

[Alex]

Hi Danail Vasilev,

Thanks,

I did as you said and it worked for me.
But I am using hierarchical grid. I am not able to expand the details table in the grid.

here is my code.
ASPX:

<telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn column" HeaderText="<%$ Resources:Strings, Progress%>"

                                UniqueName="StatusIndicator">

                                <ItemTemplate>

                                    <center>

                                        <telerik:RadLinearGauge runat="server" ID="RadLinearGauge1" Scale-Vertical="false"

                                            Scale-MajorTicks-Visible="false" Scale-Labels-Visible="false" Width="120px" Height="20px">

                                            <Pointer Shape="BarIndicator">

                                                <Track Opacity="0.4" />

                                            </Pointer>

                                            <Scale Min="0" Max="100">

                                                <Ranges>

                                                    <telerik:GaugeRange Color="#c20000" From="0" To="100" />

                                                </Ranges>

                                            </Scale>

                                        </telerik:RadLinearGauge>

                                    </center>

                                </ItemTemplate>

                                <HeaderStyle Width="100px" HorizontalAlign="Center" />

                            </telerik:GridTemplateColumn>

Code behind:

protected void OnItemDataBound1(object sender, GridItemEventArgs e)
   {
       if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
       {
           GridDataItem item = e.Item as GridDataItem;
           DataRowView currentRow = (DataRowView)item.DataItem;
           decimal currValue = decimal.Parse(currentRow.Row["pcpc"].ToString());
           RadLinearGauge radialGauge1 = (RadLinearGauge)item.FindControl("RadLinearGauge1");
           radialGauge1.Pointer.Value = currValue;
       }
   }

Thanks
--Alex

[Danail Vasilev]

Hi Alex,

You can find the modified Grid - Declarative Relations online demo in the attached archive, showing how to set the pointer value of a RadGauge that is inside an hierarchical RadGrid. Said shortly:

• The RadGauge is put inside an ItemTemplate of a GridTemplateColumn in the second nested DetailTables.
• The name property of the GridTableView that holds the Gauge is set (i.e. Name="Orders") as well as the UniqueName property of the GridTemplateColum (i.e. UniqueName="GaugeColumn") so that the Gauge can be easily accessed.
• The field from the datasource that will be used for the Gauges' pointer values is included in the DataKeyNames property(i.e. DataKeyNames="OrderID, Quantity").
• Gauge's pointer values are set on ItemDataBound event.

For example:

ASPX:

<DetailTables>
                <telerik:GridTableView Name="Orders" DataKeyNames="OrderID, Quantity" DataSourceID="SqlDataSource3"
                    Width="100%" runat="server">
                    <ParentTableRelation>
                        <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID"></telerik:GridRelationFields>
                    </ParentTableRelation>
                    <Columns>
                        <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                            DataField="UnitPrice" UniqueName="UnitPrice">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn UniqueName="GaugeColumn">
                            <ItemTemplate>
                                <telerik:RadRadialGauge ID="RadRadialGauge1" runat="server" Width="100" Height="100">
                                </telerik:RadRadialGauge>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                            DataField="Quantity" UniqueName="Quantity">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                            DataField="Discount" UniqueName="Discount">
                        </telerik:GridBoundColumn>
                    </Columns>
                    <SortExpressions>
                        <telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>
                    </SortExpressions>
                </telerik:GridTableView>
            </DetailTables>

C#:

protected void Page_Load(object sender, EventArgs e)
{
    RadGrid1.ItemDataBound += new GridItemEventHandler(RadGrid1_ItemDataBound);
}

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem && e.Item.OwnerTableView.Name == "Orders")
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        Decimal quantity = Decimal.Parse(dataItem.GetDataKeyValue("Quantity").ToString());
        RadRadialGauge gauge = dataItem["GaugeColumn"].Controls[1] as RadRadialGauge;
        gauge.Pointer.Value = quantity ;
    }
}

You can also find useful this and this help articles.

Kind regards,
Danail Vasilev
the Telerik team

[Alex]

Hi Danail Vasilev,

Thanks,
--Alex

[Nikhil]

Hi Danial,

I have used RadLinearGauge control inside DetailTables of rad grid. but whenever DetailDatabind event is called RadLinearGauge's range was clear exclude clicked detailtable grid.

I have also attched my code here.

Can you please see and let me know what the issue with RadLinearGauge with Detail Table.

[Danail Vasilev]

Hi Alex,

I have tried to reproduce the mentioned issue by modifying the VS example from my previous post, so that its logic approaches yours but to no avail. Could you please have a look at the provided video and then tell me what I am missing.

Could you also try to reproduce the issue with the attached VS example and then paste the changes you have made, so that I can proceed further with the investigation?

Regards,
Danail Vasilev
Telerik