This is a migrated thread and some comments may be shown as answers.

[Solved] RadGrid Client Edit with Batch Server Update Only Updates One Row

1 Answer 213 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Gary asked on 18 Mar 2013, 06:59 PM

I am testing out the demo on RadGrid Client Edit with Batch Server Update demonstrated here: http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultvb.aspx?#qsf-demo-source

The problem I am having is that when I make multiple cell changes on several rows, the grid only updates the record that was first modified. The changes made on the first record, including all the columns, are successfully saved to the database. However, the values of all other records modified, in rows, does not get updated. These values are retained, regardless of the values that were changed to.

Has anyone experienced this and have a solution?

Much appreciated.

ASPX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns='http://www.w3.org/1999/xhtml'>

<head>

<title>Applying AJAX Grid's client-side editing with batch server update | RadGrid demo</title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

//Custom js code section used to edit records, store changes and switch the visibility of column editors

//global variables for edited cell and edited rows ids

var editedCell;

var arrayIndex = 0;

var editedItemsIds = [];

function RowCreated(sender, eventArgs)

{

var dataItem = eventArgs.get_gridDataItem();

//traverse the cells in the created client row object and attach dblclick handler for each of them

for (var i = 1; i < dataItem.get_element().cells.length; i++)

{

var cell = dataItem.get_element().cells[i];

if (cell)

{

$addHandler(cell, "dblclick", Function.createDelegate(cell, ShowColumnEditor));

}

//detach the ondblclick handlers from the cells on row disposing

function RowDestroying(sender, eventArgs)

{

if (eventArgs.get_id() === "") return;

var row = eventArgs.get_gridDataItem().get_element();

var cells = row.cells;

for (var j = 0, len = cells.length; j < len; j++)

{

var cell = cells[j];

if (cell)

{

$clearHandlers(cell);

}

function RowClick(sender, eventArgs)

{

if (editedCell)

{

//if the click target is table cell or span and there is an edited cell, update the value in it

//skip update if clicking a span that happens to be a form decorator element (having a class that starts with "rfd")

if ((eventArgs.get_domEvent().target.tagName == "TD") ||

(eventArgs.get_domEvent().target.tagName == "SPAN" && !eventArgs.get_domEvent().target.className.startsWith("rfd")))

{

UpdateValues(sender);

editedCell = false;

}

function ShowColumnEditor()

{

editedCell = this;

//hide text and show column editor in the edited cell

var cellText = this.getElementsByTagName("span")[0];

cellText.style.display = "none";

//display the span which wrapps the hidden checkbox editor

if (this.getElementsByTagName("span")[1])

{

this.getElementsByTagName("span")[1].style.display = "";

}

var colEditor = this.getElementsByTagName("input")[0] || this.getElementsByTagName("select")[0];

//if the column editor is a form decorated select dropdown, show it instead of the original

if (colEditor.className == "rfdRealInput" && colEditor.tagName.toLowerCase() == "select") colEditor = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(colEditor);

colEditor.style.display = "";

colEditor.focus();

}

function StoreEditedItemId(editCell)

{

//get edited row key value and add it to the array which holds them

var gridRow = $find(editCell.parentNode.id);

var rowKeyValue = gridRow.getDataKeyValue("ID");

Array.add(editedItemsIds, rowKeyValue);

}

function HideEditor(editCell, editorType)

{

//get reference to the label in the edited cell

var lbl = editCell.getElementsByTagName("span")[0];

switch (editorType)

{

case "textbox":

var txtBox = editCell.getElementsByTagName("input")[0];

if (lbl.innerHTML != txtBox.value)

{

lbl.innerHTML = txtBox.value;

editCell.style.border = "1px dashed";

StoreEditedItemId(editCell);

}

txtBox.style.display = "none";

break;

case "checkbox":

var chkBox = editCell.getElementsByTagName("input")[0];

if (lbl.innerHTML.toLowerCase() != chkBox.checked.toString())

{

lbl.innerHTML = chkBox.checked;

editedCell.style.border = "1px dashed";

StoreEditedItemId(editCell);

}

chkBox.style.display = "none";

editCell.getElementsByTagName("span")[1].style.display = "none";

break;

case "dropdown":

var ddl = editCell.getElementsByTagName("select")[0];

var selectedValue = ddl.options[ddl.selectedIndex].value;

if (lbl.innerHTML != selectedValue)

{

lbl.innerHTML = selectedValue;

editCell.style.border = "1px dashed";

StoreEditedItemId(editCell);

}

//if the form decorator was enabled, hide the decorated dropdown instead of the original.

if (ddl.className == "rfdRealInput") ddl = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(ddl);

ddl.style.display = "none";

default:

break;

}

lbl.style.display = "inline";

}

function UpdateValues(grid)

{

//determine the name of the column to which the edited cell belongs

var tHeadElement = grid.get_element().getElementsByTagName("thead")[0];

var headerRow = tHeadElement.getElementsByTagName("tr")[0];

var colName = grid.get_masterTableView().getColumnUniqueNameByCellIndex(headerRow, editedCell.cellIndex);

//based on the column name, extract the value from the editor, update the text of the label and switch its visibility with that of the column

//column. The update happens only when the column editor value is different than the non-editable value. We also set dashed border to indicate

//that the value in the cell is changed. The logic is isolated in the HideEditor js method

switch (colName)

{

case "changes":

HideEditor(editedCell, "textbox");

break;

case "note":

HideEditor(editedCell, "textbox");

break;

default:

break;

}

function CancelChanges()

{

if (editedItemsIds.length > 0)

{

$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("");

}

else

{

alert("No pending changes to be discarded");

}

editedItemsIds = [];

}

function ProcessChanges()

{

//extract edited rows ids and pass them as argument in the ajaxRequest method of the manager

if (editedItemsIds.length > 0)

{

var Ids = "";

for (var i = 0; i < editedItemsIds.length; i++)

{

Ids = Ids + editedItemsIds[i] + ":";

}

$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest(Ids);

}

else

{

alert("No pending changes to be processed");

}

editedItemsIds = [];

}

function RadGrid1_Command(sender, eventArgs)

{

//Note that this code has to be executed if you postback from external control instead from the grid (intercepting its onclientclick handler for this purpose),

//otherwise the edited values will be lost or not propagated in the source

if (editedItemsIds.length > 0)

{

if (eventArgs.get_commandName() == "Sort" || eventArgs.get_commandName() == "Page" || eventArgs.get_commandName() == "Filter")

{

if (confirm("Any unsaved edited values will be lost. Choose 'OK' to discard the changes before proceeding or 'Cancel' to abort the action and process them."))

{

editedItemsIds = [];

}

else

{

//cancel the chosen action

eventArgs.set_cancel(true);

//process the changes

ProcessChanges();

editedItemsIds = [];

}

window.onunload = function()

{

//this code should also be executed on postback from external control (which rebinds the grid) to process any unsaved data

if (editedItemsIds.length > 0)

{

if (confirm("Any unsaved edited values will be lost. Choose 'OK' to discard the changes before proceeding or 'Cancel' to abort the action and process them."))

{

editedItemsIds = [];

}

else

{

//process the changes

ProcessChanges();

editedItemsIds = [];

}

};

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"

DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="RadInputManager1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="RadInputManager1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadInputManager ID="RadInputManager1" EnableEmbeddedBaseStylesheet="False"

Skin="" runat="server">

<telerik:TextBoxSetting BehaviorID="StringBehavior" InitializeOnClient="true">

</telerik:TextBoxSetting>

</telerik:RadInputManager>

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" Width="97%" ShowStatusBar="True"

AllowSorting="True" PageSize="15" GridLines="None" AllowPaging="True" runat="server"

AutoGenerateColumns="False">

<MasterTableView TableLayout="Fixed" DataKeyNames="ID" EditMode="InPlace"

ClientDataKeyNames="ID" CommandItemDisplay="Bottom">

<CommandItemTemplate>

<div style="height: 30px; text-align: right;">

<asp:Image ID="imgCancelChanges" runat="server" ImageUrl="~/Images/cancel.gif"

AlternateText="Cancel changes" ToolTip="Cancel changes" Height="24px" Style="cursor: pointer;

margin: 2px 5px 0px 0px;" onclick="CancelChanges();"></asp:Image>

<asp:Image ID="imgProcessChanges" runat="server" ImageUrl="~/Images/ok.gif"

AlternateText="Process changes" ToolTip="Process changes" Height="24px" Style="cursor: pointer;

margin: 2px 5px 0px 0px;" onclick="ProcessChanges();"></asp:Image>

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="ID"

ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="NatlERX" DataField="NatlERX" HeaderText="NatlERX"

ReadOnly="True" HeaderStyle-Width="5%">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="changes" SortExpression="changes"

HeaderText="changes">

<ItemTemplate>

<asp:Label ID="lblchanges" runat="server" Text='<%# Eval("changes")%>'></asp:Label>

<asp:TextBox ID="txtchanges" runat="server" Text='<%# Bind("changes")%>' Width="95%"

Style="display: none"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="changes" SortExpression="changes"

HeaderText="changes">

<ItemTemplate>

<asp:Label ID="lblnote" runat="server" Text='<%# Eval("note")%>'></asp:Label>

<asp:TextBox ID="txtnote" runat="server" Text='<%# Bind("note")%>' Width="95%"

Style="display: none"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowCreated="RowCreated" OnRowClick="RowClick" OnCommand="RadGrid1_Command"

OnRowDestroying="RowDestroying"></ClientEvents>

</ClientSettings>

</telerik:RadGrid>

<br/>

<asp:Label ID="Label1" runat="server" EnableViewState="false"></asp:Label>

<br/>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:OSMGRConnectionString %>"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT id, changes, natlerx, note FROM tbl_scal_dpl where natlerx='132'"

runat="server" UpdateCommand="UPDATE [tbl_scal_dpl] SET [changes] = @changes, note = @note WHERE [ID] = @ID">

<UpdateParameters>

<asp:Parameter Name="changes" Type="String"></asp:Parameter>

<asp:Parameter Name="note" Type="String"></asp:Parameter>

<asp:Parameter Name="ID" Type="Int64"></asp:Parameter>

</UpdateParameters>

</asp:SqlDataSource>

</form>

</body>

</html>

Imports System

Imports Telerik.Web.UI

Imports System.Collections

Imports Telerik

Partial Public Class DPLReport

Inherits System.Web.UI.Page

Private Sub SetMessage(ByVal message As String)

Label1.Text = String.Format("<span>{0}</span>", message)

End Sub

Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles RadGrid1.ItemCreated

If TypeOf e.Item Is GridDataItem Then

Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)

Dim txtBox As TextBox = CType(dataItem.FindControl("txtchanges"), TextBox)

Dim stringSetting As TextBoxSetting = DirectCast(RadInputManager1.GetSettingByBehaviorID("StringBehavior"), TextBoxSetting)

stringSetting.TargetControls.Add(New TargetInput(txtBox.UniqueID, True))

txtBox = CType(dataItem.FindControl("txtnote"), TextBox)

stringSetting = DirectCast(RadInputManager1.GetSettingByBehaviorID("StringBehavior"), TextBoxSetting)

stringSetting.TargetControls.Add(New TargetInput(txtBox.UniqueID, True))

End If

End Sub

Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest

If e.Argument = String.Empty Then

RadGrid1.Rebind()

End If

Dim editedItemIds As String() = e.Argument.Split(":")

Dim i As Integer

For i = 0 To editedItemIds.Length - 2

Dim productId As String = editedItemIds(i)

Dim updatedItem As GridDataItem = RadGrid1.MasterTableView.FindItemByKeyValue("ID", Integer.Parse(productId))

UpdateValues(updatedItem)

Next

End Sub

Protected Sub UpdateValues(ByVal updatedItem As GridDataItem)

Dim txtBox As TextBox = CType(updatedItem.FindControl("txtchanges"), TextBox)

SqlDataSource1.UpdateParameters("changes").DefaultValue = txtBox.Text

txtBox = CType(updatedItem.FindControl("txtnote"), TextBox)

SqlDataSource1.UpdateParameters("note").DefaultValue = txtBox.Text

SqlDataSource1.UpdateParameters("ID").DefaultValue = updatedItem.GetDataKeyValue("ID").ToString()

Try

SqlDataSource1.Update()

Catch ex As Exception

SetMessage(Server.HtmlEncode("Unable to update Products. Reason: " + ex.StackTrace).Replace("'", "'").Replace(vbCrLf, "<br />"))

End Try

'SetMessage("Product with ID: " & updatedItem.GetDataKeyValue("ID") & " updated")

RadGrid1.Rebind()

End Sub

End Class

[Solved] RadGrid Client Edit with Batch Server Update Only Updates One Row

1 Answer, 1 is accepted