Click here to Skip to main content
15,879,613 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
@*@@model GridImplementation.Models.EmployeeDetailsModel*@
@model IEnumerable<GridImplementation.Models.EmployeeDetailsModel>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<style type="text/css">
    .alignment {
        text-align: center;

    .hAlignment {
        margin-left: 10px;
        float: left;

    table, th, td {
        border: 1px solid black;
        font-size: 1.1em;
        text-align: center;

    table {
        border-collapse: separate;
        width: 90%;

    td {
        padding: 10px 0;

    tr:nth-child(even) {
        background: #CCC;

    tr:nth-child(odd) {
        background: #FFF;

    table th {
        background-color: ButtonShadow;
    <table id="tEmpDetails">
                <th>Employee Name</th>  
                <th>Employee Designation</th>  
                <th>Employee Department</th>  
                <th>Employee Salary</th>  
            @foreach (var EmployeeDetails in Model)
                    <td class="alignment" style="display:none;">@EmployeeDetails.EmpID    </td>  
                    <td class="alignment">@EmployeeDetails.EmpName    </td>  
                    <td class="alignment">@EmployeeDetails.EmpDesignation    </td>  
                    <td class="alignment">@EmployeeDetails.EmpDepartment    </td>  
                    <td class="alignment">@EmployeeDetails.EmpSalary    </td>  
                    <td class="alignment">
                        <input id="btnEdit" type="button" value="Edit" />
                        <input id="btnDelete" type="button" value="Delete" />

<script type="text/javascript">
    $(document).ready(function () {       
        $("#tEmpDetails").on('click', '#btnEdit', function () {
            var CurrentRow = $(this).closest('tr');
            var EmpID = CurrentRow.find("td:eq(0)").text();
            var EmpName = CurrentRow.find("td:eq(1)").text();
            var EmpDesignation = CurrentRow.find("td:eq(2)").text();
            var EmpDepartment = CurrentRow.find("td:eq(3)").text();
            var EmpSalary = CurrentRow.find("td:eq(4)").text();

    $(function () {
            modal: true,
            autoOpen: false,
            title: "Edit Employee Details",
            width: 500,
            height: 500,
            buttons: {
                close: function () {


<div id="openPopUp" style="display:none;" align=center>
            <td>Employee Name:</td>
            <td>@Html.TextBox("EmpName")    </td>
            <td>Employee Designation:</td>
            <td>@Html.TextBox("EmpDesignation")    </td>
            <td>Employee Department:</td>
            <td>@Html.TextBox("EmpDepartment")    </td>
            <td>Employee Salary:</td>
            <td>@Html.TextBox("EmpSalary")    </td>

What I have tried:

Added related jquery libraries and css
Updated 10-Mar-17 6:21am
F-ES Sitecore 10-Mar-17 10:41am    
ids have to be unique and you will have one btnEdit per row so when you ask for #btnEdit you will get unpredictable results. Use a class name to identify the buttons, or a data attribute instead.
Karthik_Mahalingam 10-Mar-17 10:52am    
Good catch,
you shall post it as solution.
faisalsaeed62 10-Mar-17 11:23am    
@F-ES Sitecore

nothing happens after changing the button ID with class name
Karthik_Mahalingam 10-Mar-17 11:35am    
Always use  Reply  button, to post Comments/query to the user, so that the user gets notified and responds to your text.
Karthik_Mahalingam 10-Mar-17 11:35am    
are you getting any error in console window?

did you change it to class selector ?

1 solution

spell mismatch is the issue
<div id="openPopUp" style="display:none;" align=center>


make uniform everywhere.
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900