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

Accessing a RadGrid in a RadPageView

8 Answers 570 Views

Grid

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

jlj30 asked on 02 Apr 2014, 08:50 PM

Hi,

Yes, I've found several threads similar to this, but any solutions provided don't seem to work for me.
I have a RadWindow (separate aspx page) which contains a RadTabStrip / RadMultiPage / RadPageView structure.
The grid (on one of the pageviews) is populated properly upon page load.
I update a particular row in the grid using a web service, and now want to rebind the grid so that those changes are reflected.
I perform an identical operation in a RadWindow with no tabs, and everything works fine.

So it looks like I need to access the grid differently when it is contained within a RadPageView.

Here's what I've tried without success:

function RefreshDataSpecsGrid() {

var multiPage = $find("<%= RadMultiPageDataSpecs.ClientID %>");

var pageView = multiPage.findPageViewByID('pagDataSpecsDetails');

var domElement = pageView.get_element();

var grid = domElement.get_element('grdDataSpecs');

var masterTable = grid.get_masterTableView();

masterTable.rebind();

}

The multiPage , pageView and domElement are all fine.
I fail on the grid assignment with the following error:

Object doesn't support property or method 'get_element'

I'm sure I'm doing something stupid.
Can you tell me what that is?

Thanks in advance.

Jim

8 Answers, 1 is accepted

answered on 03 Apr 2014, 05:08 AM

Hello,

Please use Telerik Static Client Library to find Radgrid from your Pageview.

Like : $Telerik.FindControl(pageview,"Your RadGrid ID/Clinet ID");

By using above code you can get Radgrid Control from Pageview. May be by using Element you can get get only DIV not the Radgrid Control.

Please check below link for reference.
http://stackoverflow.com/questions/12584150/keypress-event-for-radnumeric-textbox-in-radgrid-for-exchanging-coloumn-values
http://jayeshgoyani.blogspot.in/2012/05/how-to-access-control-from-itemtemplate.html

Thanks,
Jayesh Goyani

answered on 03 Apr 2014, 01:59 PM

Hi,

I tried what you suggested. My code now looks like:

function RefreshDataSpecsGrid() {

var multiPage = $find("<%= RadMultiPageDataSpecs.ClientID %>");

var pageView = multiPage.findPageViewByID('pagDataSpecsDetails');

var grid = $telerik.findControl(pageView, 'grdDataSpecs'); // Telerik suggestion

var masterTable = grid.get_masterTableView();

masterTable.rebind();

}

Once again, multipage and pageview are valid objects, but I now get the following error when I run this:

Unhandled exception at line 334, column 29 in http://vs2013-jim/NavviaNewDev/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=;;System.Web.Extensions,+Version=4.0.0.0,+Culture=neutral,+PublicKeyToken=31bf3856ad364e35:en-US:d618f02c-bda7-40f1-bb64-308e08f719c3:ea597d4b:b25378d2;Telerik.Web.UI,+Version=2014.1.225.45,+Culture=neutral,+PublicKeyToken=121fae78165ba3d4:en-US:ed076519-5e60-4916-a089-ba7a0f56b711:16e4e7cd:ed16cbdc:f7645509:24ee1bba:1e771326:88144a7a:a7e79140:e330518b:8e6f0d33:6a6d718d:b7778d6c:f46195d3:2003d0b8:aa288e2d:258f1c72:19620875:874f8ea2:cda80b3:7165f74:58366029:cb4a7569:30f1f089:92fe8ea0:fa31b949:490a9d4e

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'getElementsByTagName'

I am running 2014.1.225.45

Any suggestions for what I should try next?

Thanks in advance.

Jim

answered on 07 Apr 2014, 02:29 PM

Hello Jayesh,

Well, as you may have seen from my update, that other issue is now resolved, so we can focus on this one.
I reverted back to this simple function, which happens to resemble the example in your documentation (rebind):

function RefreshDataSpecsGrid() {

var grid = $find("<%= grdDataSpecs.ClientID %>");

var masterTable = grid.get_masterTableView();

masterTable.rebind();

}

The grid resolves to a valid object, but I get null for the masterTable.

What would you suggest I try next?

Jim

answered on 08 Apr 2014, 05:38 AM

Hello Jim,

As per my understanding you can get the 'grdDataSpecs' in your javascript variable. But you are not able to get the mastertableview from the grid.

As per experinance with Radgrid Control, This issue is raised because Radgrid is NOT binded with any records/Data. To resolve this issue first time you have to bind the data to the radgrid from backend/C# side. (Ex:(As per your code) When the page load at that time you have to bind the data in to your grid from backend side, then you can able to access the mastertablevoew in the Javascript side).

