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

Adding a record through inline manipulation of empty row

5 Answers 120 Views

Grid

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

Matthew asked on 12 Aug 2014, 08:11 PM

radgrid.png

Hello everyone,

I was wondering if it is possible to add a new record within radgrid by editing each column field directly in the grid. That is, is it possible to input values directly into a specific (empty) row and have the grid save the row as a new record. I have worked with the edit form template, but my client is insistent on being able to add a record directly from the grid, rather than having a form appear. (I have already implemented a separate form for inputting records) I have included an image to help illustrate the functionality I am trying to achieve. I will supply more information if my goal is still unclear.

Thanks,
Matt

5 Answers, 1 is accepted

Accepted

answered on 13 Aug 2014, 02:17 PM

Hello Shinu,

Thank you for linking me to that piece of functionality. It is exactly what I am looking for. However, I have run into a problem when trying to implement batch editing. Before adding the EditType property to MasterTableView I am able to click on the "Add New Record" command and the standard form is generated above the grid. After adding the EditType="Batch" property I run into an error when pressing the "Add New Record" button. This problem occurs when pressing on any row in the grid as well.

Error: "Microsoft JScript runtime error: JScript object expected"
Points to: [dynamic] },getColumnUniqueNameByCellIndex:function(d,c){var a=Array.prototype.concat.apply([],d.cells).sort(function(e,f){return e.cellIndex-f.cellIndex;
});

I have looked over several other threads involving a similar issue, but I am unable to apply any of the fixes recommended in those threads to my case. Do you know why this issue is present? I have Included my .aspx code below.

Thanks,
Matt

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"

CodeBehind="ActionItem.aspx.cs" Inherits="CompTool.ActionItem" %>

<%@ Register Assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089"

Namespace="System.Web.UI.WebControls" TagPrefix="asp" %>

<%@ Register Namespace="CompTool" TagPrefix="custom" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

<style type="text/css">

.style1

{

width: 80%;

margin-left: auto !important;

margin-right: auto !important;

}

</style>

<style type="text/css">

div.RadGrid

{

margin-left: auto !important;

margin-right: auto !important;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">

</asp:ScriptReference>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js">

</asp:ScriptReference>

</Scripts>

</telerik:RadScriptManager>

<table class="style1" width="80%">

<tr>

<td>

<asp:Label ID="LblBatch" runat="server" Font-Bold="true" Text="Action Items"></asp:Label>

</td>

<td>

</td>

</tr>

</table>

<br />

<telerik:RadGrid ID="RadGridActionItem" runat="server" AllowSorting="True" AllowPaging="true"

AllowFilteringByColumn="True" OnNeedDataSource="RadGridActionItem_NeedDataSource"

OnPageIndexChanged="RadGridActionItem_PageIndexChanged" OnUpdateCommand="RadGridActionItem_UpdateCommand"

OnItemCreated="RadGridAction_ItemCreated" OnDeleteCommand="RadGridActionItem_DeleteCommand"

OnInsertCommand="RadGridActionItem_InsertCommand" AllowMultiRowEdit="True" OnItemDataBound="RadGridActionItem_ItemDataBound"

Width="80%" HorizontalAlign="Center" PageSize="15">

<GroupingSettings CaseSensitive="false" />

<MasterTableView AutoGenerateColumns="false" ShowFooter="true" DataKeyNames="Action_Item_Id"

ClientDataKeyNames="Action_Item_Id" CommandItemDisplay="Top" Width="100%" HorizontalAlign="Center"

EditMode="Batch">

<BatchEditingSettings EditType="Row" />

<Columns>

<telerik:GridNumericColumn DataField="Action_Item_Id" UniqueName="Action_Item_Id"

HeaderText="Action Item ID" ForceExtractValue="Always" FilterControlWidth="75px"

AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridNumericColumn>

<telerik:GridNumericColumn DataField="Result_Id" UniqueName="Result_Id" HeaderText="Result ID"

FilterControlWidth="65px" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false">

</telerik:GridNumericColumn>

<telerik:GridBoundColumn DataField="Related_Result_Id" UniqueName="Related_Result_Id"

HeaderText="Related Result ID" FilterControlWidth="75px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Status_Field" UniqueName="Status_Field" HeaderText="Status"

FilterControlWidth="83px" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Assigned_To" UniqueName="Assigned_To" HeaderText="Assigned To"

FilterControlWidth="70px" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="Open_Date" UniqueName="Open_Date" HeaderText="Open Date"

FilterControlWidth="80px" AutoPostBackOnFilter="true" PickerType="DatePicker"

EnableTimeIndependentFiltering="true" ShowFilterIcon="true" DataFormatString="{0:M/d/yyyy}">

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn DataField="Due_Date" UniqueName="Due_Date" HeaderText="Due Date"

FilterControlWidth="80px" AutoPostBackOnFilter="true" PickerType="DatePicker"

EnableTimeIndependentFiltering="true" ShowFilterIcon="true" DataFormatString="{0:M/d/yyyy}">

</telerik:GridDateTimeColumn>

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

FilterControlWidth="70px" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false">

</telerik:GridBoundColumn>

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

FilterControlWidth="70px" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false">

</telerik:GridBoundColumn>

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

FilterControlWidth="70px" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="User_System_Id" UniqueName="User_System_Id" HeaderText="User System ID"

FilterControlWidth="70px" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false">

</telerik:GridBoundColumn>

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

FilterControlWidth="70px" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Comparison_Type" UniqueName="Comparison_Type"

HeaderText="Comparison Type" FilterControlWidth="80px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Actual_Access_Level" UniqueName="Actual_Access_Level"

HeaderText="Actual Access Level" FilterControlWidth="90px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Auth_Access_Level" UniqueName="Auth_Access_Level"

HeaderText=" Auth Access Level" FilterControlWidth="90px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Investigation_Results" UniqueName="Investigation_Results"

HeaderText="Investigation Results" FilterControlWidth="150px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Historical_Authorization_Ticket" UniqueName="Historical_Authorization_Ticket"

HeaderText="Historical Auth Ticket" FilterControlWidth="100px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Historical_Provisioning_Ticket" UniqueName="Historical_Provisioning_Ticket"

HeaderText="Historical Prov Ticket" FilterControlWidth="100px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Resolution_Steps" UniqueName="Resolution_Steps"

HeaderText="Resolution Steps" FilterControlWidth="150px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Resolution_Authorization_Ticket" UniqueName="Resolution_Authorization_Ticket"

HeaderText="Resolution Auth Ticket" FilterControlWidth="100px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Resolution_Provisioning_Ticket" UniqueName="Resolution_Provisioning_Ticket"

HeaderText="Resolution Prov Ticket" FilterControlWidth="100px" AutoPostBackOnFilter="true"

CurrentFilterFunction="EqualTo" ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="QC_Review" UniqueName="QC_Review" HeaderText="QC/Review"

DataType="System.Boolean" AllowFiltering="false">

</telerik:GridBoundColumn>

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

FilterControlWidth="80px" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="Review_Date" UniqueName="Review_Date" HeaderText="Review Date"

FilterControlWidth="80px" AutoPostBackOnFilter="true" PickerType="DatePicker"

EnableTimeIndependentFiltering="true" ShowFilterIcon="true" EmptyDataText=" "

DataFormatString="{0:M/d/yyyy}">

</telerik:GridDateTimeColumn>

<telerik:GridDateTimeColumn DataField="Resolved_Date" UniqueName="Resolved_Date"

HeaderText="Resolved Date" FilterControlWidth="80px" AutoPostBackOnFilter="true"

PickerType="DatePicker" EnableTimeIndependentFiltering="true" ShowFilterIcon="true"

DataFormatString="{0:M/d/yyyy}">

</telerik:GridDateTimeColumn>

<telerik:GridButtonColumn Text="Delete" CommandName="Delete" ButtonType="ImageButton"

ConfirmDialogType="RadWindow" ConfirmText="Are you sure you want to delete this action item?" />

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="Action_Item_Id" SortOrder="Descending" />

</SortExpressions>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowContextMenu="RowContextMenu" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="2">

</Scrolling>

<Selecting AllowRowSelect="True"></Selecting>

<ClientEvents OnRowDblClick="RowDblClick" />

</ClientSettings>

</telerik:RadGrid>

<br />

<table class="style1" width="85%">

<tr>

<td align="left">

<telerik:RadButton ID="NewAIButton" runat="server" Text="New Action Item" ButtonType="LinkButton"

OnClick="NewAI_ButtonClick">

</telerik:RadButton>

<telerik:RadButton ID="RefreshButton" runat="server" Text="Refresh" ButtonType="LinkButton">

</telerik:RadButton>

</td>

<td align="right">

<telerik:RadButton ID="BackButton" runat="server" Text="Back" ButtonType="LinkButton"

NavigateUrl="~/">

</telerik:RadButton>

</td>

</tr>

</table>

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />

<telerik:RadContextMenu ID="RadMenu1" runat="server" OnItemClick="RadMenu1_ItemClick"

OnClientItemClicking="StandardConfirm" EnableRoundedCorners="true" EnableShadows="true">

<Items>

<telerik:RadMenuItem Text="Copy">

</telerik:RadMenuItem>

</Items>

</telerik:RadContextMenu>

<script type="text/javascript">

//Standard Window.confirm

function StandardConfirm(sender, args) {

args.set_cancel(!window.confirm("A copy will be made. Do you want to continue?"));

}

</script>

<script type="text/javascript">

function RowDblClick(sender, args) {

var dblClick;

dblClick = true;

var index = args.get_itemIndexHierarchical();

//var updateActionId = RadGridActionItem.get_masterTableView().get_dataItems()[index]("Action_Item_Id").innerHTML;

var updateActionId = args.getDataKeyValue("Action_Item_Id");

window.location.href = "NewActionItem.aspx?DblClick=" + dblClick + "&UpdateActionId=" + updateActionId;

}

</script>

<script type="text/javascript">

// Right click context menu for specific row index.

function RowContextMenu(sender, eventArgs) {

var menu = $find("<%=RadMenu1.ClientID %>");

var evt = eventArgs.get_domEvent();

if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {

return;

}

var index = eventArgs.get_itemIndexHierarchical();

document.getElementById("radGridClickedRowIndex").value = index;

sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

menu.show(evt);

evt.cancelBubble = true;

evt.returnValue = false;

if (evt.stopPropagation) {

evt.stopPropagation();

evt.preventDefault();

}

</script>

</asp:Content>

Accepted