Questions on UI for ASP.NET AJAX Forum

2 answers

417 views

Best Fit/Resize Columns and have specific Columns stay fixed widths

Hello,

I am currently attempting to design a RadGrid with GridBoundColumns and GridButtonColumns. Obviously the button sizes will never change since the images will always be the same.

My issue is when resizing columns with the Best Fit option in the context menu of the RadGrid, or when resizing any column in general, the GridButtonColumns change width size when I do not want them to ever change width size. Is there a way to Override the Best Fit and Resize functionality of the grid to not include specific columns in its recalculations, or is there a better way of handling this?

I have tried setting the HeaderStyle width to a specific size, as well as ItemStyle width, but they are always being overwritten. I've also made the GridButtonColumns Resizable="false" with a TableLayout="Fixed" and the width of the MasterTableView is set to be a specific size so the grid does not grow or contract from left to right. I am running the most recent version of RadControls for ASP.NET AJAX, as of 8/13/2013.

Thank you in advance for your assistance.

Grid

answered on 22 Aug 2013

6 answers

132 views

Selected Stars Have Black Background

Hi,

I'm adding the RadRating control to an existing user control. It works and looks correct in both Firefox and Chrome, but in IE 9 the stars displayed after selecting a rating all have a black background, like the transparency is not working. I've tried with several of the skins and it is the same result. My setup for the control is:

<telerik:RadRating ID="RadRating1" runat="server" ItemCount="5" SelectionMode="Continuous"

Precision="Half" Skin="Default">

</telerik:RadRating>

The demos on your site look correct for me though.

Here is a link to a screen capture showing the problem.

Thank you for any assistance.

Greg

Rating

answered on 22 Aug 2013

5 answers

294 views

Labels for bar chart not showing.

protected void DisplayRadChart(Guid UserID, int CourseID)

{

//CLEAR INFO

Chart_Code.PlotArea.Chart.Series.Clear();

Chart_Code.PlotArea.XAxis.Clear();

//GET THE INFO

i2d2LMSProgress i2d2progress = new i2d2LMSProgress();

UserLessonProgressCollection progress = i2d2progress.GetUserProgress(UserID, CourseID);

ChartSeries failedSeries = new ChartSeries("FTW");

failedSeries.Clear();

failedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

failedSeries.Appearance.LabelAppearance.Visible = false;

failedSeries.Appearance.FillStyle.MainColor = Color.Red;

failedSeries.Type = ChartSeriesType.StackedBar100;

ChartSeries completedSeries = new ChartSeries("Completed");

completedSeries.Clear();

completedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

completedSeries.Appearance.LabelAppearance.Visible = false;

completedSeries.Appearance.FillStyle.MainColor = Color.Green;

completedSeries.Type = ChartSeriesType.StackedBar100;

ChartSeries startedSeries = new ChartSeries("Started");

startedSeries.Clear();

startedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

startedSeries.Appearance.LabelAppearance.Visible = false;

startedSeries.Appearance.FillStyle.MainColor = Color.Yellow;

startedSeries.Type = ChartSeriesType.StackedBar100;

ChartSeries notstartedSeries = new ChartSeries("Not Started");

notstartedSeries.Clear();

notstartedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

notstartedSeries.Appearance.LabelAppearance.Visible = false;

notstartedSeries.Appearance.FillStyle.MainColor = Color.PowderBlue;

notstartedSeries.Type = ChartSeriesType.StackedBar100;

Chart_Code.Legend.Items.Clear();

foreach (UserLessonProgress ulp in progress)

{

failedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Failed)));

completedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Completed)));

startedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Started)));

notstartedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.NotStarted)));

Chart_Code.PlotArea.XAxis.AddItem(new ChartAxisItem(ulp.Title, Color.Violet));

}

Chart_Code.AddChartSeries(failedSeries);

Chart_Code.AddChartSeries(completedSeries);

Chart_Code.AddChartSeries(startedSeries);

Chart_Code.AddChartSeries(notstartedSeries);

//SPECIFY THE CHART

Chart_Code.DefaultType = ChartSeriesType.StackedBar100;

Chart_Code.Visible = true;

Chart_Code.PlotArea.Appearance.FillStyle.MainColor = Color.FromArgb(255, 255, 255);

Chart_Code.PlotArea.Appearance.FillStyle.SecondColor = Color.FromArgb(255, 255, 255);

Chart_Code.PlotArea.EmptySeriesMessage.TextBlock.Text = "No data available";

