Change color of added or updated jQuery DataTable row using jQuery in ASP.Net MVC

Richa

SOLVED CLOSED ACTIVE ANSWERED
User: Richa
Posted: on Sep 29, 2020 04:17 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 20010
Sample Code: Download

I am working on ASP.Net MVC application. I am using jquery datatables.net to show records in form of Grid.

I have a controller with Index IActionItem method, Insert IActionItem method (button outside of jquery datatables.net), Edit IActionItem method (button inside of jquery datatables.net), and Delete IActionItem method (button inside of jquery datatables.net)

When user Add a row or Update any row in jQuery datatables.net, the datatables row shall be highlighted with green background color to let user know that they have added/updated the particular row, upon click of Save button.

The highlighted green background color shall remove, once any other event occurs in the screen.

I have searched a lot for this requirement but couldn't get any proper solution for it.

Please let me know how to achieve it in jQuery datatable.net.

Index.cshtml:

<a class="btn dxButton float-right" asp-area="" asp-controller="MappingWell" asp-action="Well">Add New</a>
<table id="DT_grdMappingWell" class="display table table-bordered table-striped table-hover" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>MappingId</th>
            <th>Study</th>
            <th>Scenario</th>
            <th>Fpd Well</th>
            <th>Aggregation</th>
            <th>Project</th>
            <th>Pearl Well</th>
            <th>Edit</th>
        </tr>
    </thead>
</table>

@section Scripts{
    <script type="text/javascript">
		var gridDataOperation;
		var grdTable;

		$(document).ready(function () {
			GetGridData("", "", "");
			bindGrid(gridDataOperation);
		})

		//--grid filter code
		function GetGridData(study, scenario, project) {
			var actionUrl = "@Url.Action("BindAndFilterGridData", "MappingWell")";
			$.ajax({
				url: actionUrl,
				type: 'GET',
				dataType: 'json',
				async: false,
				cache: false,
				data: { study: study, scenario: scenario, project: project },
				success: function (responseData) {
					gridDataOperation = responseData;
					console.log(responseData);
				},
				error: function (xhr, ajaxOptions, thrownError) {
				},
				beforeSend: function (jqXHR, settings) {
				},
				complete: function (jqXHR, textStatus) {
				},
			});
		}

		function bindGrid(gridData) {
			grdTable = $('#DT_grdMappingWell').DataTable({
				data: gridData,
				order: [[1, "desc"]],
				columns: [
					{ title: "Id", data: 'id', "autoWidth": true },
					{ title: "MappingId", data: 'mappingId', "autoWidth": true },
					{ title: "Study", data: 'studyName', "autoWidth": true },
					{ title: "Scenario", data: 'combinedName', "autoWidth": true },
					{ title: "Fdp Well", data: 'wellName', "autoWidth": true },
					{ title: "Aggregation", data: 'aggregation', "autoWidth": true },
					{ title: "Project", data: 'projectName', "autoWidth": true },
					{ title: "Pearl Well", data: 'pearlWell', "autoWidth": true }
				],
				columnDefs: [
					{
						//hiding the Primary key of the table and also unsearchable.
						targets: [0],
						visible: false,
						searchable: false
					},
					{
						//hiding the mapping_id and also unsearchable.
						targets: [1],
						visible: false,
						searchable: false
					},
					{
						targets: [8],
						width: "20",
						orderable: false,
						render: function (data, type, row) {
							return '<a href = "@Url.Action("Update", "MappingWell")?id=' + row.id + '&mappingId=' + row.mappingId + '"><span style="cursor:pointer;">Edit</span></a> &nbsp;';
						}
					},					
				],
			});
		}	
    </script>
}

Thank you in advance.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 4

Reply
ANSWER
User: dharmendr
Replied: on Oct 01, 2020 06:53 AM
Modified: on Oct 01, 2020 06:54 AM
Report

Hi Richa,

Check this example. Now please take its reference and correct your code.

Database

I have made use of the following table Customers with the schema as follows.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.

Download SQL file

Model

public class CustomerModel
{
    [Key]
    public int CustomerId { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
}

Controller

public class HomeController : Controller
{
    private DBCtx Context { get; }
    public HomeController(DBCtx _context)
    {
        this.Context = _context;
    }

    public IActionResult Index()
    {
        CustomerModel customerModel = new CustomerModel();
        return View(customerModel);
    }

    [HttpPost]
    public IActionResult AjaxMethod()
    {
        List<CustomerModel> customers = this.Context.Customers.ToList();
        return Json(JsonConvert.SerializeObject(customers));
    }

