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

How to use Gauge inside the Grid

6 Answers 257 Views
Gauge
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 14 Apr 2013, 09:03 AM
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

6 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 15 Apr 2013, 10:53 AM
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
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.
0
Alex
Top achievements
Rank 1
answered on 17 Apr 2013, 07:42 AM
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
0
Danail Vasilev
Telerik team
answered on 22 Apr 2013, 06:27 AM
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
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.
0
Alex
Top achievements
Rank 1
answered on 22 Apr 2013, 11:59 AM
Hi Danail Vasilev,

Thanks,
--Alex
0
Nikhil
Top achievements
Rank 1
answered on 25 Jul 2013, 01:49 PM
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.

0
Danail Vasilev
Telerik team
answered on 30 Jul 2013, 12:46 PM
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
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 the blog feed now.
Tags
Gauge
Asked by
Alex
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Alex
Top achievements
Rank 1
Nikhil
Top achievements
Rank 1
Share this question
or