Chart_Code.PlotArea.EmptySeriesMessage.Appearance.FillStyle.MainColor = Color.FromArgb(255, 255, 255);

Chart_Code.PlotArea.EmptySeriesMessage.Appearance.FillStyle.SecondColor = Color.FromArgb(255, 255, 255);

//** CHART TITLE **

Chart_Code.ChartTitle.TextBlock.Appearance.Dimensions.Height = 0;

Chart_Code.ChartTitle.TextBlock.Visible = false;

Chart_Code.Chart.Appearance.Corners.SetCornersType(Telerik.Charting.Styles.CornerType.Round);

Chart_Code.Appearance.Border.Color = Color.LightGray;

Chart_Code.Skin = "Outlook";

//** YAXIS **

Chart_Code.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Font = new Font("Arial", 8, FontStyle.Bold);

Chart_Code.PlotArea.YAxis.AxisLabel.TextBlock.Appearance.TextProperties.Color = Color.FromArgb(50, 50, 50);

Chart_Code.PlotArea.YAxis.MaxValue = 110;

Chart_Code.PlotArea.YAxis.MaxValue = 0;

Chart_Code.PlotArea.YAxis.AutoScale = false;

Chart_Code.PlotArea.YAxis.AddRange(0, 100, 20);

Chart_Code.PlotArea.YAxis.AxisLabel.TextBlock.Text = "%";

Chart_Code.PlotArea.YAxis.AxisLabel.Visible = true;

Chart_Code.PlotArea.YAxis.Appearance.MinorGridLines.Visible = false;

//** XAXIS **

Chart_Code.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Font = new Font("Arial", 8, FontStyle.Bold);

Chart_Code.PlotArea.XAxis.AutoScale = true;

//Chart_Code.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 320;

Chart_Code.PlotArea.XAxis.Appearance.LabelAppearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.Top;

Chart_Code.PlotArea.XAxis.Appearance.TextAppearance.AutoTextWrap = Telerik.Charting.Styles.AutoTextWrap.True;

Chart_Code.PlotArea.XAxis.LayoutMode = Telerik.Charting.Styles.ChartAxisLayoutMode.Between;

Chart_Code.PlotArea.Appearance.Dimensions.Margins.Bottom.Value = 30;

Chart_Code.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 90;

//** CHART HEIGHT/WIDTH/PADDING/MARGINS

Chart_Code.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(40);

Chart_Code.PlotArea.Appearance.Dimensions.Margins.Top = Telerik.Charting.Styles.Unit.Percentage(10);

Chart_Code.PlotArea.Appearance.Dimensions.Margins.Left = Telerik.Charting.Styles.Unit.Percentage(8);

Chart_Code.PlotArea.Appearance.Dimensions.Margins.Right = Telerik.Charting.Styles.Unit.Percentage(5);

Chart_Code.PlotArea.Appearance.Dimensions.Width = Telerik.Charting.Styles.Unit.Pixel(400);

//// ** LEGEND STYLE **

Chart_Code.Legend.TextBlock.Appearance.FillStyle.SecondColor = Color.White;

Chart_Code.Legend.Appearance.FillStyle.SecondColor = Color.White;

Chart_Code.Legend.Appearance.ItemMarkerAppearance.Visible = false;

Chart_Code.Legend.Appearance.Corners.SetCornersType(Telerik.Charting.Styles.CornerType.Round);

Chart_Code.Legend.Appearance.Position.AlignedPosition = Telerik.Charting.Styles.AlignedPositions.BottomLeft;

Chart_Code.Legend.Appearance.Dimensions.Margins.Left = 70;

Chart_Code.Legend.Appearance.Dimensions.Margins.Bottom = 20;

Chart_Code.Legend.Appearance.Dimensions.AutoSize = false;

Chart_Code.Legend.Appearance.Dimensions.Width = Telerik.Charting.Styles.Unit.Pixel(830);

Chart_Code.Legend.Appearance.Dimensions.Height = Telerik.Charting.Styles.Unit.Pixel(30);

//// ** PLOTAREA STYLE **

Chart_Code.PlotArea.Appearance.Border.Visible = false;

Chart_Code.PlotArea.Appearance.FillStyle.MainColor = Color.White;

Chart_Code.PlotArea.Appearance.FillStyle.SecondColor = Color.White;

}

When I use the code above I am only getting the numbers rather than the titles for the columns.