Please check the below link/post, in this code i have bind dummy data from backend side to access the mastertableview in the clientside.
Next time on words i will bind the data from the clientside.
http://www.telerik.com/forums/bind-radgrid-client-side-to-a-json-array#cMklKoEpR0uSwa_e-MWVzA

Note : Please check below link. It will also help you to achieve same functionality by using another way.
http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/clientsideapi/defaultcs.aspx

Let me know if any concern.

Thanks,
Jayesh Goyani

answered on 08 Apr 2014, 01:26 PM

Hi,

My grid HAS been bound! I can see the records on the screen.
I am using the following SqlDataSource to populate the grid:

<asp:SqlDataSource ID="sqlDataSpec" runat="server" ConnectionString="<%$ ConnectionStrings:eProcessDatabase %>"

OnSelected="sqlDataSpec_Selected" SelectCommand="SELECT Data_Specification.ID, Data_Specification.Task_ID, Data_Specification.Description, Data_Specification.Validation_Rule, Data_Specification.Validation_Rule, Data_Specification.Description, Data_Specification.Common_Flag, Data_Specification.Field_Name, Data_Specification.Field_Name, Data_Specification.SourceID, Data_Specification.FormatID, Data_Specification.SupportedMetricID, Data_Specification.ListOrder, Data_Specification.ToolTip, Data_Specification.Legacy_Field_Name, Data_Specification.Read_Only, Data_Specification.Read_Only_Condition, Data_Specification.Visible, Data_Specification.Mandatory_Field, Data_Specification.Visible_Condition, Data_Specification.Mandatory_Condition, Data_Specification.Audit, Data_Specification.Implementation_Technique, Data_Specification.Implementation_Technique, Data_Specification.Feature_TypeID, (Select Count(*) From P_DataSpecValues Where DataSpecID = Data_Specification.ID) As valueCount, Lookup_Format.Format FROM Data_Specification LEFT OUTER JOIN Lookup_Format ON Data_Specification.FormatID = Lookup_Format.FormatID WHERE (Data_Specification.Task_ID = @Task_ID) ORDER BY Data_Specification.ListOrder">

<SelectParameters>

<asp:ControlParameter Name="Task_ID" ControlID="txtTaskID" Type="String" PropertyName="Text" />

</SelectParameters>

</asp:SqlDataSource>

The RadTextBox (txtTaskID) identified in the ControlParameter is populated in the Page_Load event in code behind.

I have several other similar RadWindows that are working just fine, except their grids ARE NOT within a pageView.
This seems to be the only difference.

Here's the declaration of my radGrid:

<telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server">

<telerik:RadGrid ClientSettings-Resizing-AllowColumnResize="true" PageSize="20" ID="grdDataSpecs" ClientIDMode="Static"

Width="100%" ShowStatusBar="false" DataSourceID="sqlDataSpec" runat="server" AutoGenerateColumns="False"

AllowSorting="True" AllowPaging="false" GridLines="None" Skin="Vista" ClientSettings-Selecting-AllowRowSelect="True" ClientSettings-ClientEvents-OnRowSelected="RowSelected"

AllowMultiRowSelection="False"

ClientSettings-Scrolling-AllowScroll="true" ClientSettings-Scrolling-ScrollHeight="95px"

ClientSettings-Scrolling-UseStaticHeaders="true">

<MasterTableView DataSourceID="sqlDataSpec" DataKeyNames="ID" AllowMultiColumnSorting="True"

CommandItemDisplay="Top" NoMasterRecordsText="No records">

<CommandItemTemplate>

<div style="float: left;">

</div>

<div style="float: right; text-align: right;">

<asp:Label ID="lblRecordCountDataSpecs" runat="server" Text="" OnPreRender="lblRecordCountDataSpecs_PreRender"></asp:Label>

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="ID" UniqueName="DataSpecID" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FormatID" UniqueName="FormatID" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SourceID" UniqueName="SourceID" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SupportedMetricID" UniqueName="SupportedMetricID" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Description" UniqueName="Description" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Field_Name" UniqueName="Field_Name" Display="false"></telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Feature_TypeID" UniqueName="Feature_TypeID" Display="false"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn AllowFiltering="false" HeaderText="Name" UniqueName="Field_Name_Column" DataField="Field_Name">

<ItemTemplate>

<asp:Label ID="lblField_Name" runat="server" Text='<%# Bind("Field_Name")%>'></asp:Label>

