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

RadGrid Client-side Microsoft JScript runtime error:

7 Answers 69 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Terry
Top achievements
Rank 1
Terry asked on 09 Apr 2014, 05:56 PM
I am using the RadSeachBox in the EditItemTemplate to find a value and then I copy this to the label in the ItemTemplate but receive the following error when I navigate between any other cells in the grid:

Microsoft JScript runtime error: 'null' is null or not an object
in dynamic module MicrosoftAjax.js

The code raising the error is unreadable to me.

I have had great difficulty in referencing the label from the client-side javascript onSearch function but using the only reference that I found that gives access to the label's innerHTML which causes the error after the innerHTML has been changed.  Is there a better way of doing this and not raising an error?

I have attached the aspx file below but not the aspx.vb as this is a problem with the client-side javascript.

Any help will be appreciated.

Terry.


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Timesheet.aspx.vb" Inherits="Timesheet" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<link rel="Stylesheet" href="App_Themes/Site.css" type="text/css" />
<%-- This displays the logo mini icon next to the web address --%>
<link rel="Shortcut Icon" href="App_Themes/bmtlogo.ico" />
<title>Timesheet</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function ValidatePostTimesheet(sender, args) {
var grid = $find("<%=RadGrid1.ClientID%>");
//var masterTable = grid.get_masterTableView();
}
function onSearch(sender, args) {
var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
var num = masterTable.get_dataItems().length;
if (num >= 1) {
num = num - 1;
// This gets the label control lbl_Project from the ItemTemplate.
var dataItem = masterTable.get_dataItems()[num].get_element();
//This copies the RadSearchBox item text inthe EditItemTemplate to the ItemTemplate label and is the cause of the error.
dataItem.all[num].innerText = args.get_text();
}
}
</script>
</telerik:RadCodeBlock>

<asp:SqlDataSource ID="ds_weeks" runat="server"
ConnectionString="<%$ ConnectionStrings:PandaConnection %>"
SelectCommand="Select_Calendar" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>

<!--Select Week dropdown-->
<telerik:RadDropDownList ID="cbo_weeks" runat="server" DataSourceID="ds_weeks" DataTextField="WeekNo" DataValueField="WeekEnding" AutoPostBack="True">
</telerik:RadDropDownList>

<asp:SqlDataSource ID="ds_Timesheet" runat="server"
ConnectionString="<%$ ConnectionStrings:PandaConnection %>"
SelectCommand="Select_Timesheet" SelectCommandType="StoredProcedure"
UpdateCommand="Update_Booking" UpdateCommandType="StoredProcedure"
InsertCommand="Insert_Booking" insertCommandType="StoredProcedure"
DeleteCommand="Delete_Booking" DeleteCommandType="StoredProcedure">

<SelectParameters>
<asp:SessionParameter DefaultValue="0" Name="User_Id" SessionField="TimesheetUserID" Type="Int64" />
<asp:SessionParameter DefaultValue="ABC123" Name="staff_timesheet_id" SessionField="StaffTimesheet_Id" Type="String" />
<asp:ControlParameter ControlID="cbo_weeks" DefaultValue="26/07/2013" Name="WBdate" PropertyName="SelectedValue" Type="String" />
</SelectParameters>

<UpdateParameters>
<asp:Parameter Name="f_time_id" DbType="Int32" />
<asp:Parameter Name="f_task_id" DbType="Int32" />
<asp:Parameter Name="f_hrs_monday" DbType="Double" />
<asp:Parameter Name="f_hrs_tuesday" DbType="Double" />
<asp:Parameter Name="f_hrs_wednesday" DbType="Double" />
<asp:Parameter Name="f_hrs_thursday" DbType="Double" />
<asp:Parameter Name="f_hrs_friday" DbType="Double" />
<asp:Parameter Name="f_hrs_saturday" DbType="Double" />
<asp:Parameter Name="f_hrs_sunday" DbType="Double" />
<asp:Parameter Name="f_notes" DbType="String" />
<asp:Parameter Name="f_booking_type_id" DefaultValue="4" DbType="Int32" />
</UpdateParameters>

