RadGrid Client-side Microsoft JScript runtime error:

8 posts, 1 answers
  1. Terry
    Terry avatar
    8 posts
    Member since:
    Oct 2012

    Posted 09 Apr 2014 Link to this post

    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>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Apr 2014 in reply to Terry Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Terry
    Terry avatar
    8 posts
    Member since:
    Oct 2012

    Posted 10 Apr 2014 in reply to Shinu Link to this post

    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;
                   }
                 }
             }
  5. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 15 Apr 2014 Link to this post

    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.

     
  6. Terry
    Terry avatar
    8 posts
    Member since:
    Oct 2012

    Posted 25 Apr 2014 in reply to Angel Petrov Link to this post

    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
  7. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 30 Apr 2014 Link to this post

    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.

     
  8. Alireza
    Alireza avatar
    1 posts
    Member since:
    Jan 2016

    Posted 27 May in reply to Angel Petrov Link to this post

    Hi Angel,

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

    Thanks,

    Ali

     

     

     

     

  9. Angel Petrov
    Admin
    Angel Petrov avatar
    1007 posts

    Posted 01 Jun Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017