Questions on UI for ASP.NET AJAX Forum

1 answer

209 views

How to add/remove a Tab from TabStrip control, by clicking a button from an iFrame page which is reference in the MultiPage View

Hi,

I am working on a SharePoint 2010 based project and most of the look & feel and customisation will be done by Telerik Controls. I am using Telerik TabStrip control in conjunction with MultiPage View control to dynamically generate Tabs and their associated Pages. Most of the MultiPage View pages will be referenced as Iframe.

So on the home page of SP 2010 web site, you will see header, footer and TabStrip control on the left instead of Quick Launch menu and content on the middle screen will be rendered by a referenced Page View i.e. iFrame. The iFrame will be a SharePoint page that will render content and Ribbon control.

I want to provide a button called “Add this page to Tab” on the iFrame page. On the click of “Add this page to Tab”, I want to add a new Tab on the TabStrip control on the client side without any post back. So far, I can access the TabStrip control object from JavaScript by using the following code.

var tabStrip = parent.document.getElementbyId(“ct100_PlaceHolderMain_RadTabStrip1”);

I can also access the Rad MultipPage View control DIV by using the following JavaScript.

var pageView = parent.document.getElementbyId(“ct100_PlaceHolderMain_RadMultiPage1”);

I looked at the code of adding a new tab in the TabStrip control on client side at http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/how-to-set-pageview-to-a-tab-using-client-method.aspx

See code below, which is mentioned in the URL above.

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

multiPage.trackChanges();

var pageView = new Telerik.Web.UI.RadPageView();

multiPage.get_pageViews().add(pageView);

pageView.get_element().innerHTML = "<iframe src='http://www.google.com' width='100%' height='600px'></iframe>";

multiPage.commitChanges();

var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

var tab = new Telerik.Web.UI.RadTab();

tab.set_text("New Tab");

tab.set_pageViewID(pageView.get_id());

alert(pageView.get_id());

tabStrip.trackChanges();

tabStrip.get_tabs().add(tab);

tabStrip.commitChanges();

tabStrip.repaint();

My issue is that I cannot access pageView or TabStrip object properties or methods as I am trying to add a new tab from the iFrame. Can you please provide me detail on how to execute the above code from the iFrame page to add a new tab from the client side.
Similar issue is also described here http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/dynamic-tab-strip-from-iframe.aspx

P.S. I need to achieve the similar functionality to remove a tab by clicking of a button, which will be provided in the iFrame (iFrame will be reference through Page Views content URL property).

Thanks in advance.

Best Regards,

Adnan Ahmed

TabStrip

answered on 29 Jun 2011

1 answer

45 views

substitute for "OnResponseReceived" attribute in RadAjax

Hi,

The Classic RadControls had an attribute "OnResponseReceived" in the ClientEvents.
Which attribute has substituted this in the new RadAjax. I see "OnResponseEnd" in the clientEvents. Is it the same?

Thanks,
Ripunjay

Ajax

answered on 29 Jun 2011

1 answer

55 views

Grouping Panel partially hidden

Hi,

If you look at the screenshot attached you will notice the grouping panel is partially hidden. This prevents me from clicking on it. I can't figure this one out so your help would be appreciated. Code as follow:

<div style="width:100%; position:relative">

<telerik:RadGrid AlternatingItemStyle-BackColor="White" ID="RadGrid1" Width="100%"

runat="server" AllowSorting="false" GridLines="None" Skin="WebBlue" Height="400px"

ItemStyle-BackColor="White" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" GroupingEnabled="true" GroupPanel-Width="128px" GroupHeaderItemStyle-Width="128px">

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

<PagerStyle Mode="NumericPages"></PagerStyle>

<AlternatingItemStyle Wrap="True"></AlternatingItemStyle>

<MasterTableView HierarchyDefaultExpanded="true" ShowHeader="true" AutoGenerateColumns="False"

DataKeyNames="poid" HierarchyLoadMode="ServerOnDemand" NoMasterRecordsText="No records to display." GroupLoadMode="Server" ExpandCollapseColumn-ButtonType="PushButton">

<DetailTables>

<telerik:GridTableView Name="test" HeaderStyle-BackColor="Silver" ItemStyle-BackColor="Menu"

HeaderStyle-HorizontalAlign="Left" AutoGenerateColumns="false" DataKeyNames="poid"

AlternatingItemStyle-BackColor="Menu" runat="server" NoDetailRecordsText="No sales orders to display.">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="poid" MasterKeyField="poid" />

</ParentTableRelation>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<Columns>

<telerik:GridBoundColumn HeaderStyle-Width="64px" ItemStyle-BorderStyle="None" DataField="sono"

HeaderText="#" SortExpression="sono" HeaderButtonType="TextButton"

UniqueName="sono">

<ItemStyle BorderStyle="None"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderStyle-Width="64px" ItemStyle-BorderStyle="None" DataField="soDescription"

HeaderText="Description" SortExpression="soDescription"

UniqueName="soDescription">

<ItemStyle BorderStyle="None"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderStyle-Width="96px" ItemStyle-BorderStyle="None" DataField="TotalNet"

HeaderText="Net Price" DataFormatString="{0:c}"

UniqueName="TotalNet" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right">

<ItemStyle BorderStyle="None"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderStyle-Width="128px" ItemStyle-BorderStyle="None" HeaderText="Status"

HeaderButtonType="TextButton" DataField="Status"

UniqueName="Status">

<ItemStyle BorderStyle="None"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridHyperLinkColumn HeaderStyle-Width="48px" DataNavigateUrlFields="soid" DataNavigateUrlFormatString="../SO/SOEdit.aspx?soid={0}"

Text="View" HeaderText="" HeaderStyle-HorizontalAlign="Center">