<InsertParameters>
<asp:Parameter Name="f_task_id" DbType="Int32" />
<asp:Parameter Name="f_user_id" DbType="Int32" />
<asp:Parameter Name="f_staff_name" DbType="String" />
<asp:ControlParameter ControlID="cbo_weeks" DefaultValue="01/01/2000" Name="f_WBdate" PropertyName="SelectedValue" Type="String" />
<asp:Parameter Name="f_hrs_monday" DbType="Double" />
<asp:Parameter Name="f_hrs_tuesday" DbType="Double" />
<asp:Parameter Name="f_hrs_wednesday" DbType="Double" />
<asp:Parameter Name="f_hrs_thursday" DbType="Double" />
<asp:Parameter Name="f_hrs_friday" DbType="Double" />
<asp:Parameter Name="f_hrs_saturday" DbType="Double" />
<asp:Parameter Name="f_hrs_sunday" DbType="Double" />
<asp:Parameter Name="f_notes" DbType="String" />
<asp:Parameter Name="f_booking_type_id" DbType="Int32" />
</InsertParameters>

<DeleteParameters>
<asp:Parameter DefaultValue="0" Name="f_time_id" DbType="Int64" />
<asp:SessionParameter DefaultValue="0" Name="f_user_id" SessionField="UserID" Type="Int64" />
<asp:Parameter DefaultValue="ABC123" Name="f_staff_name" Type="String" />
<asp:ControlParameter ControlID="cbo_weeks" DefaultValue="01/01/2000" Name="f_WBdate" PropertyName="SelectedValue" Type="String" />
</DeleteParameters>

</asp:SqlDataSource>
<asp:SqlDataSource ID="ds_UserProjects" runat="server"
ConnectionString="<%$ ConnectionStrings:PandaConnection %>"
SelectCommand="Select_UserProjects" SelectCommandType="StoredProcedure" EnableCaching="True" CacheDuration="480">
<SelectParameters>
<asp:SessionParameter DefaultValue="0" Name="User_Id" SessionField="UserID" Type="Int64" />
<asp:Parameter Name="Search" DefaultValue="%" Type="String" />
</SelectParameters>
</asp:SqlDataSource>

<asp:SqlDataSource ID="ds_Tasks" runat="server"
ConnectionString="<%$ ConnectionStrings:PandaConnection %>"
SelectCommand="Select_TasksForJob" SelectCommandType="StoredProcedure">

<SelectParameters>
<asp:Parameter Name="f_opportunity_id" defaultValue="46" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>

<asp:SqlDataSource ID="ds_BookingType" runat="server"
ConnectionString="<%$ ConnectionStrings:PandaConnection %>"
SelectCommand="Select_BookingTypes" SelectCommandType="StoredProcedure">
</asp:SqlDataSource>

<asp:Button ID="cmd_post" runat="server" Text="Post Timesheet" OnClientClick="ValidatePostTimesheet" />
<asp:Label ID="Label1" Width="200px" runat="server" Text=""></asp:Label>

<asp:Button ID="cmd_Approve" runat="server" Text="Approve Timesheet" OnClientClick="ValidatePostTimesheet" Visible="False" />
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>

<asp:Button ID="cmd_Admin" runat="server" Text="Timesheet Admin" OnClientClick="ValidatePostTimesheet" Visible="False" />
<asp:Label ID="Label3" runat="server" Text=""></asp:Label>
<asp:HiddenField ID="hid_ConHours" runat="server" />

<!--Geoff's grid-->
<div>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel2">

<telerik:RadGrid ID="RadGrid1" GridLines="None" runat="server" Skin="Metro"
ShowFooter="True" AutoGenerateColumns="False" Width="750px"
DataSourceID="ds_Timesheet" AllowFilteringByColumn="False" CellSpacing="0">

