I am looking to add a CSS class to a gridview. I attempted to use this style from a reference link, so I implemented the following code snippet:
$(function () {
$('[ID*=search_data]').on('click', function () {
var fromdate = $('[ID*=fromdate]').val();
var todate = $('[ID*=todate]').val();
var regiondrop = $('[ID*=regiondrop] option:selected')[0].value;
var tabledata= $('[ID*=tabledata]');
var obj = {};
obj.fromdate = fromdate;
obj.todate = todate;
obj.regiondrop = regiondrop;
Getdataa(obj);
return false;
});
});
function Getdataa(obj) {
//alert('1');
$.ajax({
type: "POST",
url: "WebForm1.aspx/search_data",
data: "{'fromdate':'" + obj.fromdate + "','todate':'" + obj.todate + "','regiondrop':'" + obj.regiondrop + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
var final = JSON.parse(result.d).response;
console.log(JSON.parse(result.d).response)
$("#tabledata").empty();
if (final.length > 0) {
$("#tabledata").append(
"<tr ><th>ID</th><th>OwnerName</th></tr>");
for (var i = 0; i < final.length; i++) {
if (final[i] !== null) {
$("#tabledata").append("<tr><td>" +
final[i][0] + "</td> <td>" +
final[i][1] + "</td> <td>" +
}
}
}
else {
$("#tabledata").hide();
$("#Label4").text("No Data");
}
},
error: function (error) {
alert("error");
}
});
}
UPDATE
I made changes in jQuery by adding these lines after $("#tabledata").empty();
$("th").addClass("GridviewScrollHeader");
$("td").addClass("GridviewScrollItem");
However, after building, there was no visible effect on the grid view.
In the HTML code, the gridview is represented as follows:
<table id="tabledata">
</table>
When I apply this code, the gridview displays without any formatting as shown in the image below: https://i.sstatic.net/j0t6N.png
What I want it to look like is demonstrated in this image: https://i.sstatic.net/BGeqt.png So how can I successfully apply the CSS styling to achieve the desired result?