We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

jQuery star-rating on ej grid Paging not working

Thread ID:

Created:

Updated:

Platform:

Replies:

123546 Mar 29,2016 05:53 AM UTC Mar 30,2016 01:19 PM UTC ASP.NET MVC 1
loading
Tags: Grid
Mithun Revankar
Asked On March 29, 2016 05:53 AM UTC

I'm using a modified version of the jQuery star rating . However when I  click the page next or page back the jQuery function is only tied to the page load so I lose the star rating on my grid items and am left with check box. 

Can someone help me recall the jQuery after the Pagination is used to place the stars back on my rating control. The original  jquery rating function is as follows

   function Rating () {
        $(".ratting-item :input").each(function (e) {
            var id = this.id;
            var IdValue = this.value.trim();
            RatingPoint = id.substr(id.length - 1, 1);
            if (IdValue == RatingPoint) {
                $(this).prop('checked', true);
            }
        });

        $('.ratting-item').rating(function (vote, event) {
            var anchor = $(event.currentTarget),
                 pid = anchor.closest(".ratting-item").data("pid"),
                 url = $('#ratingURL').val();
            var Module = $('#FormType').val();
            var ModuleId = pid.substr(0, pid.length - 2);
            var RatingId = pid.substr(pid.length - 1, 1);

            // show message while doing the database round trip
            $('.ratting-item[data-pid=' + pid + ']')
                .next()
                .text("Placing your vote...");
            $.ajax({
                url: url,
                type: "GET",
                data: { rate: vote, id: RatingId, Module: Module, ModuleId: ModuleId },
                success: function (data) {
                    if (data.success) {
                        //// all went well, here you can say Thank you
                        $('.ratting-item[data-pid=' + pid + ']')
                            .next()
                            .text("Successfully Rated...");
                        //alert("Successfully Rated...");
                    }
                    else {
                        // There must be an Exception error, let's show it
                        $('.ratting-item[data-pid=' + pid + ']')
                            .next()
                            .text("Something went wrong...");
                        //alert("Something went wrong...");
                    }
                },
                error: function (err) {
                    // the call thrown an error
                    $('.result').text(err);
                },
                complete: function () {
                    //$(".loading").hide();
                }
            });
        });
    }

* i am using template field for rating column The original  Form coding is as follows

<script type="text/x-jsrender" id="RatingTemplate">
    <div class="ratting-item" data-pid="{{:Id}}_{{:Ratings.Id}}">
    <input class="rating" name="vote" type="checkbox" value="1" id="{{:Id}}_rd1_{{:Ratings.RatePoint}}"  />
    <input class="rating" name="vote" type="checkbox" value="2" id="{{:Id}}_rd2_{{:Ratings.RatePoint}}" />
    <input class="rating" name="vote" type="checkbox" value="3" id="{{:Id}}_rd3_{{:Ratings.RatePoint}}" />
    <input class="rating" name="vote" type="checkbox" value="4" id="{{:Id}}_rd4_{{:Ratings.RatePoint}}"/>
    <input class="rating" name="vote" type="checkbox" value="5" id="{{:Id}}_rd5_{{:Ratings.RatePoint}}"/>
</div>
<span class="result"></span>
   @* <div class="col-lg-12">
        @Html.Partial("_RatingList", new ViewDataDictionary { { "Ratings", ViewBag.Ratings }, { "CustomerId", "{{:Id}}" } })
    </div>*@
</script>


