jquery - how to update checkbox in webgrid -


excuse me, try make webgrid, in webgrid put checkbox. want change value of checkbox. have 5 row in webgrid, in first row, value of checkbox success change. in row 2 until five, value can change. can 1 tell me, mistake?

this view

<div id="mygrid"> </div> <div>     @{         var grid = new webgrid(model.datadirilist, rowsperpage: 15, canpage: true, cansort: true, ajaxupdatecontainerid: "gridcontent");         @grid.gethtml(                            tablestyle: "row",                   alternatingrowstyle: "alt",                   columns: grid.columns(                   grid.column("id", format: @<text>  <span  class="display-mode">@item.id </span> <label id="userid" class="edit-mode">@item.id</label> </text>, style: "col1width" ),                   grid.column("nama", "nama", format: @<text>  <span  class="display-mode"> <label id="lblnama"  >@item.nama</label> </span> <input type="text" id="nama" value="@item.nama" class="edit-mode" /></text>, style: "col2width"),                   grid.column("umur", "umur", format: @<text>  <span  class="display-mode"> <label id="lblumur"  >@item.umur</label> </span> <input type="text" id="umur" value="@item.umur" class="edit-mode" /></text>, style: "col2width"),                   grid.column(header: "active", format:@<text> <span  class="display-mode"> <label id="lblactive">@item.activestatus</label> </span> <input id="chkactive" type="checkbox" @((item.active == true) ? " checked=checked" : "") name="closeselling" value="@item.active" class="edit-mode" onchange="adchange()" /></text>, style: "col2width"),                   grid.column("action", format: @<text>                                 <button class="edit-user display-mode" >edit</button>                                 <button class="save-user edit-mode"  >save</button>                                 <button class="cancel-user edit-mode" >cancel</button>                             </text>,  style: "col3width" , cansort: false)                  ));     } </div>  @section scripts     {     <script type="text/javascript">          $(document).ready(function () {             $('.edit-mode').hide();             $('.edit-user, .cancel-user').on('click', function () {                 var tr = $(this).parents('tr:first');                 tr.find('.edit-mode, .display-mode').toggle();             });             $(function () {                 $('#chkactive').click(function () {                     alert($(this).val() + ' ' + (this.checked ? 'checked' : 'unchecked'));                 });             });              $(".save-user").on("click", function () {                 var tr = $(this).parent().parent();                 var t = tr.find("#nama").val();                 var umur = tr.find('#umur').val();                 var chkactive = $('#chk').attr('checked') ? "true" : "false";                 var id = tr.find('#userid').html();                 alert(chkactive);                  $.ajax({                     url: '@url.action("updateuser", "home")',                 type: "post",                 data: { customernameid: t, userid: id, umur: umur,active: chkactive},                 datatype: 'json',                 success: function (result) {                     $("#mygrid").html('');                     $("#mygrid").html(result);                 }                 });                  tr.find("#lblnama").text(t);                 tr.find("#lblumur").text(umur);                 tr.find('.edit-mode, .display-mode').toggle();         });      }); </script>     } 

this controller

public jsonresult updateuser(string customernameid, string userid, string umur, bool active)         {             var id = convert.toint32(userid);             var intumur = convert.toint32(umur);             var dd = db.datadiris.asqueryable().where(r => r.id == id).single();             dd.id = id;             dd.nama = customernameid;             dd.umur = intumur;             dd.active = active;              db.entry(dd).state = entitystate.modified;             db.savechanges();             string message = "success";             return json(message, jsonrequestbehavior.allowget);         } 

please me

thanks

just solved issue of checkbox , mvc webgrid,
need add short script.

this solution:
in grab script things same:

var isdisabled = tr.find("#isdisabled").val(); 

&

tr.find("#lblisdisabled").text(isdisabled); 

&

"isdisabled": isdisabled, 

so far same, need add checkbox, so:

grid.column("isdisabled", "isdisabled", format: @<text> <span  class="display-mode"> <label id="lblisdisabled">@item.isdisabled</label> </span>   <input class="edit-mode" id="isdisabled" name="isdisabled" type="checkbox" value="@if (item.isdisabled){<text>true</text>}else{<text>false</text>}" @if(item.isdisabled){<text>checked</text>}/> </text>), 

instead(!) can use mvc html helper so:

@html.checkbox("showonchart", (bool)item.showonchart, new { @class = "edit-mode", value = item.showonchart }) 

eventually need add script:

<script type="text/javascript"> $(function () {     $('input:checkbox').change(function () {         if ($(this).attr("checked")) {             $(this).attr("value", true);         } else {             $(this).attr("value", false);         }     }); }); $(document).ready(function () {     $('input[type=checkbox]').each(function () {         if ($(this).attr("checked")) {             $(this).attr("value", true);         } else {             $(this).attr("value", false);         }     }); }); </script> 

if have more checkboxes in page , want exclude them use:

$('.edit-mode:checkbox').change(... 

when receiving bool in controller going:

bool? isdisabled 

just more representable if actionresult not called isdisabled input.

hope helps.


Comments

Popular posts from this blog

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

html - How to style widget with post count different than without post count -

url rewriting - How to redirect a http POST with urlrewritefilter -