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

Adding a record through inline manipulation of empty row

5 Answers 32 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Matthew asked on 12 Aug 2014, 08:11 PM
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

Sort by
0
Accepted
Shinu
Top achievements
Rank 1
answered on 13 Aug 2014, 04:21 AM
Hi Matthew,

You can take a look at the Batch Editing functionality of RadGrid to edit and add new records.

Thanks,
Shinu
0
Matthew
Top achievements
Rank 1
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 />
    <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 />
    <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>


 






0
Matthew
Top achievements
Rank 1
answered on 13 Aug 2014, 02:22 PM
Excuse me, I meant the EditMode property, not EditType.
0
Accepted
Shinu
Top achievements
Rank 1
answered on 14 Aug 2014, 04:03 AM
Hi Matthew,

Unfortunately I'm unable to replicate the issue at my end. Can you make sure you are using the latest version?

Thanks,
Shinu
0
Matthew
Top achievements
Rank 1
answered on 14 Aug 2014, 02:55 PM
[quote]Shinu said:Hi Matthew,

Unfortunately I'm unable to replicate the issue at my end. Can you make sure you are using the latest version?

Thanks,
Shinu[/quote]

Shinu, 

 I have updated Telerik to the latest version and it has resolved the issues. Thank you for taking the time to assist me. 

 Matt

Tags
Grid
Asked by
Matthew
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Matthew
Top achievements
Rank 1
Share this question
or