This question is locked. New answers and comments are not allowed.
I want to use javascript to manually edit the cells of a grid in batch-edit mode.
My intent is to create buttons that let me swap rows vertically, moving the selected row down or up the grid.
Unfortunately, while I can edit the HTML of the page to make it look as if I am successfully swapping, my superficial changes vanish as soon as the user tries to conventionally edit. How can I successfully edit cells in batch editing mode using javascript?
Below is a copy of my grid and a partially made javascript method gathering the necessary information for the intended swap.
My intent is to create buttons that let me swap rows vertically, moving the selected row down or up the grid.
Unfortunately, while I can edit the HTML of the page to make it look as if I am successfully swapping, my superficial changes vanish as soon as the user tries to conventionally edit. How can I successfully edit cells in batch editing mode using javascript?
Below is a copy of my grid and a partially made javascript method gathering the necessary information for the intended swap.
<div style="float: right;" ><br> <div><input onclick="moveSelectedUp();" style="margin: 10px 5px; height: 150px;" type="button" /></div><br> <div><input onclick="moveSelectedDown();" style="margin: 10px 5px; height: 150px;" type="button" /></div><br> </div><br> <br> <div id="speed_dial_grid_container" style="width: 620px; float: right; <% if("Speed Dial" != provisionType) { %> display:none; <% } %>"><br> <%<br> var grid = Html.Telerik().Grid<M5Portal.Models.SpeedDialModel>()<br> .Name("SpeedDialGrid")<br> .ToolBar(commands =><br> {<br> commands.SubmitChanges().HtmlAttributes(new { style="display: none;" });<br> })<br> .DataBinding(dataBinding => dataBinding.Ajax()<br> .Select("SpeedDialBinding", "Profile")<br> .Update("SpeedDialEdit", "Profile")<br> .Delete("SpeedDialDelete", "Profile")<br> )<br> .Columns(columns =><br> {<br> columns.Bound(o => o.ButtonNumber).Width(40).Title("").ReadOnly();<br> //columns.Bound(o => o.SpeedDialLabel).ClientTemplate("<# if(3 > ButtonNumber) { #><strong><# } #><#= SpeedDialLabel#><# if(3 > ButtonNumber) { #></strong>  <img tooltip=\"Cannot assign speed dials to first two lines.\" src=\"/Content/Images/tooltip.png\" class=\"m5-tooltip-image\"><# } #> ");<br> columns.Bound(o => o.SpeedDialLabel);<br> columns.Bound(o => o.Number).ClientTemplate("<# if(\"\" != Number) { #><span class=\"telephone_format_this\"><#= Number#></span><# } #><script>$('.telephone_format_this').each(function(index) { if('' != $(this).html()) $(this).html(formatPhone($(this).html())); });</script>");<br> <br> })<br> .ClientEvents(action => action.OnEdit("onGridEdit").OnDataBound("onDataBound"))<br> .Editable(editing => editing.Mode(GridEditMode.InCell))<br> .Selectable()<br> .DataKeys(key => key.Add("ButtonNumber"))<br> .Scrollable(c => c.Height("250px"));<br> grid.Render();<br> %><br> </div>function moveSelectedUp()<br> {<br> var selectedRow = $('.t-grid .t-state-selected');<br> var previousRow = selectedRow.prev();<br><br> if(0 != previousRow.length)<br> {<br> var prevChildren = previousRow.children();<br> var prevLabel = prevChildren.eq(1).html();<br> var prevNumber = prevChildren.eq(2);<br> if("" != prevNumber.html())<br> prevNumber = prevNumber.find('.telephone_format_this').html().replace("(","").replace(")","").replace(" ","").replace("-","");<br> else<br> prevNumber = "";<br><br> var children = selectedRow.children();<br> var label = children.eq(1).html();<br> var number = children.eq(2);<br> if("" != number.html())<br> number = number.find('.telephone_format_this').html().replace("(","").replace(")","").replace(" ","").replace("-","");<br> else<br> number = "";<br><br> console.log("Previous row: " + prevLabel + " " + prevNumber);<br> console.log("Selected row: " + label + " " + number);<br><br> prevChildren.eq(1).html(label);<br> prevChildren.eq(2).html(number);<br> children.eq(1).html(prevLabel);<br> children.eq(2).html(prevNumber);<br> }<br> }