<div class="wrapper wrapper-content animated fadeInRight gridPadding-top">
    <div class="row">
        <div class="col-lg-12 gridPadding">

            <div class="ibox float-e-margins">
              
                <div class="ibox-content ibox-content-border gridPadding">

                    @(Html.EJ().Grid<CRM.ViewModel.OpportunityVM>("FlatGrid")
         .Datasource((IEnumerable<object>)ViewBag.OpportunityList)
         .AllowSorting()
         .AllowPaging().PageSettings(p => { p.PageSize(15); })
         .ShowColumnChooser()
         .AllowFiltering()
         .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
         .AllowSearching()
         .AllowSelection()
         
                 .ToolbarSettings(toolBar => toolBar.ShowToolbar(true).ToolbarItems(items =>
                        {
                            items.AddTool(ToolBarItems.Add);
                            //items.AddTool(ToolBarItems.Edit);
                         //   items.AddTool(ToolBarItems.Delete);
                            items.AddTool(ToolBarItems.ExcelExport);
                            items.AddTool(ToolBarItems.WordExport);
                            items.AddTool(ToolBarItems.PdfExport);
                            items.AddTool(ToolBarItems.PrintGrid);
                        }))                          
                  .Columns(col =>
                    {
                        col.Field("Id").Visible(false).HeaderText("Id").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(10).Add();
                        col.HeaderText("Rating").Template(true).TemplateID("#RatingTemplate").TextAlign(TextAlign.Center).Width(70).Add();
                        col.Field("Title").HeaderText("Title").TextAlign(TextAlign.Left).Width(100).Add();
                        col.Field("EstimatedDate").HeaderText("Date").TextAlign(TextAlign.Left).Format("{0:dd-MMM-yy}").Width(50).Add();
                        col.Field("CustomerName").HeaderText("Customer").TextAlign(TextAlign.Left).Width(95).Add();
                        col.Field("ProductGroupName").HeaderText("Product Group").TextAlign(TextAlign.Left).Width(70).Add();
                        col.Field("EstimatedValue").HeaderText("Estimated Value").TextAlign(TextAlign.Right).Width(70).Add();
                        col.Field("OwnerName").HeaderText("Owner").TextAlign(TextAlign.Left).Width(60).Add();
                        col.Field("StatusName").HeaderText("Status").TextAlign(TextAlign.Left).Width(40).Add();
                        col.Field("Ratings.RatePoint").Visible(false).HeaderText("RatePoint").TextAlign(TextAlign.Left).Add();
                    }))
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" value="@ViewBag.Type" id="FormType" />
<input type='hidden' value='@Url.Action("RateModule", "General")' id="ratingURL" />



<script>

    $(document).ready(function (event) {
        var FormType = '@ViewBag.Type';

        $("#FlatGrid_add").click(function (e) {
            // alert("dddddddddd")
            window.location.rel='nofollow' href = './Create/' + 0 + '?Type=' + FormType;
        });

        $("#FlatGrid").ejGrid({
            recordDoubleClick: function (args) {
                var Id = args.data.Id;
                window.location.rel='nofollow' href = './Details/' + Id + '?Type=' + FormType;
            }
        });

      
    });
</script>


<script>
 
        $(function () {
          
             Rating();

            $('.e-filter').click(function () {
                Rating();
            });


            $(".e-link").on('click', function (e) {
               e.preventDefault();
                Rating();
            });


        });
</script>

  

Venkatesh Ayothi Raman [Syncfusion]
Replied On March 30, 2016 01:19 PM UTC

Hi Mithun,

Thanks for contacting Syncfusion Support.

We are able to reproduce the issue and achieved your requirement using “actionComplete” event. This event gets triggered for every grid action success event. We can get the request type and check the condition in this event. Please refer to the code example and Help document,
Code example:

<Grid>

@(Html.EJ().Grid<RatingCotrolingrid.OrdersView>("FlatGrid")

         .Datasource((IEnumerable<object>)ViewBag.datasource)

         .AllowSorting()

         .AllowPaging().PageSettings(p => { p.PageSize(15); })

         .ShowColumnChooser()

         .AllowFiltering()

         .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })

         .AllowSearching()

         .AllowSelection()


                 .ToolbarSettings(toolBar => toolBar.ShowToolbar(true).ToolbarItems(items =>

                        {

                            items.AddTool(ToolBarItems.Add);

                            //items.AddTool(ToolBarItems.Edit);

                            //   items.AddTool(ToolBarItems.Delete);

                            items.AddTool(ToolBarItems.ExcelExport);

                            items.AddTool(ToolBarItems.WordExport);

                            items.AddTool(ToolBarItems.PdfExport);

                            items.AddTool(ToolBarItems.PrintGrid);

                        }))

                        .ClientSideEvents(eve=>eve.ActionComplete("actionComplete"))


<action complete event>

function actionComplete(args) {


       

        if (args.requestType == "paging") {

            Rating();//Again call the rating function while pagination.

        }

    }


Help document: http://help.syncfusion.com/js/api/ejgrid#events:actioncomplete

If you still face the same issue, please provide the more details of them.

Regards,
Venkatesh Ayothiraman.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;