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

[Solved] OnGridCreated Event - Firing Sequence Changed?

8 Answers 525 Views

Grid

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

Seth asked on 22 Mar 2012, 02:57 AM

I have some UserControls that were working fine for quite some time (years in fact). I have upgraded to a the latest (Q1 2012 release) of the controls and it no longer works correctly. They are user controls because I am loading them dynamically in a tab control/pageview control...

The part that is no longer working is that I am grabbing the toolbar that is positioned above the RadGrid and changing some of the buttons based on some user permissions in the OnGridCreated event handler. It can no longer find the RadToolbar control. If I place a button at the bottom of my control and try to find the RadToolbar at that point, it finds it. Which lead me to think that the OnGridCreated event is now firing before the RadToolbar has been created.

So, does anyone know if anything changed in this new version or even the one previous? I think it was fine in v.2011.1.519.35.

8 Answers, 1 is accepted

answered on 26 Mar 2012, 04:28 PM

The following source worked fine before this version...

The offending line is getting the toolBar object, actually attempting to access the object on the proceeding line causes the error because the toolBar object was not found.

function DomesticGridCreated(sender, eventArgs) {

var Domestic = $find('<%=rgDomestic.ClientID %>');

if (filterDomesticInitialize) {

Domestic.get_masterTableView().hideFilterItem();

}

var toolBar = $find("<%= RadToolBar1.ClientID %>");

var lastItem = toolBar.get_items().getItem(toolBar.get_items().get_count() - 2);

var nextToLastItem = toolBar.get_items().getItem(toolBar.get_items().get_count() - 3);

<telerik:RadSplitter ID="rsplRadSplitter" runat="server" Orientation="Horizontal" Width="100%" Height="100%">

<telerik:RadPane ID="rpToolBar" runat="server" Scrolling="None" Width="100%" Height="32">

<telerik:RadToolBar id="RadToolBar1" runat="server" OnClientButtonClicked="onButtonClicked" Height="30" >

<Items>

<telerik:RadToolBarButton Value="SearchText">

<ItemTemplate>

<div style="padding-left:5px">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<telerik:RadTextBox runat="server" ID="txtQuickSearch" EmptyMessage="Quick Search" ClientEvents-OnKeyPress="onKeyPress"/>

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadToolBarButton>

<telerik:RadToolBarButton ImageUrl="~/Images/Icons/search.gif" runat="server" Value="Search"/>

<telerik:RadToolBarButton Value="separator1" IsSeparator="true" Height="18px"/>

<telerik:RadToolBarDropDown Text="Filter" Visible="true">

<Buttons>

<telerik:RadToolBarButton Value="ShowFilter" Text="Show Filter" ImageUrl="~/Images/Icons/filtericon.gif"/>

<telerik:RadToolBarButton Value="AdvancedFilter" Text="Advanced Filter" ImageUrl="~/Images/AdvFilter.png" Visible="true"></telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="ClearFilter" Text="Clear Advanced Filter" Visible="false" Enabled="false"></telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

<telerik:RadToolBarButton Value="ExpandAll" Text="Expand All" ImageUrl="~/Images/Icons/expand.gif"/>

<telerik:RadToolBarButton Value="CollapseAll" Text="Collapse All" ImageUrl="~/Images/Icons/contract.gif"/>

<telerik:RadToolBarButton Value="Refresh" Text="Refresh" ImageUrl="~/Images/Icons/refresh.png" />

<telerik:RadToolBarButton Value="separator2" IsSeparator="true" Height="18px" Visible="True"/>

<telerik:RadToolBarButton Value="ExportToExcel" Text="Export To Excel" ImageUrl="~/Images/Icons/excelicon_small.gif" />

<telerik:RadToolBarButton value="ExportToCSV" Text="Export To CSV" ImageUrl="~/Images/Icons/icon_csv.gif" />

<telerik:RadToolBarDropDown Text="Change View" >

<Buttons >

<telerik:RadToolBarButton Value="Open" Text="Open" CheckOnClick="true" Checked="true">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="Closed" Text="Closed" CheckOnClick="true"></telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="Pending" Text="Pending" Enabled="false" CheckOnClick="true"></telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

</Items>

</telerik:RadToolBar>

</telerik:RadPane>

</telerik:RadSplitter>

<telerik:RadGrid runat="server" ID="rgDomestic" AllowFilteringByColumn="true"

AllowSorting="true" ShowFooter="True" EnableLinqExpressions="false"

AllowPaging="True" AllowMultiRowSelection="true"

ShowGroupPanel="true" ShowHeader="true"

PageSize="15" AutoGenerateColumns="false" >

<ClientSettings AllowDragToGroup="true" AllowGroupExpandCollapse="true" EnableRowHoverStyle="true" >

<ClientEvents OnGridCreated="DomesticGridCreated" OnRowDblClick="RowDoubleClick" OnKeyPress="GridKeyPress" OnRowContextMenu="RowContextMenu"/>

<Selecting AllowRowSelect="true" />

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

</ClientSettings>

answered on 02 Apr 2012, 04:51 PM

Hi Maria,

I'm working with Seth on this project. Below is a stripped-down version of our project that displays the behavior that Seth mentions above.

I first run the project using the Telerik assembly version 2010.2.826.40 (I used .NET Framework 4.0 for this example, but the 3.5 version displays that behavior as well), and everything works as expected. When you click on a tab, it switches to its pageview. No issues at all. I then remove the reference to that assembly and then add a reference to a newer version of the assembly (I tried 2011.2.915.40, but newer versions cause this behavior to show up as well). I then run the project, click on a tab, and I get this error message back:

"Microsoft JScript runtime error: Unable to get value of the property 'get_items': object is null or undefined"

because the toolbar object comes back as null, and the page breaks.

Here is the code that I used:

ToolbarDefault.aspx

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ToolbarDefault.aspx.vb" Inherits="TelerikProject.ToolbarDefault" %>

<%@ 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 runat="server">

<title></title>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

//<![CDATA[

function onTabSelecting(sender, args) {

if (args.get_tab().get_pageViewID()) {

args.get_tab().set_postBack(false);

}

function onTabSelected(sender, args) {

if (args.get_tab().get_pageViewID()) {

var RadToolBar1 = $find(args.get_tab().get_value() + "_userControl_RadToolBar1");

var filterButton = RadToolBar1.findItemByValue("Filter");

if (filterButton) {

switch (args.get_tab().get_value()) {

case "Air":

filterButton.set_text(showHideFilterAirText);

break;

case "Domestic":

filterButton.set_text(showHideFilterDomesticText);

break;

}

//]]>

</script>

</telerik:RadScriptBlock>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="rsmMain" runat="server">

</telerik:RadScriptManager>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rtsMain">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtsMain" />

<telerik:AjaxUpdatedControl ControlID="rmpMain" LoadingPanelID="ralpDefault" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="rmpMain">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rmpMain" LoadingPanelID="ralpDefault" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="ralpDefault" runat="server" Height="75px" Width="75px">

</telerik:RadAjaxLoadingPanel>

<telerik:RadTabStrip OnClientTabSelecting="onTabSelecting" OnClientTabSelected="onTabSelected" ID="rtsMain" runat="server" Width="100%" Align="Left" MultiPageID="rmpMain" >

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="rmpMain" runat="server" Height="100%">

</telerik:RadMultiPage>

</div>

</form>

</body>

</html>

ToolbarDefault.aspx.vb

Imports Telerik.Web.UI

Public Class ToolbarDefault

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Page.IsPostBack = False Then

AddTab("Domestic", "Domestic")

AddTab("Air", "International Air")

AddPageView(rtsMain.Tabs(0))

rtsMain.SelectedIndex = 0

rtsMain.Tabs(0).PageView.Selected = True

End If

End Sub

Private Sub AddTab(ByVal tabName As String, ByVal TabText As String)

Dim tab As New RadTab()

tab.Text = TabText

tab.Value = tabName

rtsMain.Tabs.Add(tab)

End Sub

Protected Sub rtsMain_TabClick(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadTabStripEventArgs) Handles rtsMain.TabClick

AddPageView(e.Tab)

e.Tab.PageView.Selected = True

End Sub

Private Sub AddPageView(ByVal tab As RadTab)

Dim pageView As RadPageView = New RadPageView

pageView.ID = tab.Value

If IsNothing(rmpMain.FindPageViewByID(tab.Value)) Then

rmpMain.PageViews.Add(pageView)

End If

tab.PageViewID = pageView.ID

End Sub

Protected Sub rmpMain_PageViewCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadMultiPageEventArgs) Handles rmpMain.PageViewCreated

Dim userControlName As String = e.PageView.ID & ".ascx"

Dim userControl As Control = Page.LoadControl("~/" & userControlName)

userControl.ID = e.PageView.ID & "_userControl"

e.PageView.Controls.Add(userControl)

End Sub

End Class

Air.ascx

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Air.ascx.vb" Inherits="TelerikProject.Air" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

//<![CDATA[

function rgAirGridCreated(sender, eventArgs) {

var Air = $find('<%=rgAir.ClientID %>');

var toolBar = $find("<%= RadToolBar1.ClientID %>");

var lastItem = toolBar.get_items().getItem(toolBar.get_items().get_count() - 2);

var nextToLastItem = toolBar.get_items().getItem(toolBar.get_items().get_count() - 3);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadSplitter ID="rsplRadSplitter" runat="server" Orientation="Horizontal" Width="100%" Height="100%">

<telerik:RadPane ID="rpToolBar" runat="server" Scrolling="None" Width="100%" Height="32">

<telerik:RadToolBar id="RadToolBar1" runat="server" Height="30" >

<Items>

<telerik:RadToolBarButton Value="SearchText">

<ItemTemplate>

<div style="padding-left:5px">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<telerik:RadTextBox runat="server" ID="txtQuickSearch" EmptyMessage="Quick Search" />

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadToolBarButton>

<telerik:RadToolBarButton ImageUrl="~/Images/Icons/search.gif" runat="server" Value="Search"/>

<telerik:RadToolBarButton Value="separator1" IsSeparator="true" Height="18px"/>

<telerik:RadToolBarDropDown Text="Filter" Visible="true">

<Buttons>

<telerik:RadToolBarButton Value="ShowFilter" Text="Show Filter" ImageUrl="~/Images/Icons/filtericon.gif"/>

<telerik:RadToolBarButton Value="AdvancedFilter" Text="Advanced Filter" ImageUrl="~/Images/AdvFilter.png" Visible="true"></telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="ClearFilter" Text="Clear Advanced Filter" Visible="false" Enabled="false"></telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

<telerik:RadToolBarButton Value="ExpandAll" Text="Expand All" ImageUrl="~/Images/Icons/expand.gif"/>

<telerik:RadToolBarButton Value="CollapseAll" Text="Collapse All" ImageUrl="~/Images/Icons/contract.gif"/>

<telerik:RadToolBarButton Value="Refresh" Text="Refresh" ImageUrl="~/Images/Icons/refresh.png" />

<telerik:RadToolBarButton Value="separator2" IsSeparator="true" Height="18px" Visible="True"/>

<telerik:RadToolBarButton Value="ExportToExcel" Text="Export To Excel" ImageUrl="~/Images/Icons/excelicon_small.gif" />

<telerik:RadToolBarButton value="ExportToCSV" Text="Export To CSV" ImageUrl="~/Images/Icons/icon_csv.gif" />

<telerik:RadToolBarDropDown Text="Change View" >

<Buttons >

<telerik:RadToolBarButton Value="Open" Text="Open" CheckOnClick="true" Checked="true">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="Closed" Text="Closed" CheckOnClick="true"></telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="Pending" Text="Pending" Enabled="false" CheckOnClick="true"></telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

</Items>

</telerik:RadToolBar>

</telerik:RadPane>

</telerik:RadSplitter>

<telerik:RadGrid runat="server" ID="rgAir" AllowFilteringByColumn="true"

AllowSorting="true" ShowFooter="True" EnableLinqExpressions="false"

AllowPaging="True" AllowMultiRowSelection="true"

ShowGroupPanel="true" ShowHeader="true"

PageSize="15" AutoGenerateColumns="false" >

<ClientSettings AllowDragToGroup="true" AllowGroupExpandCollapse="true" EnableRowHoverStyle="true" >

<ClientEvents OnGridCreated="rgAirGridCreated"/>

<Selecting AllowRowSelect="true" />

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

</ClientSettings>

<MasterTableView>

<Columns>

<telerik:GridBoundColumn HeaderText="Dosage" DataField="Dosage" />

<telerik:GridBoundColumn HeaderText="Drug" DataField="Drug" />

<telerik:GridBoundColumn HeaderText="Patient" DataField="Patient" />

<telerik:GridBoundColumn HeaderText="Date" DataField="Date" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

Air.ascx.vb

Public Class Air

Inherits System.Web.UI.UserControl

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Function GetTable() As DataTable

' Create new DataTable instance.

Dim table As New DataTable

' Create four typed columns in the DataTable.

table.Columns.Add("Dosage", GetType(Integer))

table.Columns.Add("Drug", GetType(String))

table.Columns.Add("Patient", GetType(String))

table.Columns.Add("Date", GetType(DateTime))

' Add five rows with those columns filled in the DataTable.

table.Rows.Add(25, "Indocin", "John", DateTime.Now)

table.Rows.Add(50, "Enebrel", "Mike", DateTime.Now)

table.Rows.Add(10, "Hydralazine", "Jonathan", DateTime.Now)

table.Rows.Add(21, "Combivent", "Chris", DateTime.Now)

table.Rows.Add(100, "Dilantin", "Rob", DateTime.Now)

Return table

End Function

Private Sub rgAir_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rgAir.NeedDataSource

rgAir.DataSource = GetTable()

End Sub

End Class

Domestic.ascx

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="Domestic.ascx.vb" Inherits="TelerikProject.Domestic" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

//<![CDATA[

function GridCreated(sender, eventArgs) {

var Domestic = $find('<%=rgDomestic.ClientID %>');

var toolBar = $find("<%= RadToolBar1.ClientID %>");

var lastItem = toolBar.get_items().getItem(toolBar.get_items().get_count() - 2);

var nextToLastItem = toolBar.get_items().getItem(toolBar.get_items().get_count() - 3);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadSplitter ID="rsplRadSplitter" runat="server" Orientation="Horizontal" Width="100%" Height="100%">

<telerik:RadPane ID="rpToolBar" runat="server" Scrolling="None" Width="100%" Height="32">

<telerik:RadToolBar id="RadToolBar1" runat="server" Height="30" >

<Items>

<telerik:RadToolBarButton Value="SearchText">

<ItemTemplate>

<div style="padding-left:5px">

<table border="0" cellspacing="0" cellpadding="0">

<tr>

<td>

<telerik:RadTextBox runat="server" ID="txtQuickSearch" EmptyMessage="Quick Search" />

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadToolBarButton>

<telerik:RadToolBarButton ImageUrl="~/Images/Icons/search.gif" runat="server" Value="Search"/>

<telerik:RadToolBarButton Value="separator1" IsSeparator="true" Height="18px"/>

<telerik:RadToolBarDropDown Text="Filter" Visible="true">

<Buttons>

<telerik:RadToolBarButton Value="ShowFilter" Text="Show Filter" ImageUrl="~/Images/Icons/filtericon.gif"/>

<telerik:RadToolBarButton Value="AdvancedFilter" Text="Advanced Filter" ImageUrl="~/Images/AdvFilter.png" Visible="true"></telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="ClearFilter" Text="Clear Advanced Filter" Visible="false" Enabled="false"></telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

<telerik:RadToolBarButton Value="ExpandAll" Text="Expand All" ImageUrl="~/Images/Icons/expand.gif"/>

<telerik:RadToolBarButton Value="CollapseAll" Text="Collapse All" ImageUrl="~/Images/Icons/contract.gif"/>

<telerik:RadToolBarButton Value="Refresh" Text="Refresh" ImageUrl="~/Images/Icons/refresh.png" />

<telerik:RadToolBarButton Value="separator2" IsSeparator="true" Height="18px" Visible="True"/>

<telerik:RadToolBarButton Value="ExportToExcel" Text="Export To Excel" ImageUrl="~/Images/Icons/excelicon_small.gif" />

<telerik:RadToolBarButton value="ExportToCSV" Text="Export To CSV" ImageUrl="~/Images/Icons/icon_csv.gif" />

<telerik:RadToolBarDropDown Text="Change View" >

<Buttons >

<telerik:RadToolBarButton Value="Open" Text="Open" CheckOnClick="true" Checked="true">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="Closed" Text="Closed" CheckOnClick="true"></telerik:RadToolBarButton>

<telerik:RadToolBarButton Value="Pending" Text="Pending" Enabled="false" CheckOnClick="true"></telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

</Items>

</telerik:RadToolBar>

</telerik:RadPane>

</telerik:RadSplitter>

<telerik:RadGrid runat="server" ID="rgDomestic" AllowFilteringByColumn="true"

AllowSorting="true" ShowFooter="True" EnableLinqExpressions="false"

AllowPaging="True" AllowMultiRowSelection="true"

ShowGroupPanel="true" ShowHeader="true"

PageSize="15" AutoGenerateColumns="false" >

<ClientSettings AllowDragToGroup="true" AllowGroupExpandCollapse="true" EnableRowHoverStyle="true" >

<ClientEvents OnGridCreated="GridCreated"/>

<Selecting AllowRowSelect="true" />

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

</ClientSettings>

<MasterTableView>

<Columns>

<telerik:GridBoundColumn HeaderText="Dosage" DataField="Dosage" />

<telerik:GridBoundColumn HeaderText="Drug" DataField="Drug" />

<telerik:GridBoundColumn HeaderText="Patient" DataField="Patient" />

<telerik:GridBoundColumn HeaderText="Date" DataField="Date" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

Domestic.ascx.vb

Public Class Domestic

Inherits System.Web.UI.UserControl

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Function GetTable() As DataTable

' Create new DataTable instance.

Dim table As New DataTable

' Create four typed columns in the DataTable.

table.Columns.Add("Dosage", GetType(Integer))

table.Columns.Add("Drug", GetType(String))

table.Columns.Add("Patient", GetType(String))

table.Columns.Add("Date", GetType(DateTime))

' Add five rows with those columns filled in the DataTable.

table.Rows.Add(25, "Indocin", "David", DateTime.Now)

table.Rows.Add(50, "Enebrel", "Sam", DateTime.Now)

table.Rows.Add(10, "Hydralazine", "Christoff", DateTime.Now)

table.Rows.Add(21, "Combivent", "Janet", DateTime.Now)

table.Rows.Add(100, "Dilantin", "Melanie", DateTime.Now)

Return table

End Function

Private Sub rgDomestic_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rgDomestic.NeedDataSource

rgDomestic.DataSource = GetTable()

End Sub

End Class

Thank you.

answered on 03 Apr 2012, 08:15 AM

EventsTest.zip

Hello Juan,

I tested the provided code locally with the latest version of RadControls and was able to replicate the issue you are facing. Even we haven't made any breaking changes on our RadGrid event's sequence are correct that the RadToolBar is null in the RadGrid created event. However please note that this is not a totally correct approach to manipulate one control on another control's created event. In most case you could not ensure these controls are properly created, especially when ajax is used like in your case. Therefore, as I previously suggested, proper approach in this case would be to use the client pageLoad event instead of RadGrid created. Find attaches a sample runnable example which uses this approach and which works correctly on my end. Test it locally and let me know if it covers your requirements.

All the best,
Maria Ilieva
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.