How to bind javascript function or call during webgrid binding?

Question

I have a web grid which looks like following with more than 1000 records.

@{
var grid = new WebGrid(canPage: true, rowsPerPage: @Model.PageSize, canSort: true, ajaxUpdateContainerId: "suppListGrid");
grid.Bind(@Model.SearchResultSupplierViewModels, rowCount: @Model.TotalPageRows, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);

@grid.GetHtml(tableStyle: "webGrid",
footerStyle:"pp-pagenumber",
            htmlAttributes: new {id="suppListGrid"},
            columns: grid.Columns(
            grid.Column(format: (item) => @Html.Raw("<div class='row panelLawfirmresultbox'><span class='blue'>Panel Partnership Rating ("+item.PanelRating+"): </span><span class='panelStars'>"+"2.5"+"</span></div>"))
     )) 
} 

And my above webgrid have a rating span which used to show the panel rating in the form of stars. In order to display panel rating stars i have used the following way.

<script>
$(document).ready(function () {
    $('span.panelStars').panelStars();
    });
$.fn.panelStars = function () {
    return $(this).each(function () {
        $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
    });
}
</script>

At present during the first page load everything works fine, showing the correct starring for my first 10 records. But when i click on next page, starring function not functioning.

When i checked javascript not working in MVC webgrid after sorting or paging link, the author mentioned that On sorting the table content get refresh, so events has to be delegated.

So in my document ready i added the following script like

$(document).on({
        mouseenter: function () {
            $('span.panelStars').panelStars();
            $('span.clientStars').clientStars();

            $.fn.panelStars = function () {
                return $(this).each(function () {
                    $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
               });
            }
}, '#suppListGrid tr');

Now the starring came back but with full starring, but it will only come while mouse comes over tr tag.

But what i need is to happen the same on my page click. How do i do it?

Answer 1

Ho i resolved my problem by adding a small line of code with my webgrid control.

I added the following line of code in webgrid control

ajaxUpdateCallback: "getStars"

and created getStars() function i declared like this

function getStars()
{
    $('span.panelStars').panelStars();
    $('span.clientStars').clientStars();

            $.fn.panelStars = function () {
                return $(this).each(function () {
                    $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
                });
            }

            $.fn.clientStars = function () {
                return $(this).each(function () {
                    $(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
                });
            }
}