1

I am trying to develop a full functional Gridview in MVC, data is showing in gridview but I want to edit one row on the same page ie the row should become textboxes when I click edit hyperlink.

here is my html code

<table>
    <tr>
        <th>
            @Html.Label("ID") 
        </th>
        <th>
            @Html.Label("Name")
        </th>
        <th>
            @Html.Label("Description")
        </th>
        <th>
             @Html.Label("Date")
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            <input type="text"  class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Id)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Name)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_Description)
        </td>
        <td>
            <input type="text" class="edit-input" />
            @Html.DisplayFor(modelItem => item.Holiday_date)
        </td>
        <td>
            <a class="edit" href="#">Edit</a> |
           @* @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |*@
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
        </td>
    </tr>
}

</table>

my jQuery

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function() {
        $('a.edit').click(function () {
            var dad = $(this).parent().parent();
            dad.find('label').hide();
            dad.find('input[type="text"]').show().focus();
        });

        $('input[type=text]').focusout(function() {
            var dad = $(this).parent();
            $(this).hide();
            dad.find('label').show();
        });
        });
    </script>
}

and my css for textboxes

.edit-input {
    display:none;
}

but when I execute the screen i like thisenter image description here

I am new to mvc and I don't have much knowledge about it, what should I change in jQuery to fix it?

3

3 Answers 3

1

Check the html generated by @Html.DisplayFor(). Unless you have created a custom DiplayTemplate it wont wrap the display text in a <label> tag which is what you script is trying to hide by using dad.find('label').hide();.

Instead, wrap the display text in a container

<td>
  <input type="text"  class="edit-input" />
  <div class="displaytext">
    @Html.DisplayFor(modelItem => item.Holiday_Id)
  </div>
</td>

and adjust you script to

....
$('a.edit').click(function () {
  var dad = $(this).parent().parent();
  dad.find('.displaytext').hide(); // change this
  dad.find('input[type="text"]').show().first().focus();
});

$('input[type=text]').focusout(function() {
  var dad = $(this).parent();
  $(this).hide();
  dad.find('.displaytext').show(); // and this
});

Note you will probably also want to copy the contents of the display text to the input when you make it visible.

10
  • it just let me edit the date, other columns in a row don't change into textboxes Dec 17, 2014 at 21:25
  • Sorry, don't understand. Are the 'labels` now hiding?
    – user3559349
    Dec 17, 2014 at 21:28
  • yes I changed <input type="text" class="edit-input" /> to @Html.TextBoxFor(modelItem => item.Holiday_Id, new { style = "display: none;" }) Dec 17, 2014 at 21:30
  • Using <input type="text" class="edit-input" /> or @Html.TextBoxFor(modelItem => item.Holiday_Id, new { style="display: none;" }) is irrelevant (and you should not use style="display: none;", but rather use css to initially hide the text boxes textboxes). What do you mean by it just let me edit the date?
    – user3559349
    Dec 17, 2014 at 21:34
  • Note also you will need to change the second part of the script when you show the display text. dad.find('.displaytext').show();
    – user3559349
    Dec 17, 2014 at 21:37
1

Could you add a hidden text box in each row? And then when you click the row, hide the content of each td, but show the text box?

<td>

            @Html.DisplayFor(modelItem => item.Holiday_Id)
           @Html.TextBox(modelItem => item.Holiday_Id, new{style="display:none;"})
        </td>

<Script>
   $(function(){
    $(".edit").click(function(){
       $(this).parent().parent().children("td > * :not('label')").hide();
       $(this).children("input").show();
    });

   });
</script>
0
1

Your code has two issues. As mentioned by @Stephen Muecke @Html.DisplayFor() doesn't generate <label> tag. And in dad.find('input[type="text"]').show().focus(); method focus() runs for each input and set focus to it, but the previous input lost focus and raise it focusout() event (exactly hide it).So that why you can edit only Date, because it last input and don't lose focus(). I've simulated your situation according @Stephen Muecke modifications and it's works fine. You can see it here

2
  • OP did actually have var dad = $(this).parent(); for the focusout event :)
    – user3559349
    Dec 18, 2014 at 1:37
  • Yes, you're right. Your answer is fully correct. I'll will modify my :)
    – kolesso
    Dec 18, 2014 at 6:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.