How to use Gauge inside the Grid

7 posts, 0 answers
  1. Alex
    Alex avatar
    15 posts
    Member since:
    Apr 2011

    Posted 14 Apr 2013 Link to this post

    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
  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 15 Apr 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alex
    Alex avatar
    15 posts
    Member since:
    Apr 2011

    Posted 17 Apr 2013 Link to this post

    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
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 22 Apr 2013 Link to this post

    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.
  6. Alex
    Alex avatar
    15 posts
    Member since:
    Apr 2011

    Posted 22 Apr 2013 Link to this post

    Hi Danail Vasilev,

    Thanks,
    --Alex
  7. Nikhil
    Nikhil avatar
    1 posts
    Member since:
    Jul 2013

    Posted 25 Jul 2013 Link to this post

    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.

  8. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 30 Jul 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017