I am adding the information with the line "Chart_Code.PlotArea.XAxis.AddItem(new ChartAxisItem(ulp.Title, Color.Violet)); " but the numbers still show up (and aren't violet).

Any ideas where I might be going wrong? If I put in a break I can check the values at the end of the procedure and they are there.

Below is a more stripped down version of the code that still shows 1,2,3 etc. rather than the titles.

//CLEAR INFO

Chart_Code.PlotArea.Chart.Series.Clear();

Chart_Code.PlotArea.XAxis.Clear();

//GET THE INFO

i2d2LMSProgress i2d2progress = new i2d2LMSProgress();

UserLessonProgressCollection progress = i2d2progress.GetUserProgress(UserID, CourseID);

ChartSeries failedSeries = new ChartSeries("FTW");

failedSeries.Clear();

failedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

failedSeries.Appearance.LabelAppearance.Visible = false;

failedSeries.Appearance.FillStyle.MainColor = Color.Red;

failedSeries.Type = ChartSeriesType.StackedBar100;

ChartSeries completedSeries = new ChartSeries("Completed");

completedSeries.Clear();

completedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

completedSeries.Appearance.LabelAppearance.Visible = false;

completedSeries.Appearance.FillStyle.MainColor = Color.Green;

completedSeries.Type = ChartSeriesType.StackedBar100;

ChartSeries startedSeries = new ChartSeries("Started");

startedSeries.Clear();

startedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

startedSeries.Appearance.LabelAppearance.Visible = false;

startedSeries.Appearance.FillStyle.MainColor = Color.Yellow;

startedSeries.Type = ChartSeriesType.StackedBar100;

ChartSeries notstartedSeries = new ChartSeries("Not Started");

notstartedSeries.Clear();

notstartedSeries.Appearance.LegendDisplayMode = ChartSeriesLegendDisplayMode.SeriesName;

notstartedSeries.Appearance.LabelAppearance.Visible = false;

notstartedSeries.Appearance.FillStyle.MainColor = Color.PowderBlue;

notstartedSeries.Type = ChartSeriesType.StackedBar100;

Chart_Code.Legend.Items.Clear();

foreach (UserLessonProgress ulp in progress)

{

failedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Failed)));

completedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Completed)));

startedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.Started)));

notstartedSeries.AddItem(new ChartSeriesItem(Convert.ToDouble(ulp.NotStarted)));

Chart_Code.PlotArea.XAxis.AddItem(new ChartAxisItem(ulp.Title, Color.Violet));

}

Chart_Code.AddChartSeries(failedSeries);

Chart_Code.AddChartSeries(completedSeries);

Chart_Code.AddChartSeries(startedSeries);

Chart_Code.AddChartSeries(notstartedSeries);

//SPECIFY THE CHART

Chart_Code.DefaultType = ChartSeriesType.StackedBar100;

Chart_Code.Visible = true;

Chart (Obsolete)

answered on 22 Aug 2013

1 answer

116 views

RadListView contents disappearing on rebind

Hello,

I have a "View More" button which, upon clicking, increases the page size of my ListView control to show more entries. Functionally this works fine, however the panel my list view is in disappears and then reappears with the new content. I'd prefer to have it stay on the page while it loads more content, like it does in the integrated paging demo here: http://demos.telerik.com/aspnet-ajax/listview/examples/paging/integratedpaging/defaultcs.aspx

<telerik:RadAjaxManagerProxy runat="server" ID="Proxy1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ddlCategories">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ddlCategories" UpdatePanelRenderMode="Inline" LoadingPanelID="AjaxPanel1" />

<telerik:AjaxUpdatedControl ControlID="pnlLittleVideos" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="pnlLittleVideos">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlLittleVideos" LoadingPanelID="AjaxPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel runat="server" ID="AjaxPanel1">

<img src="/bh/corporate/includes/img/loaders/style2_white.gif" />

</telerik:RadAjaxLoadingPanel>

<asp:Panel runat="server" ID="pnlLittleVideos">

<telerik:RadListView ID="rptLittleVideos" runat="server" AllowPaging="true" PageSize="2" ItemPlaceholderID="plcVideoContainer">

<LayoutTemplate>

<asp:PlaceHolder runat="server" ID="plcVideoContainer"></asp:PlaceHolder>

<asp:Button runat="server" ID="btnNext" Text="More" OnClick="btnMore_Click" ></asp:Button>

</LayoutTemplate>

<ItemTemplate>

<section class="box li-video">

</section>

</ItemTemplate>

</telerik:RadListView>

</asp:Panel>

