Questions on UI for ASP.NET AJAX Forum

13 answers

191 views

Hi,

I am developing a report screen for internal use on my company and I need to have the RadWindow functionality enabled, however I ran into an issue with positioning. I've searched a lot about it but couldn't find a solution for the issue.

For the record, I'm using VS2010, Framework 4.0, Windows 7, Telerik RadControls for ASP.NET AJAX Q1 2010 SP1.

I'm calling the rad window through radopen on client-site as you can see below (some parts of the script have been removed):

var ReportHandler = function () {

var lnkExportToExcel;

// other implementation

var GetQueryString = function () {

// other implementation

};

var lnkExportToExcel_Click = function (event) {

window.radopen("ExportOptions.aspx?" + GetQueryString(), "wndExportOptions");

return false;

};

var EndRequestHandler = function () {

InitializeReportHandler();

// other implementation

};

var InitializeReportHandler = function () {

lnkExportToExcel = $("#lnkExportToExcel");

lnkExportToExcel.bind("click", null, lnkExportToExcel_Click);

// other implementation

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

};

this.Start = function () {

InitializeReportHandler();

};

}

$(function () {

new ReportHandler().Start();

});

This is the markup of the content page which uses the script:

[...]

<asp:Content ID="theBody" ContentPlaceHolderID="MainContent" runat="server">

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

<asp:ScriptManager ID="transactionStatisticsScriptManager" runat="server" />

<telerik:RadWindowManager ID="tsWindowManager" Overlay="true" runat="server" Behaviors="Move,Close">

<Windows>

<telerik:RadWindow ID="wndExportOptions" runat="server" Modal="true" Overlay="true" IconUrl="/images/procom.png" Title="Export Options" VisibleStatusbar="false" Height="210px" Width="300px" ShowContentDuringLoad="false">

</telerik:RadWindow>

<telerik:RadWindow ID="wndViewDetails" runat="server" Modal="true" Overlay="true" IconUrl="/images/procom.png" Title="View Details" VisibleStatusbar="false" Height="450px" Width="900px" ShowContentDuringLoad="false">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

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

</ContentTemplate>

[...]

<telerik:RadGrid ID="grdSearchResults" Width="968px" runat="server" [...Other definitions...]>

<MasterTableView EnableNoRecordsTemplate="true" CommandItemDisplay="Top">

<CommandItemTemplate>

<a id="lnkExportToExcel" href="#">

<img src="images/excel.gif"

width="22px"

height="22px"

border="0px"

alt="<%= GetGlobalResourceObject("TransactionStatistics", "ExportToExcelAlt").ToString() %>"

title="<%= GetGlobalResourceObject("TransactionStatistics", "ExportToExcelAlt").ToString() %>"/>

</a>

</CommandItemTemplate>

[...Rest of the Grid...]

[...]

</ContentTemplate>

</asp:UpdatePanel>

<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script src="scripts/ReportHandler.dev.js" type="text/javascript"></script>

</form>

</asp:Content>

The rad window is being displayed when I click the excel image defined on the CommandItemTemplate section, however, it does not display it on the correct position. I haven't modified anything regarding the position of the window either through markup or css; I was expecting it to be centralized by default.

What happens is that it opens a bit past the center torwards the right side of the page. I can see that the overlay is also being displayed with a huge space (some sort of margin/padding or whatever) from the left side of the browser window, as if it was starting form the actual content page and not from the entire page (which is a merge from master page and content) so I would assume it does not support master page, but I hope is not the case.

Another very annoying issue I'm having is that when I close the RadWindow, if I click the button again, it opens even more on the right, and it happens subsequently until it's completely off the screen. The horizontal scroll bar has a lot more space to be rolled torwards the left and it increases every time I open one of these windows.

Also, if I try to drag the window around, it makes the horizontal scroll bar go nuts and gets even larger. As soon as I drop the window on the position I want, it moves itself to the right, completely going off the screen.

Please see the attached images to have an idea of what's happening on the UI.

img1.png shows the screen before I click the export to excel icon;
img2.png shows the screen when I click the export to excel icon for the first time;
img3.png shows the screen when I click the export to excel icon for the second time.

I haven't added more images, but the behaviour is the same, it keeps going torwards the right until it's completely off the screen and the scroll bar gets huge.

I really need some help with this guys.

Thanks

Update: It seems to have a normal behavior when I run the app using a one-monitor computer with small screen resolution (1024x768). The screenshots I sent previously where from a two-monitor computer on a 1920x1080 screen resolution. I have added an attachment (problem with safari, had to add attachment on other post of this same thread) which shows the expected behavior.

Window

answered on 03 Dec 2010

6 answers

171 views

Read values from RadGrid

