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
Post a Comment