RadGrid InPlace Editing Problem

[Ben]

I am struggling to get a RadGrid to edit a few columns. It will go into edit mode for checkbox fields, but they will revert to their prior values when editing is complete. For numeric columns, it *looks* like they are editable, but values can not be changed at all. I've looked at all the code examples I can find and nothing seems to work.
Here's the aspx:

<script type="text/javascript">

     var hasChanges, inputs, dropdowns, editedRow;

     function RowClick(sender, eventArgs)
     {
         if (editedRow != null && hasChanges)
         {
             if (confirm("Update changes?"))
             {
                 hasChanges = false;
                 $find("<%= MasterGrid.MasterTableView.ClientID %>").updateItem(editedRow);
             }
             else
             {
                 hasChanges = false;
             }
         }
     }

     function RowDblClick(sender, eventArgs)
     {
         if (editedRow && hasChanges)
         {
             if (confirm("Update changes?"))
             {
                 hasChanges = false;
                 $find("<%= MasterGrid.MasterTableView.ClientID %>").updateItem(editedRow);
             }
             else
             {
                 hasChanges = false;
             }
         }

         editedRow = eventArgs.get_itemIndexHierarchical();
         $find("<%= MasterGrid.MasterTableView.ClientID %>").editItem(editedRow);
     }

     function GridCreated(sender, eventArgs)
     {
         var gridElement = sender.get_element();
         var elementsToUse = [];

         inputs = gridElement.getElementsByTagName("input");

         for (var i = 0; i < inputs.length; i++)
         {
             if (inputs[i].type.toLowerCase() == "hidden")
             {
                 continue;
             }

             Array.add(elementsToUse, inputs[i]);
             inputs[i].onchange = TrackChanges;
         }

         dropdowns = gridElement.getElementsByTagName("select");

         for (var i = 0; i < dropdowns.length; i++)
         {
             dropdowns[i].onchange = TrackChanges;
         }

         setTimeout(function ()
         {
             if (elementsToUse[0]) elementsToUse[0].focus();
         }, 100);
     }

     function TrackChanges(e)
     {
          hasChanges = true;
     }


     function isChildOf(parentId, element)
     {
         while (element) {
             if (element.id && element.id.indexOf(parentId) > -1) {
                 return true;
             }
             element = element.parentNode;
         }
         return false;
     }

     function OnMoveToSelectedClick(sender, args) {

         var srcView = $find("<%=  ProfileGrid.ClientID %>").get_masterTableView();
         var dstView = $find("<%=  SelectedGrid.ClientID %>").get_masterTableView();
         var dataItems = srcView.get_dataItems();
         var selectedRows = srcView.get_selectedItems();

         var srcData = "<%=SelectedItems %>";
         var dstData = "<%=SelectedItems %>";

         for (var i = 0; i < selectedRows.length; i++)
         {
             var row = selectedRows[i];
             var cell = srcView.getCellByColumnUniqueName(row, "ItemID");
             //here cell.innerHTML holds the value of the cell
             var itemID = cell.innerHTML;

             srcView.deleteItem(dataItems[i].get_element());
         }

         return false;
     }

     function rowDropping(sender, eventArgs) {
         // Fired when the user drops a grid row

         var node = eventArgs.get_destinationHtmlElement();

         if (!isChildOf('<%=SelectedGrid.ClientID %>', node)) {
             eventArgs.set_cancel(true);
         } else {

         }

     }

</script>

<AxnGrids:AxnGrid
ID="MasterGrid"
runat="server"
Width="1550"
Height="356"
AutoGenerateColumns="False"
InitialResizeToFit="False"
AllowMultiRowSelection="False"
BorderStyle="Solid"
BorderColor="black"
BorderWidth="1px"
Visible="True"
OnPreRender="MasterGrid_PreRender"
OnNeedDataSource="MasterGrid_NeedDataSource"
AllowMultiRowEdit="False">

