Hi muhammad12,
Use GridView OnDataBound event handler.
Refer below code.
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" />
<style>
.main-container { width: 1550px; margin: 0 auto; padding: 15px 20px; background-color: #f5f9fd; font-family: Roboto; }
.header-section { display: flex; justify-content: space-between; align-items: center; padding: 15px; }
.header-title { display: flex; align-items: baseline; gap: 15px; /* Space between heading and button */ }
.header-title .label { font-family: Roboto; font-weight: 700; font-size: 24px; line-height: 28.13px; color: #101E56; margin-left: -5px; }
.Report-section { display: flex; flex-direction: column; gap: 15px; padding: 20px; border-radius: 6px; box-shadow: 0px 0px 10px 0px #00000026; background-color: #FFFFFF; }
.header-row { display: flex; justify-content: space-between; align-items: center; }
.header-left { display: flex; gap: 60px; }
.header-label { font-family: Roboto; font-weight: 400; font-size: 10px; line-height: 100%; color: #929292; gap: 50px; }
.header-label-data { font-family: Roboto; font-weight: 600; font-size: 12px; line-height: 100%; color: #002058; }
.total-marks { width: 79px; height: 45px; border-radius: 4px; border-width: 1px; background: #C8EDFF; border: 1px solid #B1DEF4; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 150px; }
.total-marks span { font-family: Roboto; font-weight: 400; font-size: 9px; line-height: 10.55px; color: #000000; text-align: center; }
.total-marks .marks-box { font-family: Roboto; font-weight: 600; font-size: 18px; line-height: 23.44px; color: #000066; text-align: center; }
.marks-buttons { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: center; }
.header-buttons button { }
.btn-outline-primary { width: 36px; height: 27px; border: 0.7px solid #000060; border-radius: 6px; font-family: Inter; font-weight: 400; font-size: 12px; line-height: 100%; color: #000060; background: linear-gradient(180deg, #D8E7FF 0%, #A8C7F8 100%); text-align: center; align-items: center; justify-content: center; padding: 0; margin-right: 5px; }
.btn-primary { width: 42.22222900390625px; height: 27px; border-radius: 6px; border: 0.7px solid #000060; background: linear-gradient(180deg, #D8E7FF 0%, #A8C7F8 100%); font-family: Inter; font-weight: 400; font-size: 12px; line-height: 100%; color: #000060; text-align: center; align-items: center; justify-content: center; padding: 0; margin-right: 5px; }
.btn-success { width: 52px; height: 27px; border-radius: 6px; border: 0.7px solid #000060; background: linear-gradient(180deg, #D8E7FF 0%, #A8C7F8 100%); font-family: Inter; font-weight: 400; font-size: 12px; line-height: 100%; color: #000060; text-align: center; align-items: center; justify-content: center; padding: 0; }
.gridview-container { margin-top: 20px; width: 1468px; height: auto; }
.gridview { width: 1468px; height: auto; border: 2px solid #979797; /*border-bottom-right-radius: 2px;*/ border-width: 1px; border-collapse: collapse; }
.gridview th { width: 1468px; height: 40px; border: 1px solid #979797; border-top-left-radius: 2px; border-top-right-radius: 2px; border-width: 1px; background: #C7EDFE; text-align: center; font-family: Roboto; font-weight: 600; font-size: 14px; line-height: 100%; color: #002058; padding-top: 15px; /* Adds spacing so wrapped text starts correctly */ padding-bottom: 15px; /* Keeps spacing even */ }
.gridview td { text-align: left; padding-top: 20px; border: 1px solid #979797; height: 36px !important; padding: 4px !important; font-family: Roboto; font-weight: 400; font-size: 12px; line-height: 16px; color: #2E2E2E; vertical-align: middle; }
.gridview th:last-child,
.gridview td:last-child { border-right: 1px solid #979797; /* Darker border on right */ }
.gridview td:last-child { background: #FFFDF2; font-weight: bold; font-size: 16px; color: #002058; text-align: center; vertical-align: middle; border-bottom: none; border-top: none; }
.gridview td:first-child { vertical-align: middle; text-align: left; word-wrap: break-word; padding-top: 15px; /* Adds spacing so wrapped text starts correctly */ padding-bottom: 15px; /* Keeps spacing even */ }
.gridview tr:not(:last-child) td:last-child { border-bottom: 1px solid #979797; }
.gridview th:nth-child(1), .gridview td:nth-child(1) { width: 700px; text-align: left; }
/* Criteria */
.gridview th:nth-child(2), .gridview td:nth-child(2),
.gridview th:nth-child(3), .gridview td:nth-child(3),
.gridview th:nth-child(4), .gridview td:nth-child(4),
.gridview th:nth-child(5), .gridview td:nth-child(5),
.gridview th:nth-child(6), .gridview td:nth-child(6) { width: 100px; }
/* Ratings */
.gridview th:nth-child(7), .gridview td:nth-child(7) { width: 150px; }
/* Average */
.star-container { display: flex; justify-content: center; align-items: center; }
.star { font-size: 24px; color: white; /* Inside remains white */ text-shadow: 0px 0px 1px #A5A5A5; /* Gray border effect */ transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out; cursor: pointer; margin: 2px; }
.star.selected,
.star:hover ~ .star { color: gold; text-shadow: 0 0 0 gold; /* Filled gold when selected */ }
.star.checked { color: #FFD700; /* Gold color for selected stars */ }
.gridview tr:last-child td:last-child { border-bottom: 1px solid #979797; }
.criteria-cell { gap: 10px; }
.row-checkbox { text-align: left; vertical-align: initial; margin-right: 10px; padding-left: 10px; }
.gridview th .header-checkbox { margin-right: 10px; padding-left: 10px; }
.checkbox-cell input[type="checkbox"] { margin: 0 auto; display: block; }
.comment-section { margin-top: 25px; }
.comment-container { display: flex; gap: 20px; justify-content: space-between; }
.comment-box { flex: 1; max-width: 494px; margin-bottom: 40px; }
.comment-box:last-child { margin-left: auto; }
.comment-label { display: block; margin-bottom: 5px; font-family: Inter; font-weight: 600; font-size: 12px; line-height: 14.52px; color: #006699; }
/* Textarea for comments */
.comment-textarea { width: 100%; height: 77px; margin-top: 5px; border-width: 1px; border-top-left-radius: 2px; border-top-right-radius: 1px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px; border: 1px solid #979797; font-family: Inter; font-weight: 400; font-size: 11px; line-height: 13.31px; color: #C3C3C3; resize: vertical; /* Allow vertical resizing */ outline: none; }
.signature-section { margin-top: 25px; display: flex; justify-content: space-between; /* align-items: center;*/ margin-bottom: 20px; }
.signature-section > div { display: flex; align-items: center; /* Align label and line horizontally */ gap: 10px; /* Add space between label and line */ }
.signature-label { font-family: Inter; font-weight: 600; font-size: 12px; line-height: 14.52px; color: #006699; margin-bottom: 2px; /* Space below the Signature label */ }
.signature-line { border-bottom: 1px solid #979797; width: 292px; height: 2px; color: #979797; margin-top: 5px; margin-bottom: 8px; Space below the Signature line }
.date-section { margin-top: 25px; display: flex; justify-content: space-between; /* align-items: center;*/ margin-bottom: 20px; }
.date-section > div { display: flex; align-items: center; gap: 10px; }
.date-label { font-family: Inter; font-weight: 600; font-size: 12px; line-height: 14.52px; color: #006699; margin-left: 130px; margin-bottom: 2px; }
.date-line { border-bottom: 1px solid #979797; width: 292px; height: 2px; margin-top: 5px; color: #979797; margin-bottom: 8px; }
.unsign-button { width: 49px; height: 23px; border-radius: 4px; border: 0.7px solid #CDCDCD; background: #CDCDCD; font-family: Inter; font-weight: 400; font-size: 10px; line-height: 100%; text-align: right; color: #202020; position: relative; top: -28px; }
.pa-circle { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; position: relative; margin-top: -93px; margin-left: 120px; }
.pa-number { position: absolute; border: none; border-bottom: 1px solid #979797; text-align: center; width: 40px; height: 12px; font-family: Inter; font-weight: 500; font-size: 10px; line-height: 100%; color: #000000; margin-top: 22px; margin-bottom: 1px; outline: none; }
.circle-img { width: 100%; /* Ensures the image fully covers the div */ height: 100%; border-radius: 50%; /* Keeps it circular */ }
.limits-label { font-family: Roboto; font-weight: 400; font-size: 9px; line-height: 100%; color: #999999; text-align: right; }
.upload-button { text-align: right; margin-top: 5px; margin-bottom: 15px; }
.btn-secondary { padding: 5px 10px; width: 70px; height: 23px; border-radius: 4px; border: 0.7px solid #7A7A7A; font-family: Inter; font-weight: 400; font-size: 10px; line-height: 100%; color: #FFFFFF; background: #7A7A7A }
.checkbox-section2 { display: flex; gap: 20px; margin-bottom: 20px; }
.checkbox-section2 label { display: flex; align-items: center; gap: 5px; font-family: Inter; font-weight: 400; font-size: 11px; line-height: 13.31px; color: #060606; margin-bottom: 10px; }
</style>
<div class="container-fluid">
<div class="main-container">
<div class="header-section">
<div class="header-title">
<asp:Label ID="lbltitle" runat="server" Text="Developer" CssClass="label"></asp:Label>
</div>
</div>
<div class="Report-section">
<div class="header-row">
<div class="header-left">
<div>
<div class="header-label">Dept:</div>
<asp:Label ID="lblDept" runat="server" Text="MIS" class="header-label-data"></asp:Label>
</div>
<div>
<div class="header-label">Position:</div>
<asp:Label ID="lblPosition" runat="server" Text="Sr. UI/UX Designer" class="header-label-data"></asp:Label>
</div>
<div>
<div class="header-label">Location:</div>
<asp:Label ID="lblLocation" runat="server" Text="ISB" class="header-label-data"></asp:Label>
</div>
<div>
<div class="header-label">Career Year:</div>
<asp:Label ID="lblYear" runat="server" Text="14 May 2023" class="header-label-data"></asp:Label>
</div>
</div>
<div class="marks-buttons">
<div class="total-marks">
<span>Total Marks</span>
<span class="marks-box">60/100</span>
</div>
<div class="header-buttons">
<asp:Button ID="btnPrint" runat="server" Text="Print" CssClass="btn btn-outline-primary" />
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-primary" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn btn-success" />
</div>
</div>
</div>
<!-- GridView -->
<div class="gridview-container">
<asp:GridView ID="gvKPIReport" runat="server" CssClass="table gridview"
AutoGenerateColumns="False" ShowHeader="True" GridLines="None" OnDataBound="OnDataBound">
<RowStyle CssClass="grid-row" />
<Columns>
<asp:TemplateField HeaderText="Criteria">
<HeaderTemplate>
<div class="criteria-cell">
<asp:CheckBox ID="chkHeader" runat="server" CssClass="header-checkbox" />
<span>Criteria</span>
</div>
</HeaderTemplate>
<ItemTemplate>
<div class="criteria-cell">
<asp:CheckBox ID="chkRow" runat="server" CssClass="row-checkbox" />
<asp:Label ID="lblCriteria" runat="server" Text='<%# Eval("Criteria") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Poor">
<ItemTemplate>
<div class="star-container">
<span class="star" onclick="setRating(this, 1)">★</span>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Fair">
<ItemTemplate>
<div class="star-container">
<span class="star" onclick="setRating(this, 2)">★</span>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Satisfactory">
<ItemTemplate>
<div class="star-container">
<span class="star" onclick="setRating(this, 3)">★</span>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Good">
<ItemTemplate>
<div class="star-container">
<span class="star" onclick="setRating(this, 4)">★</span>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Excellent">
<ItemTemplate>
<div class="star-container">
<span class="star" onclick="setRating(this, 5)">★</span>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Average (%)">
<ItemTemplate>
<div class="average-box">
<asp:Label ID="lblAverageStatic" runat="server" Text="0/" CssClass="average-static" Visible="true"></asp:Label>
<asp:Label ID="lblStaticTotal" runat="server" CssClass="average-total" Visible="true"></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="comment-section">
<div class="comment-container">
<!-- Supervisor Comment -->
<div class="comment-box">
<label for="supervisorComment" class="comment-label">Supervisor/Manager Comment</label>
<textarea id="supervisorComment" class="comment-textarea" placeholder="Write text..."></textarea>
<div class="limits-label">*Limit of 200 words.</div>
</div>
<!-- Employee Comment -->
<div class="comment-box">
<div class="checkbox-section2">
<label>
<input type="checkbox" id="agreed">
Agreed
</label>
<label>
<input type="checkbox" id="disagreed">
Disagreed
</label>
<label>
<input type="checkbox" id="agreedWithReservation">
Agreed with Reservation
</label>
</div>
<label for="employeeComment" class="comment-label">Employee Comment</label>
<textarea id="employeeComment" class="comment-textarea" placeholder="Write text..."></textarea>
<div class="upload-button">
<button class="btn btn-secondary">Upload File</button>
</div>
</div>
</div>
</div>
<div class="signature-section">
<div>
<div class="signature-label">Supervisor/Manager Signature</div>
<div class="signature-line">
<button class="unsign-button">UnSign</button>
<div class="pa-circle">
<img src="img/sign.png" class="circle-img">
<input type="text" class="pa-number">
</div>
</div>
</div>
<div>
<div class="signature-label">Employee Signature</div>
<div class="signature-line">
<button class="unsign-button">UnSign</button>
<div class="pa-circle">
<img src="img/sign.png" class="circle-img">
<input type="text" class="pa-number">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const starContainers = document.querySelectorAll(".star-container");
starContainers.forEach((container) => {
const stars = container.querySelectorAll(".star");
stars.forEach((star, index) => {
star.addEventListener("click", function () {
setRating(container, index + 1);
// Update the current rating in the average column
const row = container.closest('tr');
const currentRatingLabel = row.querySelector('#lblCurrentRating');
if (currentRatingLabel) {
// Calculate the rating value (example: 1 star = 4 points)
const ratingValue = (index + 1) * 4; // Adjust multiplier as needed
currentRatingLabel.innerText = ratingValue;
}
});
});
});
});
function setRating(container, rating) {
const stars = container.querySelectorAll(".star");
// Reset all stars
stars.forEach((star, i) => {
star.classList.remove("checked");
});
// Highlight stars up to the selected rating
for (let i = 0; i < rating; i++) {
stars[i].classList.add("checked");
}
}
</script>
Code
protected void OnDataBound(object sender, EventArgs e)
{
for (int i = gvKPIReport.Rows.Count - 1; i > 0; i--)
{
GridViewRow row = gvKPIReport.Rows[i];
GridViewRow previousRow = gvKPIReport.Rows[i - 1];
if ((row.FindControl("lblAverageStatic") as Label).Text == (previousRow.FindControl("lblAverageStatic") as Label).Text)
{
if (previousRow.Cells[6].RowSpan == 0)
{
if (row.Cells[6].RowSpan == 0)
{
previousRow.Cells[6].RowSpan += 2;
}
else
{
previousRow.Cells[6].RowSpan = row.Cells[6].RowSpan + 1;
}
row.Cells[6].Visible = false;
}
}
}
}
Screenshot
