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

How to get edited values client side when using inplace editing

1 Answer 143 Views
Grid
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 31 May 2012, 12:21 AM
I am trying to use the ASP.Net AJAX grid control with AJAX and web services only. I have run into a few problems with the inplace editing. Specifically, if I use the GridEditCommandColumn, clicking the edit button deletes the grid for some reason. If I add in a typical DataSourceID="SqlDataSource1" to the grid and master table, these buttons work as expected, but I don't want to depend on the SQlDataSource control, I would prefer to use AJAX and a web service. The other problem I had was trying to find the value of the edited inplace control after clicking the update button. I was only able to find the original value. I have attached code snippets below:

     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div>
    <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0" GridLines="None" Width="740"
            AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True"
            ShowStatusBar="True"
            Skin="Windows7" EnableEmbeddedSkins="false" AutoGenerateColumns="false"  >
        <ClientSettings>
            <Selecting CellSelectionMode="None" AllowRowSelect="True"></Selecting>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
            <Resizing AllowColumnResize="True" AllowRowResize="false" ResizeGridOnColumnResize="false"
                ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
            <ClientEvents OnRowSelected="rowSelected" OnCommand="RaiseCommand" />
        </ClientSettings>

    <MasterTableView AutoGenerateColumns="False" DataKeyNames="ICID" EditMode="InPlace" Width="530" FilterItemStyle-HorizontalAlign="Center" >
        <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>

        <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>

        <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>

        <Columns>
            <telerik:GridEditCommandColumn
                    ButtonType="ImageButton"
                    UniqueName="EditCommandColumn"
                    EditImageUrl="Skins/Windows7/Grid/Edit.gif"
                    CancelImageUrl="Skins/Windows7/Grid/Cancel.gif"
                    UpdateImageUrl="Skins/Windows7/Grid/Update.gif" >
                <ItemStyle CssClass="Button.Windows7" HorizontalAlign="Center" />
                <HeaderStyle Width="60" />
            </telerik:GridEditCommandColumn>
            <telerik:GridButtonColumn ConfirmText="Delete this product?" ConfirmDialogType="RadWindow"
                ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"
                UniqueName="DeleteColumn" ImageUrl="Skins/Windows7/Grid/Delete.gif">
                <HeaderStyle Width="40" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridButtonColumn>

            <telerik:GridBoundColumn DataField="ICID" DataType="System.Int32"
                FilterControlAltText="Filter ICID column" HeaderText="ICID" ReadOnly="True"
                SortExpression="ICID" UniqueName="ICID">
                <HeaderStyle Width="120" HorizontalAlign="Center" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Class"
                FilterControlAltText="Filter Class column" HeaderText="Class"
                SortExpression="Class" UniqueName="Class">
                <HeaderStyle Width="140" HorizontalAlign="Center"  />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Config"
                FilterControlAltText="Filter Config column" HeaderText="Config"
                SortExpression="Config" UniqueName="Config">
                <HeaderStyle Width="140" HorizontalAlign="Center" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>
            <telerik:GridCheckBoxColumn
                DataField="Active" DataType="System.Boolean"
                FilterControlAltText="Filter Active column" HeaderText="Active"
                UniqueName="Active" >
                <HeaderStyle Width="60" HorizontalAlign="Center" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridCheckBoxColumn>
            <telerik:GridBoundColumn DataField="TEC"
                FilterControlAltText="Filter TEC column" HeaderText="TEC" SortExpression="TEC"
                UniqueName="TEC" >
                <HeaderStyle Width="200" HorizontalAlign="Center" />
                <ItemStyle HorizontalAlign="Center" />
            </telerik:GridBoundColumn>
           </Columns>

        <EditFormSettings>
        <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
        </EditFormSettings>

    </MasterTableView>

<FilterMenu EnableImageSprites="False"></FilterMenu>
    </telerik:RadGrid>

The Javascript:

      function UpdateGrid()
        {
            var data = 1;
            PageMethods.GetData(data, callUpdateGrid, callError);
        }

        function callUpdateGrid(result)
        {
            if (null == result)
            {
                alert('No Data');
                return;
            }

            var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
            tableView.set_dataSource(result);
            tableView.dataBind();
        }

        function RaiseCommand(sender, eventArgs)
        {
// *******************************'
// How do I get the new value from the edit control here?
// The value variable always returns the previous value.
// *******************************'

            //retrieve the current commandName and commandArgument
            var cmd = eventArgs.get_commandName();
            var arg = eventArgs.get_commandArgument();
            var result = String.format("CommandName: {0}, CommandArgument: {1}", cmd, arg);
            var value = '';
            if ('Page' != cmd)
            {
                var grid = $find("<%= RadGrid1.ClientID %>");
                var mastertable = grid.get_masterTableView();
                ICID = getDataItemKeyValue(grid, mastertable.get_dataItems()[arg]);
                var row = mastertable.get_dataItems()[arg];
                value = mastertable.getCellByColumnUniqueName(row, "TEC").innerHTML;
            }
            alert(result + ', ' + ICID + ', ' + value);
          
        }

The codebehind:

       [WebMethod]
        public static IList<Model> GetData(int arg)
        {
            IList<Model> ilm = new List<Model>();

            ilm.Add( new Model() { Active = "true", Class = "ABC", Config = "A1", ICID = 1, TEC = "TEC1" });
            ilm.Add(new Model() { Active = "", Class = "DEF", Config = "A2", ICID = 2, TEC = "TEC2" });
            ilm.Add(new Model() { Active = "true", Class = "GHI", Config = "A3", ICID = 3, TEC = "TEC3" });

            return ilm;
        }

Can you tell me how to get inplace editing to work with the code above, and how to get the new values from the edited controls?

Thanks.

1 Answer, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 04 Jun 2012, 07:23 AM
Hi John,

Unfortunately the RadGrid does not support the desired functionality. In order to show the Edit form of the grid you need a post back to the server. In this case the post back is required because the edit form of the RadGrid needs to extract all values from the edited item. Also the Edit Form could contain other script controls which need to be initialized on the server side and their scripts to be registered on the client.
The client side insert/update could be achieved only with external form like is shown into the following  example:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/insertupdatedelete/defaultcs.aspx
Also more about client side data binding limitations you could find here:
http://www.telerik.com/help/aspnet-ajax/grid-client-side-binding-specifics.html  (Client side data-binding limitations)

I hope this helps.

All the best,
Radoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Share this question
or