public void btnMore_Click(object sender, EventArgs e)

{

rptLittleVideos.PageSize = 5;

rptLittleVideos.CurrentPageIndex = 0;

rptLittleVideos.Rebind();

}

private void rptLittleVideos_NeedDataSource(object sender, RadListViewNeedDataSourceEventArgs e)

{

if (!IsPostBack) PopulateTags();

var featurettes = CurrentItem

.ChildrenByTemplate("Little Inspiration Featurette")

.As(i => new LittleVideo(i))

.Where(i => i.IsSet) // && i.Tags.Contains(tag)

.ToList();

// Check to see if we need to filter by category

if (ddlCategories.SelectedIndex > 0)

{

var tagFiltered = new List<LittleVideo>();

tagFiltered = featurettes.Where(i => i.Tags.Contains(ddlCategories.SelectedValue)).ToList();

featurettes.Clear();

featurettes.AddRange(tagFiltered);

}

rptLittleVideos.ItemDataBound += rptLittleVideos_ItemDataBound;

rptLittleVideos.DataSource = featurettes;

RadAjaxManager.GetCurrent(Page).ResponseScripts.Add("jQuery.app.pages.global.reloadJS()");

}

ListView

answered on 22 Aug 2013

0 answers

118 views

Adding Multiple Series to a Radchart

Hi All

I have a List<> which contains multiple items and is built at dynamically when a user clicks Search.

I need to bind this list to a Radchart programmatically and need to add each item in this list to a series then add this to the
Radchart.

I have tried with the code below but i am getting an error - can anyone help?

foreach (ProductsAndPrices yl in YearlyAverage)

{

string name = yl.Product + " " + yl.ProductStrength + " " + yl.Pack_Size;

chart.Name = name;

int av = int.Parse(yl.Average.ToString());

chart.AddItem(int.Parse(yl.Average.ToString()), name);

}

testing.Series.Add(chart);

I need to get all the values from the list in the format yl[0].Average , yl[1].average etc etc and bind this to the radchart...

Many thanks
Ram

Chart (Obsolete)

asked on 22 Aug 2013

1 answer

1.9K+ views

Set Radwindow height and width at the time on opning

I want to display rad window on button click . My button inside radgrid, when i click on button rad window will open but problem is i was not able to set width and height for windows.

Please help me urgent

Window

answered on 22 Aug 2013

1 answer

70 views

RadAjaxLoadingPanel shows only for the first button

I created this JS function that used for 3 client side buttons in their onclick functions

function DeleteExam(ExmID) {
if (confirm("Are you sure you want to delete this item?")) {
SetVars(ExmID, "");
$('#' + "<%=btnDeleteExam.ClientID%>").click();
return true;
}
else return false;
}

I used the button btnDeleteExam to update upDetails telerik:RadAjaxPanel like this

<telerik:AjaxSetting AjaxControlID="btnDeleteExam">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="updDetails" LoadingPanelID="lpnlMiddle" />
</UpdatedControls>
</telerik:AjaxSetting>

now telerik:RadAjaxLoadingPanel "lpnlMiddle" shows only for the first button and doesn't show for the others

Ajax

answered on 22 Aug 2013

1 answer

176 views

FancyBox, UpdatePanel and NestedGrid

Hi everyone

I have a RadGrid, inside a UpdatePanel, so that the page doesn't jump to the top during postbacks.

In the Grid I have a fancy box that opens up a deny window, but when I expand a grid item, the page loses the document.Ready function and the FancyBox stops working, any idea how to get around this?

Here is my code:

<script type="text/javascript">