    public IActionResult Create()
    {
        return View();
    }

    [HttpPost]
    public IActionResult Create(CustomerModel model)
    {
        try
        {
            CustomerModel custromer = new CustomerModel
            {
                Name = model.Name,
                Country = model.Country
            };
            this.Context.Customers.Add(custromer);
            this.Context.SaveChanges();
            return RedirectToAction("Index", new { id = custromer.CustomerId });
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

    [HttpGet]
    public IActionResult Update(int id)
    {
        CustomerModel customerModel = new CustomerModel();

        if (id != 0)
        {
            customerModel = this.Context.Customers.Where(x => x.CustomerId == id).FirstOrDefault();
        }

        return View(customerModel);
    }

    [HttpPost]
    public IActionResult Update(CustomerModel model)
    {
        try
        {
            CustomerModel customerModel = this.Context.Customers.Where(x => x.CustomerId == model.CustomerId).FirstOrDefault();
            customerModel.Name = model.Name;
            customerModel.Country = model.Country;
            this.Context.SaveChanges();
            return RedirectToAction("Index", new { id = model.CustomerId });
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
}

View

Index

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <a class="btn dxButton float-right" asp-controller="Home" asp-action="Create">Add New</a>
    <table id="tblCustomers" class="display table table-bordered table-striped table-hover" style="width:100%">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Country</th>
                <th>Edit</th>
            </tr>
        </thead>
    </table>
    <input type="hidden" id="hfId" value="" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            GetGridData();
        });

        function GetGridData() {
            if (window.location.href.match(/(\d+)$/g) != null) {
                var id = window.location.href.match(/(\d+)$/g)[0];
                $('#hfId').val(id);
            }
            var actionUrl = "@Url.Action("AjaxMethod", "Home")";
            $.ajax({
                type: 'POST',
                url: actionUrl,
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                async: false,
                cache: false,
                success: function (responseData) {
                    OnSuccess(responseData);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                },
                beforeSend: function (jqXHR, settings) {
                },
                complete: function (jqXHR, textStatus) {
                }
            });
        }

        function OnSuccess(gridData) {
            $('#tblCustomers').DataTable({
                data: JSON.parse(gridData),
                order: [[1, "desc"]],
                columns: [
                    { title: "Id", data: 'CustomerId' },
                    { title: "Name", data: 'Name' },
                    { title: "Country", data: 'Country' },
                    { title: "Edit", data: ''}
                ],
                columnDefs: [
                    {
                        targets: [0],
                        visible: true,
                        searchable: false
                    },
                    {
                        targets: [3],
                        width: "20",
                        orderable: false,
                        render: function (data, type, row) {
                            return '<a id="lnkEdit" href = "@Url.Action("Update", "Home")?id=' + row.CustomerId +
                                    '"><span style="cursor:pointer;">Edit</span></a>';
                        }
                    }
                ],
                "createdRow": function (row, data, dataIndex) {
                    if (data.CustomerId == $('#hfId').val()) {
                        $('#hfId').val('');
                        $(row).css('background-color', '#00FF00');
                    }
                }
            });
        }
    </script>
</body>
</html>

Create

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model DataTable_Add_Edit_Row_Color_Core_MVC.Models.CustomerModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <h4>Add Customer</h4>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Create">
                <div class="form-group">
                    <label asp-for="Name" class="control-label"></label>
                    <input asp-for="Name" class="form-control" />
                    <span asp-validation-for="Name" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Country" class="control-label"></label>
                    <input asp-for="Country" class="form-control" />
                    <span asp-validation-for="Country" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <input type="submit" value="Add" class="btn btn-default" />
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Update

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model DataTable_Add_Edit_Row_Color_Core_MVC.Models.CustomerModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Update</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
</head>
<body>
    <h4>Update Customer</h4>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Update">
                <div class="form-group">
                    <label asp-for="CustomerId" class="control-label"></label>
                    <input asp-for="CustomerId" class="form-control" readonly="readonly" />
                </div>
                <div class="form-group">
                    <label asp-for="Name" class="control-label"></label>
                    <input asp-for="Name" class="form-control" />
                </div>
                <div class="form-group">
                    <label asp-for="Country" class="control-label"></label>
                    <input asp-for="Country" class="form-control" />
                </div>
                <div class="form-group">
                    <input type="submit" value="Update" class="btn btn-default" />
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Change color of added or updated jQuery DataTable row using jQuery in ASP.Net MVC

Company

Explore

Follow us

Contact Us