<mastertableview autogeneratecolumns="False" commanditemdisplay="Top" ClientDataKeyNames="f_time_id, f_project_title"
commanditemsettings-showsavechangesbutton="True" datakeynames="f_time_id, f_project_title"
datasourceid="ds_Timesheet" editmode="Batch" horizontalalign="NotSet"
showheaderswhennorecords="true" HierarchyLoadMode="Client">
<commanditemsettings showsavechangesbutton="True" />
<Columns>
<telerik:GridTemplateColumn UniqueName="ProjectNo" HeaderText="Project" DataField="f_project_title" HeaderStyle-Width="315px" >
<ItemTemplate>
<asp:Label ID="lbl_Project" Text='<%# Eval("f_project_title") %>' runat="server" />
</ItemTemplate>
<EditItemTemplate>
<telerik:RadSearchBox runat="server" ID="RadSearchBox1" ShowSearchButton="False"
DataSourceID="ds_UserProjects"
DataValueField="f_opportunity_id"
DataTextField="f_project_title"
Width="250px" Culture="en-GB" OnClientSearch="onSearch">
<DropDownSettings Width="250px">
</DropDownSettings>
</telerik:RadSearchBox>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridDropDownColumn DataField="f_task_id" DataSourceID="ds_tasks"
FooterStyle-Wrap="False" HeaderStyle-Width="165px" HeaderStyle-Wrap="False"
HeaderText="Task" ItemStyle-Width="160px" ItemStyle-Wrap="False"
ListTextField="f_task_no" ListValueField="f_task_id" UniqueName="cbo_OpCode">
<FooterStyle Wrap="False" />
<HeaderStyle Width="170px" Wrap="False" />
</telerik:GridDropDownColumn>
<telerik:GridNumericColumn ColumnEditorID="NumberEditorBox"
DataField="f_hrs_saturday" HeaderStyle-Width="40px" HeaderText="Sat"
SortExpression="f_hrs_saturday" UniqueName="f_hrs_saturday">
<HeaderStyle Width="40px" />
</telerik:GridNumericColumn>
<telerik:GridNumericColumn ColumnEditorID="NumberEditorBox"
DataField="f_hrs_sunday" HeaderStyle-Width="40px" HeaderText="Sun"
SortExpression="f_hrs_sunday" UniqueName="f_hrs_sunday">
<HeaderStyle Width="40px" />
<ColumnValidationSettings>
</ColumnValidationSettings>
</telerik:GridNumericColumn>
<telerik:GridNumericColumn ColumnEditorID="NumberEditorBox"
DataField="f_hrs_monday" HeaderStyle-Width="40px" HeaderText="Mon"
SortExpression="f_hrs_monday" UniqueName="f_hrs_monday">
<HeaderStyle Width="40px" />
</telerik:GridNumericColumn>
<telerik:GridNumericColumn ColumnEditorID="NumberEditorBox"
DataField="f_hrs_tuesday" HeaderStyle-Width="40px" HeaderText="Tue"
SortExpression="f_hrs_tuesday" UniqueName="f_hrs_tuesday">
<HeaderStyle Width="40px" />
</telerik:GridNumericColumn>
<telerik:GridNumericColumn ColumnEditorID="NumberEditorBox"
DataField="f_hrs_wednesday" HeaderStyle-Width="40px" HeaderText="Wed"
SortExpression="f_hrs_wednesday" UniqueName="f_hrs_wednesday">
<HeaderStyle Width="40px" />
</telerik:GridNumericColumn>
<telerik:GridNumericColumn ColumnEditorID="NumberEditorBox"
DataField="f_hrs_thursday" HeaderStyle-Width="40px" HeaderText="Thu"
SortExpression="f_hrs_thursday" UniqueName="f_hrs_thursday">
<HeaderStyle Width="40px" />
</telerik:GridNumericColumn>
<telerik:GridNumericColumn ColumnEditorID="NumberEditorBox"
DataField="f_hrs_friday" HeaderStyle-Width="40px" HeaderText="Fri"
SortExpression="f_hrs_friday" UniqueName="f_hrs_friday">
<HeaderStyle Width="40px" />
</telerik:GridNumericColumn>
<telerik:GridCalculatedColumn DataFields="f_hrs_saturday, f_hrs_sunday, f_hrs_monday, f_hrs_tuesday, f_hrs_wednesday, f_hrs_thursday, f_hrs_friday"
DataType="System.Int16" expression="{0}+{1}+{2}+{3}+{4}+{5}+{6}"
HeaderStyle-Width="45px" HeaderText="Total Hours" UniqueName="f_total_hours">
<HeaderStyle Width="45px" />
</telerik:GridCalculatedColumn>
<telerik:GridBoundColumn ColumnEditorID="CommentsEditorBox" DataField="f_notes"
FooterStyle-Width="210px" HeaderStyle-Width="210px" HeaderText="Comments"
ItemStyle-Width="210px" MaxLength="255" SortExpression="f_notes"
UniqueName="f_notes">
</telerik:GridBoundColumn>
<telerik:GridDropDownColumn AllowSorting="False"
DataField="f_time_booking_type_id" DataSourceID="ds_BookingType"
FooterStyle-Wrap="False" HeaderStyle-Width="165px" HeaderStyle-Wrap="False"
HeaderText="Booking Type" ItemStyle-Width="160px" ItemStyle-Wrap="False"
ListTextField="f_time_booking_type_name"
ListValueField="f_time_booking_type_id" UniqueName="cbo_BookingType">
<FooterStyle Wrap="False" />
<HeaderStyle Width="165px" Wrap="False" />
<ItemStyle Width="160px" Wrap="False" />
</telerik:GridDropDownColumn>
<telerik:GridButtonColumn ButtonType="ImageButton" Exportable="False"
CommandName="Delete" ConfirmDialogType="RadWindow" ConfirmText="Delete this row?"
ConfirmTitle="Delete" HeaderStyle-Width="50px" HeaderText="Delete"
Text="Delete" UniqueName="DeleteColumn">
<HeaderStyle Width="50px" />
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="f_task_id" DataType="System.Int64"
Display="False" Exportable="False"
FilterControlAltText="Filter f_task_id column" HeaderText="f_task_id"
ReadOnly="True" SortExpression="f_task_id" UniqueName="f_task_id"
Visible="false">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="StatusName" DataType="System.String" Display="True" Exportable="True" HeaderText="StatusName" UniqueName="StatusName" >
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="f_project_no" DataType="System.String" Display="False" Exportable="True" HeaderText="Project No" UniqueName="f_project_no" >
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="f_staff_name" DataType="System.String" Display="False" Exportable="True" HeaderText="Staff Name" UniqueName="f_staff_name" >
</telerik:GridBoundColumn>
</Columns>
<sortexpressions>
<telerik:GridSortExpression FieldName="f_time_id" SortOrder="Descending" />
</sortexpressions>
</mastertableview>
<ClientSettings AllowKeyboardNavigation="true">
<Selecting CellSelectionMode="SingleCell"></Selecting>
</ClientSettings>
</telerik:RadGrid>