<ItemStyle HorizontalAlign="Center" />

</telerik:GridHyperLinkColumn>

</Columns>

<AlternatingItemStyle BackColor="White"></AlternatingItemStyle>

<HeaderStyle HorizontalAlign="Left" BackColor="Silver"></HeaderStyle>

</telerik:GridTableView>

</DetailTables>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<ExpandCollapseColumn Visible="True">

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn ItemStyle-ForeColor="Navy" ItemStyle-Font-Bold="true" DataField="pono"

HeaderText="Purchase Orders and Sales Orders" SortExpression="pono" HeaderButtonType="TextButton"

UniqueName="pono">

<ItemStyle Font-Bold="True" ForeColor="Navy"></ItemStyle>

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

Grid

answered on 29 Jun 2011

1 answer

114 views

How can use ScrollMode when chart data bounded programmatically?

hi
How can use ScrollMode when chart data bounded programmatically?
my c# code is look like this:

protected void Page_Load(object sender, EventArgs e)

{

ConnectionStringSettings connectionString = ConfigurationManager.ConnectionStrings["database"];

SqlConnection connection = new SqlConnection(connectionString.ConnectionString);

SqlCommand command = new SqlCommand("selectDetails", connection);

command.CommandType = CommandType.StoredProcedure;

SqlDataAdapter dataAdapter = new SqlDataAdapter();

dataAdapter.SelectCommand = command;

DataSet dataSet = new DataSet();

dataAdapter.Fill(dataSet, "info");

chart.ClientSettings.EnableZoom = true;

chart.ClientSettings.ScrollMode = Telerik.Web.UI.ChartClientScrollMode.XOnly;

chart.DataSource = dataSet.Tables["info"];

chart.DataBind();

}

but I get this exception:

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[NullReferenceException: Object reference not set to an instance of an object.]

Telerik.Web.ScriptObjectBuilder.RegisterCssReferences(Control control) +182

Telerik.Web.UI.RadChart.OnPreRender(EventArgs e) +61

System.Web.UI.Control.PreRenderRecursiveInternal() +103

System.Web.UI.Control.PreRenderRecursiveInternal() +175

System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496

Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.225

any body can help me?

Chart (Obsolete)

answered on 29 Jun 2011

5 answers

146 views

Ajaxifying Template Columns

Hello,

I have two GridTemplate columns in a Radgrid and they have two DropDownLists controls in each column. I need to update the 2nd grid column depending on the selected value from the first. I have the following code from my project:

<telerik:GridTemplateColumn UniqueName="State" HeaderText="State" SortExpression="State" HeaderStyle-Width="140px">

<ItemTemplate>

<asp:Label ID="lblState" runat="server" Text='<%# Eval("State") %>'></asp:Label>

<asp:DropDownList ID="ddlState" runat="server" DataTextField="State"

CssClass="cadddl" OnSelectedIndexChanged="ddlState_SelectedIndexChanged"

AutoPostBack="true" DataValueField="State" Style="display: none">

</asp:DropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="City" HeaderText="City" SortExpression="City"

HeaderStyle-Width="140px">

<ItemTemplate>

<asp:Label ID="lblCity" runat="server" Text='<%# Eval("City") %>' />

<asp:DropDownList ID="ddlCity" runat="server" DataTextField="City" CssClass="cadddl"

Width="120px" DataValueField="City" Style="display: none" />

</ItemTemplate>

</telerik:GridTemplateColumn>

#region DropDownList

protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)

{

DropDownList ddlState = (DropDownList)sender;

}

#endregion

I've used the "Grid / Client edit with batch server update " demo to implement the grid (http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultcs.aspx).

The ddlState_SelectedIndexChanged event updates the hole Grid, so i miss the earlier changes on the grid and i don't know how to find the corresponding ddlCity to the selected State.

Thanks in advance,

Tiago Gerevini Yoshioka

Grid

answered on 29 Jun 2011

1 answer

185 views

Grid Set as invoice detail.

Greetings, I am trying to make a detailed invoice in a grid, which I hope is that the grid remains on all blank lines available to be edited, similar to a spreadsheet for execl, typically the grid is what makes give only one new line and I want it all unfold.

Thanks, I hope to help me.

Grid

answered on 29 Jun 2011

1 answer

63 views

editor get whole value

how to get whole value in Radeditor

Radeditor1.html (or) text , (or) some other

what i give there in place

Thanks,
Mohamed.

Editor

answered on 29 Jun 2011

1 answer

48 views

Virtual Scrolling with Customized Cells

Hello,

I am very new to the RadGrid control. I am trying to implement the Virtual Scrolling feature. All the examples I see use a datasource that is pretty simple. I have a datasource that is a select statement pretty simple. The issue comes in the results. On some records, if a value in one of the columns equals a certain value then I want that cell to show a checkbox. If the same column has a value of a different value then I want the cell to show an image.

Are there examples of the Virtual Scrolling where the system has to go through each record before displaying to set the cell type correctly?

Thanks

Grid

answered on 29 Jun 2011

2 answers

122 views

RadEditor ExportToPdf New Page

Hi,

I need a new page in pdf.

Sample:
radeditor1.content = " pdf document page1 <br /> page1 new line -new page- pdf document page2"

Thank you.

Editor

answered on 29 Jun 2011

1 answer

159 views

radgrid static and dynamic columns display order

Hello,

I am displaying radgrid data, some columns using GridTemplateColumn and some are dynamically binding from the code behind. the grid is rendering the static columns first and dynamic columns later. I want to display one of the static columns as last column in the grid. can you please suggest how to achieve this?

Thanks in advance.

Regards,
Hari.

Grid

answered on 29 Jun 2011