Display a LinearGauge in a Popover When Clicking on a Grid Cell

Environment

Product Version	2022.2.621
Product	Progress® Telerik® UI for ASP.NET Core Grid

Description

How can I display a Popover with a LinearGauge that renders a Grid cell value when the user clicks on it?

Solution

1. Add a custom class to the Grid columns that will display the LinearGauge when a specified cell is clicked.

       columns.Bound(p => p.Freight).HtmlAttributes(new { @class = "lGaugeCol"});
   

2. Create a Popover component and handle its Show and Hide events.

       @(Html.Kendo().Popover()
           .For("#grid") //Specify the Name() of the Grid.
           .Filter("tr td.lGaugeCol") //Filter by the table data elements with the custom class.
           .Animation(an => an.Open(op => op.Duration(0)).Close(cl => cl.Duration(0)))
           .ShowOn(PopoverShowOn.Click)
           .HeaderHandler("getHeader")
           .BodyHandler("getBody")
           .Width(300)
           .Events(ev=>ev.Show("onShow").Hide("onHide")) //Handle the Show/Hide events of the Popover.
       )
   
   

3. Pass the header and the body of the Popover by using JavaScript functions.

       <script>
           var clickedDataItem;
           function getHeader(e){
               var grid = $("#grid").getKendoGrid(); //Get a reference of the Grid.
               var dataItem = grid.dataItem($(event.target).closest("tr")); //Select the dataItem of the Grid row.
               clickedDataItem = dataItem; //Store the current dataItem.
               return "Order " + dataItem.OrderID + " details"; //Return the text of the Popover header.
           }
   
           function getBody(e){
               var html = "<div id='gauge'></div>"; //Create an element to initialize the LinerGauge widget.
               return html;      
           }
       </script>
   
   

4. Initialize the LinearGauge in the Show event handler of the Popover.

       function onShow(e){
           createGauge(clickedDataItem.Freight); //Pass the value of the Model property to the createGauge() function.
       }
   
       function createGauge(gaugeValue){
           $("#gauge").kendoLinearGauge({ //Initialize the LinearGauge widget.
               scale:{
                   vertical: false,
                   min:0,
                   max:400
               },
               pointer: [{
                   value: gaugeValue //Set the value based on the current dataItem.
               }]
           });
       }
   
   

5. Destroy the LinearGauge in the Hide event handler of the Popover.

       function onHide(e) {
           var gauge = $("#gauge").data("kendoLinearGauge");
           gauge.destroy();
       }
   

For the complete implementation of the suggested approach, refer to this REPL example.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Display a LinearGauge in a Popover When Clicking a Grid Cell
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base