<telerik:GridNumericColumnEditor ID="NumberEditorBox" NumericTextBox-Width="30px" runat="server">
</telerik:GridNumericColumnEditor>

<telerik:GridTextBoxColumnEditor ID="CommentsEditorBox" runat="server">
<TextBoxStyle Width="200px" />
</telerik:GridTextBoxColumnEditor>

</telerik:RadAjaxPanel>
</div>
</form>
</body>

</html>

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 10 Apr 2014, 07:25 AM
Hi Terry,

Please try to attach the OnBatchEditClosed event of RadGrid to achieve your scenario as follows and do the following modification in your JavaScript.

ASPX:
...
<
ClientSettings AllowKeyboardNavigation="true">
    <Selecting CellSelectionMode="SingleCell"></Selecting>
    <ClientEvents OnBatchEditClosed="OnBatchEditClosed" />
</ClientSettings>
...

JavaScript:
<script type="text/javascript">
    var value;
    function onSearch(sender, args) {
        value = args.get_text();
    }
    function OnBatchEditClosed(sender, args) {
        var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
        var dataItem = masterTable.get_dataItems()[args.get_row().control.get_itemIndex()];
        dataItem.findElement("lbl_Project").textContent = value;
    }
</script>

Thanks,
Shinu.
0
Terry
Top achievements
Rank 1
answered on 10 Apr 2014, 11:12 AM
Shinu, thank you for your reply which has helped but I need a little more help with using the RadSearchBox in a RadGrid TemplateColumn. 