<telerik:RadToolTip ID="tipDesc" runat="server" AutoCloseDelay="20000" Height="50"

HideEvent="Default" OffsetX="6" Position="BottomRight" TargetControlID="lblField_Name"

Text='<%# DataBinder.Eval(Container.DataItem, "Description") %>' Width="300">

</telerik:RadToolTip>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn SortExpression="Format" HeaderText="Format" HeaderButtonType="TextButton"

DataField="Format" UniqueName="Format">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="valueCount" HeaderText="# Values" HeaderButtonType="TextButton"

DataField="valueCount" UniqueName="valueCount">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Default_Value" HeaderText="Default Value" Display="False"

HeaderButtonType="TextButton" DataField="Default_Value" UniqueName="Default_Value"

AllowFiltering="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Source" HeaderText="Source" HeaderButtonType="TextButton" Display="False"

DataField="Source" UniqueName="Source">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Legacy_Field_Name" HeaderText="Legacy Field" Display="False"

HeaderButtonType="TextButton" DataField="Legacy_Field_Name" UniqueName="Legacy_Field_Name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="MetricName" HeaderText="Metric" HeaderButtonType="TextButton" Display="False"

DataField="MetricName" UniqueName="MetricName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Read_Only" HeaderText="Read-Only" HeaderButtonType="TextButton" Display="False"

DataField="Read_Only" UniqueName="Read_Only">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Read_Only_Condition" HeaderText="Read-Only Condition" Display="False"

HeaderButtonType="TextButton" DataField="Read_Only_Condition" UniqueName="Read_Only_Condition">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Visible" HeaderText="Visible" HeaderButtonType="TextButton" Display="False"

DataField="Visible" UniqueName="Visible">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Visible_Condition" HeaderText="Visible Condition" Display="False"

HeaderButtonType="TextButton" DataField="Visible_Condition" UniqueName="Visible_Condition">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Mandatory_Field" HeaderText="Mandatory" Display="False"

HeaderButtonType="TextButton" DataField="Mandatory_Field" UniqueName="Mandatory_Field">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Mandatory_Condition" HeaderText="Mandatory Condition" Display="False"

HeaderButtonType="TextButton" DataField="Mandatory_Condition" UniqueName="Mandatory_Condition">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Common_Flag" UniqueName="Common_Flag" Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Audit" UniqueName="Audit" Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ToolTip" HeaderText="ToolTip" Display="False"

HeaderButtonType="TextButton" DataField="ToolTip" UniqueName="ToolTip">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Validation_Rule" HeaderText="Special Instructions" Display="False"

HeaderButtonType="TextButton" DataField="Validation_Rule" UniqueName="Validation_Rule">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Feature_Type" HeaderText="Feature Type" Display="False"

HeaderButtonType="TextButton" DataField="Feature_Type" UniqueName="Feature_Type"

AllowFiltering="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Implementation_Technique" HeaderText="Implementation Technique" Display="False"

HeaderButtonType="TextButton" DataField="Implementation_Technique" UniqueName="Implementation_Technique"

AllowFiltering="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="ListOrder" HeaderText="List Order" HeaderButtonType="TextButton"

DataField="ListOrder" UniqueName="ListOrder" Visible="false">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadAjaxPanel>

Where to next?

Jim

answered on 30 Apr 2014, 12:38 AM

Hi,

I've been working on something else for the last few weeks and just got back into this.
The default2.aspx in the demo you provided does NOT have any RadPageView's!!!

Here's a summary of my problem.
I have 2 grids.
The 1st one is placed on the 1st RadPageView and I can rebind it just fine. This grid is bound to a SqlDataSource during page load. It displays lots of data. No problem here.
If I select a row from this grid, I want to populate the 2nd grid located on the 2nd RadPageView. It too is bound to a SqlDataSource, but initially there is no data.

Here are the 2 scripts; one for each grid.
The 1st one works; the second does not.
The 1st RadPageView containing the 1st grid is visible at the time these scripts fire.

function RefreshDataSpecsGrid() {

var grid = $find("<%= grdDataSpecs.ClientID %>"); // This grid is located within the first pageView

var masterTable = grid.get_masterTableView(); // Yields a valid object

masterTable.rebind();

}

function RefreshDataSpecValuesGrid() {

var grid = $find("<%= grdDataSpecValues.ClientID %>"); // This grid is located within the 2nd pageView

var masterTable = grid.get_masterTableView(); // Yields null !!!!!

masterTable.rebind();

}

Any thoughts on where to go with this?

Thanks.

Jim