Questions on UI for ASP.NET AJAX Forum

3 answers

640 views

RadTabStrip not changing the page

I am using one of the provided sample page for RADGrid.

ASPX:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.Master" AutoEventWireup="false"

CodeBehind="Tenders.aspx.vb" Inherits="WebUI.Tenders" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.QuickStart" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="Content" runat="Server">

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

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

<!--

function RowDblClick(sender, eventArgs) {

sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());

}

function gridCreated(sender, args) {

if (sender.get_editIndexes && sender.get_editIndexes().length > 0) {

document.getElementById("OutPut").innerHTML = sender.get_editIndexes().join();

}

else {

document.getElementById("OutPut").innerHTML = "";

}

-->

</script>

</telerik:RadCodeBlock>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rgdTenders">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgdTenders" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

<telerik:RadGrid ID="rgdTenders" GridLines="None" runat="server" AllowPaging="True"

OnNeedDataSource="rgdTenders_NeedDataSource" AutoGenerateColumns="False" CellSpacing="0"

OnUpdateCommand="rgdTenders_UpdateCommand" OnInsertCommand="rgdTenders_InsertCommand"

OnDeleteCommand="rgdTenders_DeleteCommand" AllowSorting="true" AllowMultiRowSelection="false">

<ClientSettings Selecting-AllowRowSelect="true" />

<PagerStyle Mode="NextPrevAndNumeric" />

<MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="TenderID"

HorizontalAlign="NotSet" AutoGenerateColumns="False" CommandItemSettings-AddNewRecordText="Add New Tender"

RetrieveDataTypeFromFirstItem="true">

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

<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn">

<ItemStyle CssClass="MyImageButton" Width="20px" />

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="Nr" HeaderText="Tender Nr." SortExpression="Nr"

UniqueName="Nr" ColumnEditorID="GridTextBoxColumnEditor1" ItemStyle-Width="150px">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ConfirmText="Delete this Tender?" ConfirmDialogType="RadWindow"

ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"

UniqueName="DeleteColumn">

<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" Width="20px" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings ColumnNumber="2" CaptionDataField="Nr" CaptionFormatString="Edit properties of Tender {0}"

InsertCaption="New Tender">

<FormTableItemStyle Wrap="False"></FormTableItemStyle>

<FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>

<FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White"

Width="100%" />

<FormTableStyle CellSpacing="0" CellPadding="2" Height="110px" BackColor="White" />

<FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle>

<EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record"

UniqueName="EditCommandColumn1" CancelText="Cancel edit">

</EditColumn>

<FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowDblClick="RowDblClick" OnGridCreated="gridCreated" />

</ClientSettings>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

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

<telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor2" runat="server" TextBoxStyle-Width="400px"

TextBoxMode="MultiLine" TextBoxStyle-Height="150">

</telerik:GridTextBoxColumnEditor>

<telerik:GridDateTimeColumnEditor ID="GridDateTimeColumnEditor1" runat="server" TextBoxStyle-Width="200px" />

<br />

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1"

SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Sales" PageViewID="PageView1" />

<telerik:RadTab runat="server" Text="Contact Information" PageViewID="PageView2" />

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="PageView1">

<div>

PageView 1</div>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="PageView2" Width="460px" BorderColor="Black"

BorderWidth="1px">

<div>

PageView 2</div>

</telerik:RadPageView>

</telerik:RadMultiPage>

<br />

<telerik:RadWindowManager ID="RadWindowManager1" runat="server">

</telerik:RadWindowManager>

</form>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="Footer" runat="Server">

</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderID="AfterBody" runat="Server">

</asp:Content>

Code:

Imports Telerik.Web.UI

Imports BAL

Imports DAL.EntityClasses

Partial Class Tenders

Inherits System.Web.UI.Page

Public Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

If Not IsPostBack Then

End If

End Sub

Public Sub rgdTenders_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rgdTenders.NeedDataSource

Dim etcTenders As New DBRealated

rgdTenders.DataSource = etcTenders.GetTenders(Nothing)

End Sub

Protected Sub rgdTenders_InsertCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rgdTenders.InsertCommand

'Get the GridEditFormInsertItem of the RadGrid

Dim insertedItem As GridEditFormInsertItem = DirectCast(e.Item, GridEditFormInsertItem)

'Access the textbox from the edit form template and store the values in string variables.

Dim Nr As String = (TryCast(insertedItem("Nr").Controls(0), TextBox)).Text

Try

Dim etTender As New TenderEntity

etTender.Nr = Nr

Dim obj As New DBRealated

obj.SaveTender(etTender, False)

SetMessage("New Tender """ & Nr & """ has been created!", True)

Catch ex As Exception

SetMessage("Tender with Nr """ & Nr & """ could not be created!", False)

e.Canceled = True

End Try

End Sub

Public Sub rgdTenders_DeleteCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rgdTenders.DeleteCommand

'Get the GridDataItem of the RadGrid

Dim item As GridDataItem = DirectCast(e.Item, GridDataItem)

'Get the primary key value using the DataKeyValue.

Dim TenderID As Integer = CInt(item.OwnerTableView.DataKeyValues(item.ItemIndex)("TenderID"))

Try

Dim obj As New DBRealated

obj.DeleteTender(TenderID)

SetMessage("Tender has been deleted!", True)

Catch ex As Exception

SetMessage("Tender could not be deleted!", False)

e.Canceled = True

End Try

End Sub

Public Sub rgdTenders_UpdateCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rgdTenders.UpdateCommand

'Get the GridEditableItem of the RadGrid

Dim editedItem As GridEditableItem = TryCast(e.Item, GridEditableItem)

'Get the primary key value using the DataKeyValue.

Dim TenderID As Integer = CInt(editedItem.OwnerTableView.DataKeyValues(editedItem.ItemIndex)("TenderID"))

'Access the textbox from the edit form template and store the values in string variables.

Dim Nr As String = (TryCast(editedItem("Nr").Controls(0), TextBox)).Text

Try

Dim etTender As New TenderEntity

etTender.TenderId = TenderID

etTender.Nr = Nr

Dim obj As New DBRealated

obj.SaveTender(etTender, True)

SetMessage("Tender with Nr """ & Nr & """ is updated!", True)

Catch ex As Exception

SetMessage("Tender with Nr """ & Nr & """ could not be updated!", False)

e.Canceled = True

End Try

End Sub

Private Sub SetMessage(ByVal message As String, ByVal bIsGood As Boolean)

gridMessage = message

GoodMessage = bIsGood

End Sub

Private gridMessage As String = Nothing

Private GoodMessage As Boolean = True

Protected Sub rgdTenders_DataBound(ByVal sender As Object, ByVal e As EventArgs) Handles rgdTenders.DataBound

If Not String.IsNullOrEmpty(gridMessage) Then

DisplayMessage(gridMessage, GoodMessage)

End If

End Sub

Private Sub DisplayMessage(ByVal text As String, ByVal bIsGood As Boolean)

If bIsGood Then

rgdTenders.Controls.Add(New LiteralControl(String.Format("<span style='color:green'>{0}</span>", text)))

Else

rgdTenders.Controls.Add(New LiteralControl(String.Format("<span style='color:red'>{0}</span>", text)))

End If

End Sub

End Class

Everything thing related to the RADGrid is working fine, but RADTabStrip is not working as expected, when I select "Contact Information" which is 2nd tab page inside the RADTabStrip it is not actually selecting it and so the content of the 2nd Page "PageView 2" is also not showing.

what i am missing here? do i have to configure something in the update panel for RadTabStrip?

kindly write the code as i am new to Rad World.

TabStrip

answered on 16 May 2013

5 answers

359 views

Pie Chart Labels clipped

Hello,

I'm using the Pie Chart but instead of showing the absolute values in the label, i wanted to show the series name in the label to not need a legend and keep my interface clean. This I could do easily by setting the clienttemplate of the labels. However, after rendering the labels are not displayed proper. They are clipped (see attachments).
It seems that the width of the svg element is actually larger then the width of the containing div that is generated despite them both being the width I set for the control (300px).

Is there anyway to make these labels fit in the container so they are not clipped?
I have limited width on my page because I show more pie charts in a row.

Thanks

Chart (HTML5)

answered on 16 May 2013

1 answer

344 views

Export to Excel create a new Tab

When I export to Excel, can I export other data on the web page into another tab on the excel spreadsheet/workbook?

Grid

answered on 16 May 2013

2 answers

161 views

Multiple chart areas in single chart

Hi,

I have a requirement where I need to define multiple chart areas in a single chart. Is this possible with the ASP.NET Ajax Chart control?

-Vaibhav Goel

Chart (Obsolete)

answered on 16 May 2013

2 answers

95 views

[Solved] Chart Series to Bottom

Hello,

i'm working on RadChart Spline, i set ChartSeries to Bottom, after that i set XAxis.AxisLabel, but Chart Series overlaps XAxis.AxisLabel.
How can i move ChartSeries to Bottom.

Thanks,

Chart (Obsolete)

answered on 16 May 2013

1 answer

112 views

Dock Error

We are getting this error and are not sure what is causing it. Any ideas?

We are using version 2013.1.403.40 for Telerik.Web.UI.DLL.

System.ArgumentException: Invalid object passed in, ':' or '}' expected. (130): {"Top":0,"Left":0,"DockZoneID":"DashBoardZone2","Collapsed":false,"Pinned":false,"Resizable":false,"Closed":false,"Width":"300px",

at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeDictionary(Int32 depth)

at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)

at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)

at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)

at Telerik.Web.UI.RadWebControl.LoadPostData(String postDataKey, NameValueCollection postCollection)

at System.Web.UI.Page.ProcessPostData(NameValueCollection postData, Boolean fBeforeLoad)

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

Time: 5/9/2013 4:03:36 PM

Source: System.Web.Extensions

Dock

answered on 16 May 2013

1 answer

284 views

Problem populating comboBoxes from SQL database after RequiredField Validation

Hi guys,

I have 2 ComboBoxes, The selection from the first comboBox Will populate the Second ComboBox and will bind the data from a SQL database. This all work perfectly but since i added a RequiredFieldValidator on the first ComboBox if the user fails to select a option from the first combobox the Validation Error will Fire but then when the user selects an item from the first ComboBox ofter being prompted to please make a selection the Second ComboBox fails to populate.

Here is and example of Code i am using for the validation

<td>

<telerik:RadComboBox ID="cboAccount" runat="server" DataTextField="AccountName"

DataValueField="AccountID" EnableLoadOnDemand="True" EmptyMessage="Select Account"

MarkFirstMatch="True"

OnSelectedIndexChanged="cboAccount_SelectedIndexChanged"

AutoPostBack="True" >

</telerik:RadComboBox>

<asp:RequiredFieldValidator ID="ValidateAccount" runat="server"ControlToValidate="cboAccount" ErrorMessage="Please select a value"></asp:RequiredFieldValidator>

</td>

ComboBox

answered on 16 May 2013

5 answers

458 views

[Solved] RadMenu and styling

Hi there.
I am almost this close to buying the RadControls ASP.NET Ajax. I do however need to see if this will work.
Can someone kindly tell me how to style the menu items from:

http://demos.telerik.com/aspnet-ajax/menu/examples/appearance/imageonly/defaultcs.aspx?#qsf-demo-source

similar to the following:

http://www.stunicholls.com/menu/pro_dropdown_2.html

I am not sure how the styling works and how to make it look very similar/close to that as possible. I would really appreciate any samples/advice on this.

Even the sample shown on the telerik demo page link above would be great, showing me all the styling colors, fonts, background etc... etc... but not using images (unless to make it a standing out/3D effect but have the menu name as text only)

Thanks again

General Discussions

answered on 16 May 2013

1 answer

217 views

Break toolbar items in two lines

Hello,

I need to place toolbar items in two lines
But don't know how to do. here is attached Image

Editor

answered on 16 May 2013

4 answers

330 views

Changing sort on already sorted column causes different column to be sorted

I have a radGrid in a user control which is loaded dynamically into my page via code. I am able to sort any of the sortable columns in ascending order by clicking the column header. when I attempt to change the sort to descending by clicking a second time on an already sorted column, the sortable column immediately preceding the column I clicked on gets sorted in ascending order. This does not happen when this same user control is referenced directly in the page (not loaded dynamically). Vewstate is enabled.

This is just really odd behaviour which has me stumped. i thought it might be that the sorting was attempting to use a column index for sorting, and was somehow using the wrong index. I added a breakpoint to the grid's SortCommand event handler and the information in the GridSortCommandEventArgs (e) says that the sort expression that will be applied on the second click is from the preceding column, not the column I clicked. I am not hiding or showing columns and the column that is ultimately sorted is not necessarily the column immediately preceding the column I clicked...it is the preceding column that is sortable.

I have attached screen shots of my grid after the first sort and second sort on the same Status column. In these screen shots, the Recipients column is not sortable.

Thanks for the help!

Sean Severson

ComboBox

answered on 16 May 2013