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

Problem editing RadGrid

8 Answers 196 Views

General Discussions

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

Jesse Roper asked on 12 Oct 2012, 12:19 AM

I'm working off of the following example to implement editing of a cell in my grid when the cell is clicked:

http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultcs.aspx

I'd like it to work just like in the example, but based on a single-click. I can't get it to work as I keep getting the following error buried away in Telerik.Web.UI.WebResource:

0x800a139e - Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: The string was not recognized as a valid format.

If anyone can lend any assistance, I will you owe you my first-born, as I am pulling my hair out trying to get this to work.

Thank you

My markup is below:

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

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

<script type="text/javascript">

var hasChanges, inputs, dropdowns, editedRow;

function RowClick(sender, eventArgs) {

if (editedRow && hasChanges) {

hasChanges = false;

if (confirm("Update changes?")) {

$find("<%= detailsGrid.ClientID %>").get_masterTableView().updateItem(editedRow);

}

function RowDblClick(sender, eventArgs) {

editedRow = eventArgs.get_itemIndexHierarchical();

$find("<%= detailsGrid.ClientID %>").get_masterTableView().editItem(editedRow);

}

function GridCommand(sender, args) {

if (args.get_commandName() != "Edit") {

editedRow = null;

}

function GridCreated(sender, eventArgs) {

var gridElement = sender.get_element();

var elementsToUse = [];

inputs = gridElement.getElementsByTagName("input");

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

var lowerType = inputs[i].type.toLowerCase();

if (lowerType == "hidden" || lowerType == "button" || lowerType == "checkbox") {

continue;

}

if (inputs[i].id.indexOf("PageSizeComboBox") == -1) {

Array.add(elementsToUse, inputs[i]);

}

inputs[i].onchange = TrackChanges;

}

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

}

function TrackChanges(e) {

hasChanges = true;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Office2010Blue" MultiPageID="radPageViews" SelectedIndex="0" Align="Justify" Width="220px"

ReorderTabsOnSelect="true">

<Tabs>

<telerik:RadTab Text="Details" />

<telerik:RadTab Text="Summary" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="radPageViews" SelectedIndex="0" CssClass="multiPage">

<telerik:RadPageView ID="RadPageView1" runat="server">

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="detailsGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="detailsGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadGrid ID="detailsGrid" runat="server" CellSpacing="0" Skin="Office2007" GridLines="Vertical" AllowSorting="true" AllowPaging="true"

PageSize="10" AllowMultiRowSelection="true" OnNeedDataSource="detailsGrid_NeedDataSource" OnItemDataBound="detailsGrid_ItemDataBound"

OnItemCreated="detailsGrid_ItemCreated" OnItemUpdated="detailsGrid_ItemUpdated" AllowAutomaticUpdates="true">

<ClientSettings ReorderColumnsOnClient="true" Selecting-CellSelectionMode="SingleCell">

<Resizing AllowColumnResize="true" EnableRealTimeResize="true" ShowRowIndicatorColumn="true" AllowResizeToFit="true" />

<ClientEvents OnRowClick="RowClick" OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />

</ClientSettings>

<MasterTableView TableLayout="Fixed" AutoGenerateColumns="false" DataKeyNames="actualid" ShowFooter="true" EditMode="InPlace">

<HeaderStyle HorizontalAlign="Center" Width="135px" Font-Bold="true" />

<Columns>

<telerik:GridTemplateColumn HeaderText="Exclude" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="80px">

<ItemTemplate>

<asp:CheckBox runat="server" ID="ExcludeCheckBox" AutoPostBack="true" Checked='<%# bool.Parse(Eval("Exclude").ToString()) %>'

OnCheckedChanged="ExcludeCheckBox_CheckedChanged" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridCheckBoxColumn UniqueName="detailsGridDeltaOppCol" HeaderText="Delta Opp" DataField="DeltaOpp" ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="false" HeaderStyle-Width="80px" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridOppManagerCol" HeaderText="Opp Manager" DataField="FullName" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridVerticalTeamCol" HeaderText="Vertical Team" DataField="VerticalTeam" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridIndustryCol" HeaderText="Industry" DataField="Industry" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridAccountCol" HeaderText="Account" DataField="Account" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridOpportunityCol" HeaderText="Opportunity" DataField="OpportunityName" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridBoundColumn UniqueName="detailsGridSKUCol" HeaderText="SKU" DataField="ActualID" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridDateTimeColumn UniqueName="detailsGridFirstShipDateCol" HeaderText="First Ship Date" DataField="FirstShipDate" DataFormatString="{0:MM/dd/yyyy}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridQuantityCol" HeaderText="Quantity" DataField="Quantity" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridUnitPriceCol" HeaderText="Unit Price" DataField="UnitPrice" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridTotalCol" HeaderText="Total" DataField="Total" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridProbabilityCol" HeaderText="Probability" DataField="Probability" ItemStyle-HorizontalAlign="Right" DataFormatString="{0}%" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridDealerCol" HeaderText="Dealer" DataField="Dealer" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridScreenTypeCol" HeaderText="Screen Type" DataField="ScreenType" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridCompanyCol" HeaderText="Company" DataField="Company" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridFactoryCol" HeaderText="Factory" DataField="Factory" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridProductDescCol" HeaderText="Prod. Description" DataField="ProductDescription" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridProductFamilyCol" HeaderText="Product Family" DataField="ProductFamily" ItemStyle-Wrap="false" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthOneCol" DataField="MonthOne" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthOneCostCol" DataField="MonthOneCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthTwoCol" DataField="MonthTwo" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthTwoCostCol" DataField="MonthTwoCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthThreeCol" DataField="MonthThree" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthThreeCostCol" DataField="MonthThreeCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthFourCol" DataField="MonthFour" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthFourCostCol" DataField="MonthFourCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthFiveCol" DataField="MonthFive" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthFiveCostCol" DataField="MonthFiveCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthSixCol" DataField="MonthSix" ItemStyle-HorizontalAlign="Right" ColumnEditorID="numericColumnEditor" />

<telerik:GridNumericColumn UniqueName="detailsGridMonthSixCostCol" DataField="MonthSixCost" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridTotalQtyCol" HeaderText="Total Qty." DataField="TotalQuantity" ItemStyle-HorizontalAlign="Right" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridTotalRevCol" HeaderText="Total Rev." DataField="TotalRevenue" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:C2}" ReadOnly="true" />

<telerik:GridNumericColumn UniqueName="detailsGridNextUserCol" HeaderText="Next User" DataField="NextUser" ReadOnly="true" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:GridNumericColumnEditor ID="numericColumnEditor" runat="server" NumericTextBox-Width="20px" />

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

</telerik:RadPageView>

</telerik:RadMultiPage>

8 Answers, 1 is accepted

answered on 16 Oct 2012, 02:39 PM

RadGridEditOnDoubleClick.zip

Hello Jesse,

I was not able to reproduce your issue. I prepared a sample based on the code which you provided and attached it to this thread. All the changes I have done are to reduce the number of columns and use Northwind database as datasource.
Give it a try and let me know how it differs from your real setup.

Greetings,
Kostadin
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.

answered on 22 Oct 2012, 06:36 PM

Thanks for your response -

I was able to get it working with a separate grid, but once I incorporated into my "detailsGrid", I got the following error when I click a row and attempt to invoke the edit mode:

Unhandled exception at line 15, column 16485 in http://localhost:63919/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=4.0.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:en-US:10a773fc-9022-49ec-acd6-8830962d8cbb:ea597d4b:b25378d2;Telerik.Web.UI,+Version=2012.2.815.40,+Culture=neutral,+PublicKeyToken=121fae78165ba3d4:en-US:bd12f06c-2391-4523-868e-0017245d9792:16e4e7cd:f7645509:24ee1bba:f46195d3:2003d0b8:1e771326:aa288e2d:b7778d6c:7165f74:e330518b:8e6f0d33:6a6d718d:ed16cbdc:11a04f7e:58366029:4b09f651:a2c5be80

0x800a139e - Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: The string was not recognized as a valid format.

Any suggestions?

Thank you

answered on 22 Oct 2012, 07:48 PM

I did get this to work. However, the issue I am now facing is strange. on row double-click, the row enters edit mode which is great. When I click another row, nothing happens even though I have the code there :

function RowClick(sender, eventArgs) {

if (editedRow && hasChanges) {

alert('edited row & has changes');

hasChanges = false;

$find("<%= DetailsGrid.ClientID %>").get_masterTableView().updateItem(editedRow);

}

}



The strange thing is that if I set a breakpoint in visual studio on that javascript function, the debugger stops there and I can walk through to get the desired behavior.



Any thoughts?

answered on 25 Oct 2012, 09:57 PM

Thank you for your responses. I have the editing working with a double click of the row and the enter key to save the record to the datasource. This is fine. The grid updates right away and there is no flashing thanks to my use of the ajax manager for this grid. When I change the selection of this grid, I want another grid's datasource to change accordingly. This works and I was able to to get the 2nd grid to update dynamically by also using the ajax manager. However, when I try to put these together, they don't work together. If either is alone they work, but together they break. Is there any way around this or is this a limitation?

Thank you

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="DetailsGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="DetailsGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="HistoryGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="HistoryGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

answered on 30 Oct 2012, 12:00 PM

Hello Jesse,

Try using the following approach:

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="DetailsGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="DetailsGrid" />

<telerik:AjaxUpdatedControl ControlID="HistoryGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="HistoryGrid">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="HistoryGrid" />

<telerik:AjaxUpdatedControl ControlID="DetailsGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

This way when you make some changes in the DetailsGrid/HistoryGrid, the DetailsGrid/HistoryGrid will be updated as well.

Regards,
Kostadin
the Telerik team

answered on 30 Oct 2012, 05:00 PM

Thanks Kostadin -

If I configure the ajax manager this way and enable post back on row selection for the details grid, I lose my double-click to edit functionality that i set up through javascript, since the post back cancels out the double click to edit. Even if I use an edit column instead of using the double click functionality to edit, I lose the ability to save the record either by clicking another row or pressing enter (which I have configured to update the record and cancel the default behavior through javascript:

function RowClick(sender, e) {

	$(find('<%= DetailsGrid.ClientID %>').get_masterTableView().updateItem(editedRow)

}



function KeyPress(sender, e) {

if (e.get_domEvent().rawEvent.keyCode == 13) { // Enter key

if (editedRow && hasChanges) {

hasChanges = false

UpdateRow()

e.get_domEvent().preventDefault()

e.get_domEvent().stopPropagation()

}

Is it possible to update the history grid when the selection changes in the details grid without posting back? I'd like to keep the double-click to edit functionality of my details grid and update the history grid when the selection changes in the details grid. It doesn't seem too advanced.

Thanks again for your response.

answered on 02 Nov 2012, 02:47 PM

RadGridEditOnDoubleClick.zip

Hello Jesse,

I was not able to reproduce your issue. I modified the sample from one of my previous posts and attached it again. Give it a try and let me know how it differs from your real setup.

All the best,
Kostadin
the Telerik team