I can edit the existing rows using the code you have suggested but it does not save the changes or work for an inserted row.  The findElement(“lbl_Project”) fails to return the item as it cannot find the -1 reference in the new row. I have tried the following code to find the reference to the RadSearchBox1 which it is able to find but this still does not display the selected value in the new row once I select another control or row.

Regards

Terry

function OnBatchEditClosed(sender, args) {
 var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
        // This gets the label control lbl_Project from the ItemTemplate.
        var dataItem = masterTable.get_dataItems()[args.get_row().control.get_itemIndex()];
        if (args.get_row().control.get_itemIndex() >= 0) {
            //This copies the RadSearchBox item text in the EditItemTemplate to the ItemTemplate label.
            dataItem.findElement("lbl_Project").textContent = value;
        }
        else {
             dataItem = masterTable.get_dataItems()[0];
             if (dataItem) {
                 dataItem.findElement("RadSearchBox1").innerText = value;
               }
             }
         }
0
Angel Petrov
Telerik team
answered on 15 Apr 2014, 08:49 AM
Hello Terry,

In order to make things work for a template column with a RadSearchBox inside the EditItemTemplate of a GridTemplateColumn you should subscribe to the four batch editing events and handle things manually as demonstrated here. By subscribing to the OnBatchEditGetCellValue, OnBatchEditSetEditorValue, OnBatchEditGetEditorValue and OnBatchEditSetCellValue events you will be able to set the desired value in both the HTML and editor. More important you have control over which value to send to the server(the one passed to the OnBatchEditGetEditorValue arguments). By following the suggested approach you should be able to make things work as expected.

Regards,
Angel Petrov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Terry
Top achievements
Rank 1
answered on 25 Apr 2014, 09:32 AM
Hello Angel,

Thank you for your reply.  I have taken a week off so I have only just gotten back to this problem.  I have tried your suggestion and the example given in Handling advanced batch templates but I am having difficulty when inserting a row in the grid. In each of the example scripts for the 'OnBatchEditGetCellValue' and 'OnBatchEditSetCellValue' the args.get_container() only returns a non-breaking space and errors when attempting to access the template controls, it looks like the ItemTemplate and its controls are not available for the new row.  Please can you confirm if the example works without error when a new row is inserted in the grid.

Regards

Terry
0
Accepted
Angel Petrov
Telerik team
answered on 30 Apr 2014, 07:45 AM
Hello Terry,

I am not quite sure about the exact implementation but if a Label for example is placed inside the ItemTemplate it will not be rendered for the new rows. The reason for this is that the new row is added on the client and initializing server controls using client-side logic is not possible.

In order to demonstrate a possible realization of the described scenario I have assembled a sample website which you can find in attachments. The example should help you in modifying the real code logic accordingly.

Regards,
Angel Petrov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Alireza
Top achievements
Rank 1
answered on 27 May 2016, 09:07 PM

Hi Angel,

I'm looking for same sample except to bind it to a array instead of a web service.Any advice?

Thanks,

Ali

 

 

 

 

0
Angel Petrov
Telerik team
answered on 01 Jun 2016, 07:59 AM
Hi Ali,

I am sorry to say but the desired scenario is not supported. The reason for this is that when binding the RadSearchBox to an array programmatically the data source should be set in the PageLoad event. However at this point the grid will not have initialized the search box. That said I suggest trying to apply the approach from my previous reply.

Regards,
Angel Petrov
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Grid
Asked by
Terry
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Terry
Top achievements
Rank 1
Angel Petrov
Telerik team
Alireza
Top achievements
Rank 1
Share this question
or