Rating Control In The Grid

[Jeffrey Stone]

How can I use Rating control in a ASP NET MVC Grid Column?

Regards, Jeff

[Karthick Kuppusamy]

Hi Jeffrey,   

  

Thanks for contacting Syncfusion support.   

   

We can render the ejRating control through ‘Edit Template’ feature of the Grid.   

Edit Template has three functions.   

  

•Create – It is used to create the control at the time of initializing.  

•Read –  It is used to read the input value at the time of saving.  

•Write – It is used to assign the value to control at the time of editing.  

  

Please refer to the below code example for further details.   

    

   

.Columns(col =>   

        {   

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();   

            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();   

            col.Field("EmployeeID").HeaderText("Rating").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).TextAlign(TextAlign.Right).Width(175).Add();   

            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(175).Format("{0:C}").Add();   

            col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();   

               

        }))    

   

  <script type="text/javascript">     

              function create() {   

                  return $("<input>"); // Create the input element   

              }   

   

    function write(args) {   

        var gridId = args.element.parents(".e-grid").attr("id");   

        args.element.ejRating({ value: args.rowdata !== undefined ? args.rowdata["EmployeeID"] : "", modelType: "picker" }); // Render the rating control   

        $("#" + gridId + "Color_Presets").css("display", "none");   

    }   

   

    function read(args) {   

               

        var a = $("#FlatGridEmployeeID").ejRating("instance");   

        return a.getValue(); // Read the rating value   

    }    

    </script>   

  

   

   

Please refer to the below UG Documentation and online demo link to know more about EditTemplate in Grid.   

    

UG Documentation:  http://help.syncfusion.com/aspnetmvc/grid/editing#cell-edit-template.   

   

Online Demo: http://mvc.syncfusion.com/demos/web/grid/edittemplate.   

   

    

We have created a sample which can be downloaded from the below link.   

http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication91361071623.zip.   

   

If we have misunderstood your requirement, please share more details about your requirement.   

Regards,   

K. Karthick