<ClientSettings
AllowRowsDragDrop="False"
AllowColumnsReorder="true"
ReorderColumnsOnClient="true">
<Selecting AllowRowSelect="False" EnableDragToSelectRows="false" CellSelectionMode="SingleCell"/>
<Scrolling AllowScroll="True" UseStaticHeaders="True" FrozenColumnsCount="1"/>
<ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" />
</ClientSettings>
<MasterTableView
CommandItemDisplay="Top"
MasterKeyField="ItemID"
Width="100%"
TableLayout="Fixed"
EditMode="InPlace"
AllowAutomaticUpdates="False"
AllowAutomaticDeletes="False"
AllowAutomaticInserts="False">
<CommandItemSettings ShowAddNewRecordButton="False"/>
<NoRecordsTemplate>
<div style="height: 30px; cursor: pointer;">No inventory items found.</div>
</NoRecordsTemplate>
<Columns>
<telerik:GridEditCommandColumn Visible="True" HeaderStyle-Width="100px" />
<telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false" />
<AxnGrids:AxnGridBoundColumn UniqueName="ItemID" DataField="ItemID" HeaderText="ItemID" Visible="False" ReadOnly="True"/>
<AxnGrids:AxnGridBoundColumn UniqueName="PartNumber" DataField="PartNumber" HeaderText="Part" HeaderStyle-Width="100px" ReadOnly="True"/>
<AxnGrids:AxnGridBoundColumn UniqueName="Description" DataField="Description" HeaderText="Description" HeaderStyle-Width="200px" HeaderStyle-HorizontalAlign="Left" ReadOnly="True"/>
<AxnGrids:AxnGridBoundColumn UniqueName="ShopID" DataField="ShopID" HeaderText="Shop" HeaderStyle-Width="100px" ReadOnly="True"/>
<AxnGrids:AxnGridBoundColumn UniqueName="Manufacturer" DataField="Manufacturer" HeaderText="Manufacturer" HeaderStyle-Width="100px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="OnHand" DataField="OnHand" HeaderText="On Hand" HeaderStyle-Width="100px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="OnOrder" DataField="OnOrder" HeaderText="On Order" HeaderStyle-Width="100px" ReadOnly="True"/>
<telerik:GridCheckBoxColumn UniqueName="Seasonal" DataField="Seasonal" HeaderText="Seasonal" HeaderStyle-Width="100px" ReadOnly="False" />
<telerik:GridCheckBoxColumn UniqueName="UseLeadTime" DataField="UseLeadTime" HeaderText="Use Lead Time" HeaderStyle-Width="150px" ReadOnly="False"/>
<telerik:GridCheckBoxColumn UniqueName="UseOrderCycle" DataField="UseOrderCycle" HeaderText="Use Order Cycle" HeaderStyle-Width="200px" ReadOnly="False"/>
<telerik:GridNumericColumn UniqueName="ServiceLevel" DataField="ServiceLevel" HeaderText="Service Level" HeaderStyle-Width="100px" ReadOnly="False"/>
<telerik:GridNumericColumn UniqueName="ForecastPeriod" DataField="ForecastPeriod" HeaderText="Forecast Period" HeaderStyle-Width="140px" ReadOnly="False"/>
<telerik:GridNumericColumn UniqueName="DemandScope" DataField="DemandScope" HeaderText="Demand Scope" HeaderStyle-Width="150px" ReadOnly="False"/>
<telerik:GridNumericColumn UniqueName="AverageLeadTime" DataField="AverageLeadTime" HeaderText="Average Lead Time" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="AverageOrderCycle" DataField="AverageOrderCycle" HeaderText="Average Order Cycle" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="TotalDemand" DataField="TotalDemand" HeaderText="Total Demand" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="AverageDemand" DataField="AverageDemand" HeaderText="Average Demand" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="TotalVariance" DataField="TotalVariance" HeaderText="Total Variance" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="AverageVariance" DataField="AverageVariance" HeaderText="Average Variance" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="StandardDeviation" DataField="StandardDeviation" HeaderText="Standard Deviation" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="ServiceFactor" DataField="ServiceFactor" HeaderText="Service Factor" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="DemandCost" DataField="DemandCost" HeaderText="Demand Cost" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="AverageInventoryCost" DataField="AverageInventoryCost" HeaderText="Average Inventory Cost" HeaderStyle-Width="160px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="LeadTimeFactor" DataField="LeadTimeFactor" HeaderText="Lead Time Factor" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="OrderCycleFactor" DataField="OrderCycleFactor" HeaderText="Order Cycle Factor" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="Turns" DataField="Turns" HeaderText="Turns" HeaderStyle-Width="130px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="HighPoint" DataField="HighPoint" HeaderText="High Point" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="RecReorderPoint" DataField="RecReorderPoint" HeaderText="Recommended Reorder Point" HeaderStyle-Width="200px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="RecSafetyPoint" DataField="RecSafetyPoint" HeaderText="Recommended Safety Point" HeaderStyle-Width="190px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="AverageCost" DataField="AverageCost" HeaderText="Average Cost" HeaderStyle-Width="150px" ReadOnly="True"/>
<telerik:GridNumericColumn UniqueName="InventoryValue" DataField="InventoryValue" HeaderText="Inventory Value" HeaderStyle-Width="150px" ReadOnly="True"/>
</Columns>
</MasterTableView>
</AxnGrids:AxnGrid>

