Changing row color from script

[Paul]

Hi there,

I am using the MVC Grid control and am trying to update my selected rows background color from an ajax callback outside the general grid setup.

I can confirm that I do get the row object back, but am not sure if it's related to the HTML object in any way.

I can change the row colors in the standard rowDataBound event, however I am needing to update selected rows live after another action on my page

I am using the details below but to no avail. Any help would be greatly appreciated

                           

 var row = grid.getRowObjectFromUID(grid.getSelectedRows()[i].getAttribute("data-uid"));

 $(row).css("background-color", "red");

[Rajapandi Ravi]

Hi Paul, 

Greetings from syncfusion support 

Based on your query we understand you want to send the grid selected records to the server and when the ajax get success you like to change the selected rows background color.  

Based on your requirement we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

Index.cshtml 

 

<script> 

    function ajaxcall(args) { //button click 

        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

        var selectedRecords = grid.getSelectedRecords(); //get the selected records 

        var row = JSON.stringify({ rowData: selectedRecords }); 

        var ajaxObj = new ej.base.Ajax(); 

        ajaxObj.type = 'POST'; 

        ajaxObj.contentType = 'application/json'; 

        ajaxObj.url = '/Home/SelectRecord'; 

        ajaxObj.data = row; 

        ajaxObj.send().then(function (value) { 

            var parsed = ej.data.DataUtil.parse.parseJson(value); 

            for (var i = 0; i < grid.getRows().length; i++) { 

                var rowInfo = grid.getRowInfo(grid.getRows()[i]); //we are using getRowInfo() method to get the row details 

                for (var j = 0; j < parsed.length; j++) { 

                    if (rowInfo.rowData.OrderID === parsed[j].OrderID) { 

                        rowInfo.row.style.backgroundColor = "red"; //changing background color to the selected row  

                    } 

                } 

            } 

        }); 

    } 

</script> 

 

HomeController.cs 

 

public ActionResult SelectRecord(SelectedModel row) 

        { 

            var id = row.rowData; 

            return Json(id); 

        } 

 

        public class SelectedModel 

        { 

            public List<Gridcolumns> rowData { get; set; } 

        } 

 

        public class Gridcolumns 

        { 

            public int? OrderID { get; set; } 

            public string CustomerID { get; set; } 

            public string ShipName { get; set; } 

            public string ShipCity { get; set; } 

            public string ShipCountry { get; set; } 

            public int? SerialNumber { get; set; } 

 

        } 

Sample: https://www.syncfusion.com/downloads/support/directtrac/166322/ze/166322-412690363.zip 

Regards,
Rajapandi R 

[Paul]

Thank you for the assistance, works perfectly.

Great platform, keep up the amazing work!

[Rajapandi Ravi]

Hi Paul, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R