Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
190
Grids and Gauges
posted

Is it possible to build a gauge for every row returned for a webgrid? I am going to have a webgrid with only a few rows but I would like each row to have a simple gauge where the values of each gauge are controlled by values from columns of the same row?

Is there any samples running around?

 

Thanks,

Marty

Parents
No Data
Reply
  • 14517
    Offline posted

    Hello,

    One way to do this would be to place the Gauge in the templated column in a WebDataGrid and use the client side ExitedEditMode event of the Grid to get the new value entered and call the refresh method on the Gauge to update the Guage in the grid.

    For example, assuming you have a Linear Gauge in the third cell of a WebDataGrid

      <ig:TemplateDataField Key="GuageView">
                    <ItemTemplate>
                        <igGauge:UltraGauge ID="UltraGauge1" runat="server"
                            onasyncrefresh="UltraGauge1_AsyncRefresh">
                            <Gauges>....

     the following client side code will save the new value entered in the Grid into a hidden field, get a reference to the Guage control for that row and then call refresh on the Gauge:

    function WebDataGrid1_CellEditing_ExitedEditMode(sender, eventArgs)
    {
     ///<summary>
     ///
     ///</summary>
     ///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>
     ///<param name="eventArgs" type="Infragistics.Web.UI.EditModeEventArgs"></param>

        //Add code to handle your event here.
        // Get the current cell that was edited                            
        var cell = eventArgs.getCell();
        var gauge_cell = cell.get_row().get_cell(2);
       
        // Get the element for the gauge in the templated column
        var gauge = gauge_cell.get_element().children[0];
       
        // Use the CSOM utility function to get a reference to the Gauge
        var myGauge = ig_getWebGaugeById(gauge.id);

        // Pass the new value in the Hidden Field
        var hdn = $get("HiddenField1");
        var val = cell.get_value();
        hdn.value = val;

        // call Refresh on the Gauge
        myGauge.refresh();
      
    }

    Finally, the AsyncRefresh will be used on the server to update the Gauge:

     protected void UltraGauge1_AsyncRefresh(object sender, Infragistics.WebUI.UltraWebGauge.RefreshEventArgs e)
        {

            UltraGauge ug = (UltraGauge)sender;
            LinearGauge lg = (LinearGauge)ug.Gauges[0];
            lg.Scales[0].Markers[0].Value = HiddenField1.Value;
       
        }

    Please let me know if you have any questions,

    Thanks,

    Valerie

     

     

     

Children