I'm attempting to read values from a RadGrid. I've listed the code below and it works and doesn't produce an error, however, it doesn't read any of the values from the RadGrid.

Protected

Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click

For Each item As GridDataItem In rgLanguages.Items

Dim test As String = item("Language").Text

Grid

answered on 03 Dec 2010

1 answer

118 views

scroll invisible in radscheduler

hi,

in android emulator the scroller is invisible in radscheduler.. and in blackberry its visible but could not render.. is there any solution for this or are there any different telerik control for mobile devices available in market??

Scheduler

answered on 03 Dec 2010

4 answers

142 views

[Solved] Decorated CheckBoxes have no client-side events

Is there any way to capture the click event from a decorated checkbox?

FormDecorator

answered on 03 Dec 2010

1 answer

115 views

Copy Paste Relative Links Problem

Hi,
My relative path is like ---> "photos/pic1.jpg"... The relative links turns to absolute... I referred to posts and found your following JS function...
function OnClientPasteHtml(sender, args)
{
    var commandName = args.get_commandName();
    var value = args.get_value();
    if (commandName == "Paste")
    {
        var domainName = "http://" + window.location.host; //returns the hostname and port number of the current URL
        ... ... ... ... ...

But the problem is... When it turns to absolute, the URLs become as shown below depending on server.
I have URLs like --> http://www.xyz.com/sms_server1/photos/pic1.jpg and http://www.xyz.com/sms_live/photos/pic1.jpg

Your following code --> var domainName = "http://" + window.location.host; ///// Returns the hostname and port number of the current URL

But it does not return ---->   sms_server1    OR     sms_live   etc...
How can I replace it...

Thanks,
Piyush

Editor

answered on 03 Dec 2010

3 answers

151 views

Telerik.Web.UI.WebResource.axd Head

I'm trying to add in the css but the head is always in low
Telerik.Web.UI.WebResource.axd how do I fix this?
I need my css is upon Telerik.Web.UI.WebResource.axd but
that is what is in the head.

General Discussions

answered on 03 Dec 2010

2 answers

302 views

[Solved] How to prevent closing edit form in editable grid

Hello,
I have editable grid with buttons in form:

<asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Add" : "Update" %>'
CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'

I use my validation and I show validation result outer the grid. How I can prevent closing edit form or insert form. It is possible to repopen edit form when I saved index of last open editform.

Grid

answered on 03 Dec 2010

3 answers

53 views

unexpected button images as background

I've been working with this control, but as you can see in the screen capture something strange happens with the control as it is showing unexpected images and incorrectly positioned, I've tested with both IE and FF and looks the same.

How this can be solved?
I'm using RadControls for ASP.NET AJAX Q3 2010, This is the corresponding code block:


        <telerik:RadEditor ID="RadEditor" runat="server" Height="485px" Width="718px" OnClientLoad="OnClientLoad">
            <Modules>
                <telerik:EditorModule Name="RadEditorStatistics"></telerik:EditorModule>
                <telerik:EditorModule Name="RadEditorDomInspector"></telerik:EditorModule>
                <telerik:EditorModule Name="RadEditorNodeInspector"></telerik:EditorModule>
                <telerik:EditorModule Name="RadEditorHtmlInspector" Visible="False"></telerik:EditorModule>
            </Modules>
            <Tools>
                <telerik:EditorToolGroup Tag="MainToolbar">
                    <telerik:EditorTool Name="Print" ShortCut="CTRL+P" Visible="False"></telerik:EditorTool>
                    <telerik:EditorTool Name="AjaxSpellCheck" />
                    <telerik:EditorTool Name="FindAndReplace" ShortCut="CTRL+F"></telerik:EditorTool>
                    <telerik:EditorTool Name="SelectAll" ShortCut="CTRL+A" />
                    <telerik:EditorTool Name="Cut"></telerik:EditorTool>
                    <telerik:EditorTool Name="Copy" ShortCut="CTRL+C"></telerik:EditorTool>
                    <telerik:EditorTool Name="Paste" ShortCut="CTRL+V"></telerik:EditorTool>
                    <telerik:EditorToolStrip Name="PasteStrip">
                    </telerik:EditorToolStrip>
                    <telerik:EditorSeparator />
                    <telerik:EditorSplitButton Name="Undo" Width="80px">
                    </telerik:EditorSplitButton>
                    <telerik:EditorSplitButton Name="Redo" Width="80px">
                    </telerik:EditorSplitButton>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="AbsolutePosition"></telerik:EditorTool>
                    <telerik:EditorSeparator />
                    <telerik:EditorTool Name="Bold" ShortCut="CTRL+B"></telerik:EditorTool>
                    <telerik:EditorTool Name="Italic" ShortCut="CTRL+I"></telerik:EditorTool>
                    <telerik:EditorTool Name="Underline" ShortCut="CTRL+U" />
                    <telerik:EditorTool Name="StrikeThrough" />
                    <telerik:EditorSeparator />
                    <telerik:EditorTool Name="JustifyLeft" />
                    <telerik:EditorTool Name="JustifyCenter" />
                    <telerik:EditorTool Name="JustifyRight" />
                    <telerik:EditorTool Name="JustifyFull" />
                    <telerik:EditorTool Name="JustifyNone" />
                    <telerik:EditorSeparator />
                    <telerik:EditorTool Name="Indent" />
                    <telerik:EditorTool Name="Outdent" />
                    <telerik:EditorSeparator />
                    <telerik:EditorTool Name="InsertOrderedList" />
                    <telerik:EditorTool Name="InsertUnorderedList" />
                    <telerik:EditorSeparator />
                    <telerik:EditorTool Name="ToggleTableBorder" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup Tag="InsertToolbar">
                    <telerik:EditorTool Name="ImageManager" ShortCut="CTRL+G" />
                    <telerik:EditorTool Name="LinkManager" ShortCut="CTRL+K" />
                    <telerik:EditorTool Name="Unlink" ShortCut="CTRL+SHIFT+K" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Superscript" />
                    <telerik:EditorTool Name="Subscript" />
                    <telerik:EditorTool Name="InsertParagraph" />
                    <telerik:EditorTool Name="InsertHorizontalRule" />
                    <telerik:EditorSeparator />
                    <telerik:EditorTool Name="FormatCodeBlock" />
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup Tag="DropdownToolbar">
                    <telerik:EditorSplitButton Name="InsertSymbol" Width="80px">
                    </telerik:EditorSplitButton>
                    <telerik:EditorToolStrip Name="InsertTable">
                    </telerik:EditorToolStrip>
                    <telerik:EditorTool Name="ImageMapDialog" Visible="False" />
                    <telerik:EditorSeparator />
                    <telerik:EditorTool Name="ConvertToLower" />
                    <telerik:EditorTool Name="ConvertToUpper" />
                    <telerik:EditorSeparator />
                    <telerik:EditorDropDown Name="Zoom" Width="80px">
                    </telerik:EditorDropDown>
                    <telerik:EditorSplitButton Name="ModuleManager" Width="80px">
                    </telerik:EditorSplitButton>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorDropDown Name="FormatBlock" Width="80px">
                    </telerik:EditorDropDown>
                    <telerik:EditorDropDown Name="FontName" Width="80px">
                    </telerik:EditorDropDown>
                    <telerik:EditorDropDown Name="RealFontSize" Width="80px">
                    </telerik:EditorDropDown>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorSplitButton Name="ForeColor" Width="80px">
                    </telerik:EditorSplitButton>
                    <telerik:EditorSplitButton Name="BackColor" Width="80px">
                    </telerik:EditorSplitButton>
                </telerik:EditorToolGroup>
            </Tools>
        </telerik:RadEditor>

Editor

answered on 03 Dec 2010

2 answers

198 views

[Solved] RadChart axis alignment

Hi,

I am using RadChart version 2010.2.929.35 . Here is what I would like to accomplish:
I would like to create a scatter plot with a fixed min and max for the X-axis and Y-axis. In this case i want the min/max to be -3/3. The ChartSeriesType that I am using is Point with the following settings:

PlotArea-XAxis-MaxValue=3
PlotArea-XAxis-MinValue=-3
PlotArea-YAxis-MaxValue=3
PlotArea-YAxis-MinValue=-3
PlotArea-XAxis-AutoScale=false
PlotArea-YAxis-AutoScale=false

When the chart gets rendered on my page, the Y-axis display correctly with the min value at the bottom and the max value at the top. For the X-Axis, there seems to be a padding for the min and max. Please see the attached image for refference.

So the question is:
1) Is there a way to force the X-axis to display the min value at the far left and the max value at the far right with out any padding?
2) Also, how can I get rid of the gap to the right of the chart?

Thanks,
Vuthy

Chart (Obsolete)

answered on 03 Dec 2010

3 answers

153 views

[Solved] how to add a custom content filter

Hi,

I would like to know how to add a custom content filter in the RAD editor for MOSS.
I understodd that I need to add a property in the ConfigFile.xml:

<property name="OnClientLoad">OnClientLoad</property>

Then I need to add a javascript function OnClientLoad and call another function that implements a few standard methods. OK but where should I put this javascript code. Is the MOSSEditorTools.js file suited for this ?

Could you please give me an example of a custom content filter that works with MOSS and RAD Editor full version.

Kind regards,

Jean

WebParts for SharePoint

answered on 03 Dec 2010