Client Edit and batch update

1 posts, 0 answers
  1. Naunton
    Naunton avatar
    70 posts
    Member since:
    Jun 2010

    Posted 04 Jan 2011 Link to this post

    Hi All,
    Please assist, I'm testing Demo Client Edit with batch server update

    After all when I browse, I got error, click on column for sorting, click on pageno. also got error.
    And double click on row to edit doesn't work also.
    Please advice ... Please see attached file fro your ref.
    My code is as below ....
    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="WebForm2.aspx.vb" Inherits="Jan2WebAppPrj.WebForm2" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
         <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
            </Scripts>
        </telerik:RadScriptManager>
           
        <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("ProductID");
                    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 "ProductName":
                            HideEditor(editedCell, "textbox");
                            break;
                        case "QuantityPerUnit":
                            HideEditor(editedCell, "textbox");
                            break;
                        case "UnitPrice":
                            HideEditor(editedCell, "textbox");
                            break;
                        case "UnitsInStock":
                            HideEditor(editedCell, "dropdown");
                            break;
                        case "UnitsOnOrder":
                            HideEditor(editedCell, "textbox");
                            break;
                        case "Discontinued":
                            HideEditor(editedCell, "checkbox");
                            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:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Default,Select,Textbox"
            EnableRoundedCorners="false" />
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadInputManager1" />
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadInputManager1" />
                        <telerik:AjaxUpdatedControl ControlID="Label1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <telerik:RadInputManager ID="RadInputManager1" EnableEmbeddedBaseStylesheet="false"
            Skin="" runat="server">
            <telerik:TextBoxSetting BehaviorID="StringBehavior" EmptyMessage="type here" />
            <telerik:NumericTextBoxSetting BehaviorID="CurrencyBehavior" EmptyMessage="type.."
                Type="Currency" Validation-IsRequired="true" MinValue="1" MaxValue="100000" />
            <telerik:NumericTextBoxSetting BehaviorID="NumberBehavior" EmptyMessage="type.."
                Type="Number" DecimalDigits="0" MinValue="0" MaxValue="100" />
        </telerik:RadInputManager>
     
    <telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" Width="97%" ShowStatusBar="True" EnableEmbeddedScripts="false"
            AllowSorting="True" PageSize="15" GridLines="None" AllowPaging="True" runat="server"
            AutoGenerateColumns="False">
            <MasterTableView TableLayout="Fixed" DataKeyNames="ProductID" EditMode="InPlace"
                ClientDataKeyNames="ProductID" CommandItemDisplay="Bottom">
                <CommandItemTemplate>
                    <div style="height: 30px; text-align: right;">
    <asp:Image ID="imgCancelChanges" runat="server" ImageUrl="~/img/save.png"
    AlternateText="Cancel changes" ToolTip="Cancel changes" Height="24px" Style="cursor: pointer;
    margin: 2px 5px 0px 0px;" onclick="CancelChanges();" />
    <asp:Image ID="imgProcessChanges" runat="server" ImageUrl="~/img/delete.jpg"
    AlternateText="Process changes" ToolTip="Process changes" Height="24px" Style="cursor: pointer;
    margin: 2px 5px 0px 0px;" onclick="ProcessChanges();" />
                    </div>
                </CommandItemTemplate>
                <Columns>
                    <telerik:GridBoundColumn UniqueName="ProductID" DataField="ProductID" HeaderText="ProductID"
                        ReadOnly="True" HeaderStyle-Width="5%" />
                    <telerik:GridTemplateColumn UniqueName="ProductName" SortExpression="ProductName"
                        HeaderText="ProductName" HeaderStyle-Width="15%">
                        <ItemTemplate>
                            <asp:Label ID="lblProductName" runat="server" Text='<%# Eval("ProductName") %>' />
                            <asp:TextBox ID="txtBoxName" runat="server" Text='<%# Bind("ProductName") %>' Width="95%"
                                Style="display: none" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="QuantityPerUnit" HeaderText="QuantityPerUnit"
                        SortExpression="QuantityPerUnit" HeaderStyle-Width="10%">
                        <ItemTemplate>
                            <asp:Label ID="lblQuantityPerUnit" runat="server" Text='<%# Eval("QuantityPerUnit") %>' />
                            <asp:TextBox ID="txtQuantityPerUnit" runat="server" Text='<%# Bind("QuantityPerUnit") %>'
                                Width="95%" Style="display: none" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice"
                        HeaderStyle-Width="7%">
                        <ItemTemplate>
                            <asp:Label ID="lblUnitPrice" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>' />
                            <asp:TextBox ID="txtUnitPrice" runat="server" Width="95%" Text='<%# Bind("UnitPrice") %>'
                                Style="display: none" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock"
                        HeaderStyle-Width="8%">
                        <ItemTemplate>
                            <asp:Label ID="lblUnitsInStock" runat="server" Text='<%# Eval("UnitsInStock") %>' />
    <asp:DropDownList ID="ddlUnitsInStock" runat="server" DataTextField="UnitsInStock"
    DataValueField="UnitsInStock" DataSourceID="SqlDataSource2" SelectedValue='<%# Bind("UnitsInStock") %>'
                                Style="display: none" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder"
                        HeaderStyle-Width="7%">
                        <ItemTemplate>
                            <asp:Label ID="lblUnitsOnOrder" runat="server" Text='<%# Eval("UnitsOnOrder") %>' />
                            <asp:TextBox ID="txtUnitsOnOrder" runat="server" Text='<%# Bind("UnitsOnOrder") %>'
                                Width="95%" Style="display: none" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn UniqueName="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued"
                        HeaderStyle-Width="6%">
                        <ItemTemplate>
                            <asp:Label ID="lblDiscontinued" runat="server" Text='<%# Eval("Discontinued") %>' />
                            <asp:CheckBox ID="chkBoxDiscontinued" runat="server" Checked='<%# Bind("Discontinued") %>'
                                Style="display: none" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings>
                <ClientEvents OnRowCreated="RowCreated" OnRowClick="RowClick" OnCommand="RadGrid1_Command"
                    OnRowDestroying="RowDestroying" />
            </ClientSettings>
        </telerik:RadGrid>
     
        <br />
        <asp:Label ID="Label1" runat="server" EnableViewState="false" />
        <br />
        <br />
        <asp:SqlDataSource ID="SqlDataSource1"
             ConnectionString="<%$ ConnectionStrings:NorthWindsConnectionString %>" SelectCommand="SELECT * FROM [Products]"
            runat="server" UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [QuantityPerUnit] = @QuantityPerUnit, [UnitPrice] = @UnitPrice, [UnitsInStock] = @UnitsInStock, [UnitsOnOrder] = @UnitsOnOrder, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID">
             <UpdateParameters>
                <asp:Parameter Name="ProductID" Type="Int16" />
                <asp:Parameter Name="ProductName" Type="String" />
                <asp:Parameter Name="QuantityPerUnit" Type="String" />
                <asp:Parameter Name="UnitPrice" Type="Decimal" />
                <asp:Parameter Name="UnitsInStock" Type="Int16" />
                <asp:Parameter Name="UnitsOnOrder" Type="Int16" />
                <asp:Parameter Name="Discontinued" Type="Boolean" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server"
             ConnectionString="<%$ ConnectionStrings:NorthWindsConnectionString %>"
             SelectCommand="SELECT Distinct [UnitsInStock] FROM [Products]" />
        <!-- content end -->
         
        </asp:Content>
    Imports System
    Imports Telerik.Web.UI
    Imports System.Collections
     
    Public Class WebForm2
        Inherits System.Web.UI.Page
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     
        End Sub
        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("txtBoxName"), TextBox)
                Dim stringSetting As TextBoxSetting = DirectCast(RadInputManager1.GetSettingByBehaviorID("StringBehavior"), TextBoxSetting)
                stringSetting.TargetControls.Add(New TargetInput(txtBox.UniqueID, True))
     
                txtBox = CType(dataItem.FindControl("txtQuantityPerUnit"), TextBox)
                stringSetting.TargetControls.Add(New TargetInput(txtBox.UniqueID, True))
     
                txtBox = CType(dataItem.FindControl("txtUnitPrice"), TextBox)
                Dim currencySetting As NumericTextBoxSetting = DirectCast(RadInputManager1.GetSettingByBehaviorID("CurrencyBehavior"), NumericTextBoxSetting)
                currencySetting.TargetControls.Add(New TargetInput(txtBox.UniqueID, True))
     
                txtBox = CType(dataItem.FindControl("txtUnitsOnOrder"), TextBox)
                Dim numericSetting As NumericTextBoxSetting = DirectCast(RadInputManager1.GetSettingByBehaviorID("NumberBehavior"), NumericTextBoxSetting)
                numericSetting.TargetControls.Add(New TargetInput(txtBox.UniqueID, True))
            End If
        End Sub
     
     
        Protected Sub UpdateValues(ByVal updatedItem As GridDataItem)
            Dim txtBox As TextBox = CType(updatedItem.FindControl("txtBoxName"), TextBox)
            SqlDataSource1.UpdateParameters("ProductName").DefaultValue = txtBox.Text
     
            txtBox = CType(updatedItem.FindControl("txtQuantityPerUnit"), TextBox)
            SqlDataSource1.UpdateParameters("QuantityPerUnit").DefaultValue = txtBox.Text
     
            txtBox = CType(updatedItem.FindControl("txtUnitPrice"), TextBox)
            SqlDataSource1.UpdateParameters("UnitPrice").DefaultValue = txtBox.Text
     
            txtBox = CType(updatedItem.FindControl("txtUnitsOnOrder"), TextBox)
            SqlDataSource1.UpdateParameters("UnitsOnOrder").DefaultValue = txtBox.Text
     
            Dim ddl As DropDownList = CType(updatedItem.FindControl("ddlUnitsInStock"), DropDownList)
            SqlDataSource1.UpdateParameters("UnitsInStock").DefaultValue = ddl.SelectedValue
     
            Dim chkBox As CheckBox = CType(updatedItem.FindControl("chkBoxDiscontinued"), CheckBox)
            SqlDataSource1.UpdateParameters("Discontinued").DefaultValue = chkBox.Checked
     
            SqlDataSource1.UpdateParameters("ProductID").DefaultValue = updatedItem.GetDataKeyValue("ProductID").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("ProductID") & " updated")
     
        End Sub
     
        Private Sub RadAjaxManager1_AjaxRequest1(ByVal sender As Object, ByVal e As Telerik.Web.UI.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 = CType(RadGrid1.MasterTableView.FindItemByKeyValue("ProductID", Integer.Parse(productId)), GridDataItem)
     
                UpdateValues(updatedItem)
            Next
        End Sub
    End Class

    Thanks and best regards.

    GoodNight ... Hope to see some suggestion tomorrow ... Thanks again.
Back to Top