The data that the grid is binding to is a System.Collections.Generic.List of items coming from a web service.

I found the double-click edit code in the documentation, I believe, but I would also like for editing to not require a double click. I would prefer that edits be started as soon as the cell has focus and edits committed as soon as the cell loses focus. So if there are any pointers on how to do that I would appreciate the help. But, obviously, just getting the data to commit at all would be a primary objective.

Thanks,

Ben
TMW Systems

[Ben]

I got the checkbox columns working using a templateColumn. Still no luck on the numeric columns though.

[Ben]

Sorry forgot this.

ASP.NET version: 4 

OS: Win 7 Pro 64 bit

exact browser version: IE 9.0.8112.16421

exact version of the Telerik product: 11.1

preferred programming language: C#

The Axn controls are just our wrappers around the Telerik controls, btw. The PreRender doesn't do anything beyond changing some minor visual aspects of the grid, such as setting some border color and horizontal alignment.

[Ben]

I could use some help on this. Do I need to submit a support ticket or something?

[Ben]

I changed one of my NumericColums that needs to be editable to a TemplateColumn and it seems to work:

<telerik:GridTemplateColumn UniqueName="ServiceLevel" DataField="ServiceLevel" HeaderText="Service Level" HeaderStyle-Width="100px" ReadOnly="False" ColumnEditorID="TextEditor1">
    <EditItemTemplate>
        <telerik:RadNumericTextBox ID="ServiceLevelEditBox" runat="server" Text='<%# Bind("ServiceLevel") %>' />
    </EditItemTemplate>
    <ItemTemplate>
        <telerik:RadNumericTextBox ID="ServiceLevelItemBox" runat="server" Text='<%# Bind("ServiceLevel") %>' autopostback="true"/>
    </ItemTemplate>
</telerik:GridTemplateColumn>

I don't know why it didn't work before, but even this solution doesn't seem to work consistently--it was allowing the edit, but then reverting to the prior value when it exited edit mode. For the moment it is working, however.

Thanks for all the help...

[Ben]

Apparently I only *thought* it was working because I only had one row I was editing. When I move to another row, the values revert to their original values, so editing is still not happening. No error message to clue me in as to why the values don't take. They just go away.

So... Back to the drawing board.

I'm surprised that something that should be so simple is so difficult to do. I've wasted over a week on just getting this grid to edit a row.

[Maria Ilieva]

Hi Ben,

I would suggest you to review the online demo below:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultcs.aspx

You could invoke the same logic as OnRowDblClick in RowClick event by checking what is the current state of the cell and execute Update command manually if there is edited mode at the moment.

I hope this helps.

All the best,
Maria Ilieva
the Telerik team

[Ben]

Hi Maria, thanks for the help.

I found that, while the grid looked like it was going into edit mode, it was in fact not in edit mode. I could type values into the edit boxes, change the checkboxes etc., but it wasn't real. So I added an editcommandcolumn and now everything is just peachy.

Thanks again,

John Ben Davis