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

Environment

Product Version 2022.2.621
Product Progress® Telerik® UI for ASP.NET MVC 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 MVC Grid Resources

See Also

In this article