$(document).ready(function () {

$("a.denyButton").fancybox({

'width': 400,

'height': 400,

'autoScale': true,

'transitionIn': 'none',

'transitionOut': 'none',

'type': 'iframe',

'onClosed': function () {

window.location = "Index.aspx";

}

});

</script>

<asp:UpdatePanel ID="uxBookUpdatePanel" runat="server">

<ContentTemplate>

<telerik:RadGrid ID="uxBookOrderGrid" runat="server" OnNeedDataSource="uxBookOrderGrid_NeedDataSource">

<MasterTableView DataKeyNames="BookOrderID" CssClass="quantitytable table table-striped">

<NestedViewTemplate>

<div class="tabstrip-wrapper">

<telerik:RadTabStrip ID="uxTabMenuStrip" runat="server" MultiPageID="uxMultiPageWIPDetail" SelectedIndex="0" Align="Justify" >

<Tabs>

<telerik:RadTab Text="Book Order Details" PageViewID="uxBookOrderDetails"/>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="uxMultiPage" runat="server" SelectedIndex="0" CssClass="tabstrip-page">

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

ORDER DETAIL VIEW

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</NestedViewTemplate>

<Columns>

<telerik:GridBoundColumn FilterControlWidth="90%" SortExpression="OrderID" HeaderText="Order ID" DataField="OrderID" UniqueName="OrderID" CurrentFilterFunction="Contains" ShowFilterIcon="false" AutoPostBackOnFilter="true" />

.

<ItemTemplate>

<telerik:RadButton ToolTip="Approve Order" CssClass="approveButton" ID="uxBookOrderApprove" runat="server" OnClick="uxBookOrderApprove_Click">

<Image EnableImageButton="true" />

</telerik:RadButton>

<asp:HyperLink ToolTip="Deny Order" Width="25px" CssClass="denyButton" ID="uxBookOrderDeny" runat="server"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

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

</Columns>

<NoRecordsTemplate>

No Book Orders waiting to be Approved.

</NoRecordsTemplate>

</MasterTableView>

</telerik:RadGrid>

</ContentTemplate>

</asp:UpdatePanel>

</div></div></div>

</asp:Content>

General Discussions

answered on 22 Aug 2013

4 answers

241 views

Scheduler With Web Service Error when loading

Hello

I have a radscheduler with web service binding set up like the demo on the website. It is working fine on my local machine and also working fine on my local intranet server. When I deployed it to the public server I am getting the following error (Stack trace):

[SocketException (0x274c): A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond 50.62.137.146:443]

System.Net.Sockets.Socket.DoConnect(EndPoint endPointSnapshot, SocketAddress socketAddress) +305

System.Net.ServicePoint.ConnectSocketInternal(Boolean connectFailure, Socket s4, Socket s6, Socket& socket, IPAddress& address, ConnectSocketState state, IAsyncResult asyncResult, Int32 timeout, Exception& exception) +699

[WebException: Unable to connect to the remote server]

System.Net.WebClient.UploadDataInternal(Uri address, String method, Byte[] data, WebRequest& request) +3298576

System.Net.WebClient.UploadString(Uri address, String method, String data) +319

Telerik.Web.UI.SchedulerWebServiceClient.LoadResources(WebClient client, ResourcesPopulatingEventArgs args) +267

[Exception: Unable to retrieve response message]

Telerik.Web.UI.SchedulerWebServiceClient.HandleWebException(WebException webEx) +311

Telerik.Web.UI.SchedulerWebServiceClient.LoadResources(WebClient client, ResourcesPopulatingEventArgs args) +364

Telerik.Web.UI.SchedulerWebServiceClient.GetResources() +421

Telerik.Web.UI.RadScheduler.BindResourcesFromWebService() +90

Telerik.Web.UI.RadScheduler.PerformSelect() +117

Telerik.Web.UI.RadScheduler.CreateChildControls(Boolean bindFromDataSource) +81

System.Web.UI.Control.EnsureChildControls() +182

System.Web.UI.Control.FindControl(String id, Int32 pathOffset) +35

Telerik.Web.ChildControlHelper.FindControlRecursive(String ID, Control root) +211

Telerik.Web.ChildControlHelper.FindControlRecursive(String ID, Control root) +283

Telerik.Web.UI.RadAjaxControl.OnPagePreRender(Object sender, EventArgs e) +1450

System.EventHandler.Invoke(Object sender, EventArgs e) +0

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

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

This only happens when I am using the ResourcePopulationMode="ServierSide". When I change that to ClientSide then it works and the webservice gets called properly. I am using fiddler to see that. I want to use grouping however so can't use ClientSide. Why is this error occuring? Is there some configuration setting I need to do on the server to get the GetReources method to work? Any help would be appreciated :) Thanks

Scheduler

answered on 22 Aug 2013

1 answer

86 views

Datasource question

Hello,

I am new to using the chart and was looking at the demos. On one of them they are using a SQLDataSource control using a select statement to select the x/y series data. It looked like the fields selected are being used in the series code to define the data fields. My question is if I use a stored procedure that returns many extra fields can I still use it and only set the fields I want for the series part? In other words if I have fields Sales, ID, Person, Address, City returned and I only want to use Sales and Person can I do this and it will ignore the other fields being returned?

Thanks!

Warren

Chart (Obsolete)

answered on 22 Aug 2013