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

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"});
```

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

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>

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.
            }]
        });
    }

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.

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

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also

Getting Started

Support Resources

Community