New to Telerik UI for ASP.NET MVC? Download free 30-day trial

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


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


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


  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.

            .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)))
            .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.

            var clickedDataItem;
            function getHeader(e){
                var grid = $("#grid").getKendoGrid(); //Get a reference of the Grid.
                var dataItem = grid.dataItem($("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;      
  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.
                    vertical: false,
                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");

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

More ASP.NET MVC Grid Resources

See Also

In this article