Questions on UI for ASP.NET AJAX Forum

1 answer

119 views

I have issue with Zindexing (i believe). I am opening a window using RadWindowManager control, i need this window on top of menu layer. What property i need to setting menu or window? Following is the code I am using to open window.

<telerik:RadWindowManager

ClientIDMode="Static"

ID="subWindow"

runat="server"

Width="560"

Height="530"

VisibleStatusbar="false"

Behaviors="Move"

DestroyOnClose="true"

Modal="true"

ShowContentDuringLoad="false"

ShowOnTopWhenMaximized ="true">

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function OpenWin() {

var manager = $find('subWindow');

manager.open('/URL', null);

return false;

}

</script>

</telerik:RadScriptBlock>

Code for generating menu is :

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

.demo-container {

border: 0;

}

.demo-container .RadMenu {

margin: 0 auto;

font-size: 16px;

}

html div.RadMenu_Glow .rmPopup {

}

html div.RadMenu_Glow .rmPopup {

background: none repeat scroll 0 0 rgba(104, 176, 237, .75);

}

html .demo-container .RadMenu_Glow .rmRootGroup {

position: relative;

width: 100%;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmGroup {

/*background-color : rgba(183, 209, 227, .75);*/

color: black;

font-size: 14px;

width: 200px;

padding-top:40px;

padding-bottom:40px;

padding-left:10px;

padding-right:10px;

}

html div.RadMenu_Glow .rmMultiColumn {

border: 0;

background: no-repeat scroll 0 0 rgb(133, 199, 254);

}

html div.RadMenu_Glow .rmItem .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-position:left center;

background-repeat: no-repeat;

padding-left: 190px;

}

html div.RadMenu_Glow .rmItem:nth-of-type(2) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("one.jpg");

}

html div.RadMenu_Glow .rmItem:nth-of-type(3) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("two.jpg");

}

html div.RadMenu_Glow .rmItem:nth-of-type(4) .rmSlide .rmFirstGroupColumn .rmLevel1 {

background-image: url("three.png");

}

html div.RadMenu_Glow .rmPopup {

/*background: none repeat scroll 0 0 rgba(50, 82, 204, .75);*/

}

.demo-container .RadMenu .rmPopup {

width: 300px;

}

html div.RadMenu_Glow .rmItem .rmSlide .rmLevel2 {

/* background-color: rgba(99, 158, 200, .75);*/

}

html .demo-container .RadMenu_Glow .rmHorizontal .rmItem {

position: static;

}

.demo-container .RadSiteMap .rsmColumnWrap {

margin-bottom: 0px;

}

.demo-container .RadSiteMap_Glow .rsmOneLevel .rsmLink,

.demo-container .RadSiteMap_Glow .rsmTwoLevels .rsmLevel1 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmThreeLevels .rsmLevel2 .rsmLink,

.demo-container .RadSiteMap_Glow .rsmManyLevels .rsmLevel3 .rsmLink {

font-size: 11px;

color: white;

}

.demo-container .rmPopup .itemContent {

padding: 10px 0 40px 90px;

background-repeat: no-repeat;

background-position: 10px center;

}

.demo-container .africa {

background-position: 70px center;

}

.demo-container div.RadSiteMap .rsmItem {

color: #FFFFFF;

list-style-type: square;

margin-left: 5px;

}

.demo-container .rsmColumnWrap {

*display: none;

}

</style>

<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>

</head>

<body>

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

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

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" ClientIDMode="Static" runat="server" Skin="Simple"></telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel"></telerik:RadAjaxManager>

<div class="demo-container">

<telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow" ClickToOpen="false" zindex="8000">

<DefaultGroupSettings Height="270px" />

<Items>

<telerik:RadMenuItem Text="Home" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item A " ><Items >

<telerik:RadMenuItem Text="Menu Item A1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item A2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu A3" ></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B " >

<Items >

<telerik:RadMenuItem Text="Menu Item B1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu B3" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B4" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item B5" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu B6" ></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C " >

<Items >

<telerik:RadMenuItem Text="Menu Item C1" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C2" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C3" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C4" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C5" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C6" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C7" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C8" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C9" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C10" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C11" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C12" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C13" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C14" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Menu Item C15" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16" GroupSettings-Offsety ="145" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C16 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16 B"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C17" GroupSettings-Offsety ="175" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C16 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C16 B"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C17 B"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18" GroupSettings-Offsety ="200" GroupSettings-OffsetX="0">

<Items>

<telerik:RadMenuItem Text="Add Menu C18 A" ></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 B"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 c"></telerik:RadMenuItem>

<telerik:RadMenuItem Text="Add Menu C18 D"></telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

<DefaultGroupSettings RepeatColumns="3" RepeatDirection="Vertical" />

</telerik:RadMenu>

</div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

</form>

</body>

</html>

Please see window coming now attached picture:

Window

answered on 16 Mar 2016

2 answers

575 views

[Solved] .js files for grid only

I would like to only use the kendo grid and none of the other kendo controls in my project. What is the minimum number/size of .js files that I need to include for it to work?

I tried just including the kendo.grid.js file, but that wasn't enough and while including the .all.js worked it wasn't clear what the minimum was.

Thanks

Grid

answered on 16 Mar 2016

3 answers

88 views

RadHTMLChart

We are looking at replacing HighCharts and are using Telerik components in other areas.

Due to the volume of data we only give HighCharts a subset of it. For instane if there are 50,000 points we provide an average of 1000.

When zooming is applied we get sever server side call to provide 1000 zoomed in points.

I am trying to implement this in RadHTMLCharts but struggling to an event to hook into Serverside.

All I have found is client side

http://feedback.telerik.com/Project/108/Feedback/Details/118371-add-client-side-events-for-drag-and-zoom-in-radhtmlchart

As the number of charts per page is dynamic I doing this all in Code Behind using a custom DataTable (no mark up)

Chart (HTML5)

answered on 16 Mar 2016

1 answer

248 views

Perform calculation inside textbox

Hi,

I'm wondering if anyone has come up with a way to perform calculations within a single TextBox or NumericTextBox?

For example, if I enter "3+5" as the text and then remove focus from the TextBox, I'd want the text value to update to "8". Similarly for other operations such as division or multiplication.

I've seen this behavior within other web applications ("You Need a Budget" comes to mind) and am wondering if a framework exists rather than building from scratch in javascript.

Thanks,

Jeff

General Discussions

answered on 16 Mar 2016

4 answers

354 views

Cannot paste content into Rad Editor when in design mode

I cannot paste content into the Rad Editor control when it is in design mode. I have tried both the command defined in the ToolsFile attribute and default windows command (CTRL + V). I am able to paste content when it is in HTML view. Here is my code:

<telerik:RadEditor ID="radMessageBody" runat="server" RenderMode="Lightweight" NewLineMode="Br" ToolsFile="~/xml/BasicTools.xml" ContentAreaCssFile="~/css/EditorContentArea.css" />

<root>

<tools name="MainToolbar" dockable="true" enabled="true">

<tool name="FindAndReplace" /><br> <tool separator="true"/><br> <tool name="Undo" /><br> <tool name="Redo" /><br> <tool separator="true"/><br> <tool name="Cut" /><br> <tool name="Copy" /><br> <tool name="Paste" shortcut="CTRL+!" /><br> </tools><br> <tools name="Formatting" enabled="true" dockable="true"><br> <tool name="Bold" /><br> <tool name="Italic" /><br> <tool name="Underline" /><br> <tool separator="true"/><br> <tool name="ForeColor" /><br> <tool name="BackColor"/><br> <tool separator="true"/><br> <tool name="FontName"/><br> <tool name="RealFontSize"/><br> </tools><br></root>

It does not work in either Chrome and IE.

Any ideas how to resolve this?

Editor

answered on 16 Mar 2016

8 answers

358 views

Columns missing after PostBack

Hello,
I have a dropdown, 2 link buttons(Lets say A and B) and a radgrid on my mark up page. The dropdown will select my DataSource for the grid. LinkButton A will get the data source and and adds the columns to the grid programmatically and binds them all. The other(LinkButton B) will get the datafrom the grid and do something different(not related to the page), anyway it will create a postback. The columns will be different depending on the selected value of the dropdown as is the data source. I am able to bind the data and columns on the grid programmatically. But when I click on LinkButton B, The columns go missing but the data is still there. As the header texts are missing. (Check the images attached). Here is my code:

ASP Page

<asp:DropDownList ID="ddlDataSource" runat="server"></asp:DropDownList>

<asp:LinkButton ID="lnkBtnA" runat="server" Text="Button A" OnClick="LnkBtnA_OnClick"></asp:LinkButton>

<asp:LinkButton ID="lnkBtnB" runat="server" Text="Button B" OnClick="LnkBtnB_OnClick"></asp:LinkButton>

<telerik:RadGrid ID="radGrid1" runat="server">

<ExportSettings OpenInNewWindow="true" ExportOnlyData="true" IgnorePaging="true">

</ExportSettings>

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="200px" />

</ClientSettings>

<MasterTableView Width="100%" HorizontalAlign="NotSet" AutoGenerateColumns="False" NoMasterRecordsText="No Items available">

<Columns>

</Columns>

</MasterTableView>

</telerik:RadGrid>

C# Code :

protected void LnkBtnA_OnClick(object sender, EventArgs e)

{

try

{

this.radGrid1.Visible = true;

this.radGrid1.MasterTableView.Columns.Clear();

switch (this.ddlDataSource.SelectedValue)

{

case "DataSource1":

this.AddColumnsToGrid();

this.radGrid1.DataSource = MyDataSource1;

this.radGrid1.DataBind();

break;

case "DataSource2":

this.AddColumnsToGrid();

this.radGrid1.DataSource = MyDataSource2;

this.radGrid1.DataBind();

break;

default:

break;

}

catch (Exception ex)

{

throw;

}

private void AddColumnsToGrid()

{

this.radGrid1.MasterTableView.Columns.Clear();

switch (this.ddlDataSource.SelectedValue)

{

case "DataSource1":

GridBoundColumn subjectColumnR1 = new GridBoundColumn();

subjectColumnR1.DataField = "Subject";

subjectColumnR1.HeaderText = "Subject";

this.radGrid1.MasterTableView.Columns.Add(subjectColumnR1);

GridBoundColumn dueDateColumnR1 = new GridBoundColumn();

dueDateColumnR1.DataField = "DueDateTime";

dueDateColumnR1.HeaderText = "DueDateTime";

this.radGrid1.MasterTableView.Columns.Add(dueDateColumnR1);

GridBoundColumn ownerColumnR1 = new GridBoundColumn();

ownerColumnR1.DataField = "Owner";

ownerColumnR1.HeaderText = "Owner";

this.radGrid1.MasterTableView.Columns.Add(ownerColumnR1);

break;

case "DataSource2":

GridBoundColumn subjectColumnR2 = new GridBoundColumn();

subjectColumnR2.DataField = "Subject";

subjectColumnR2.HeaderText = "Subject";

this.radGrid1.MasterTableView.Columns.Add(subjectColumnR2);

GridBoundColumn dueDateColumnR2 = new GridBoundColumn();

dueDateColumnR2.DataField = "DueDateTime";

dueDateColumnR2.HeaderText = "DueDateTime";

this.radGrid1.MasterTableView.Columns.Add(dueDateColumnR2);

GridBoundColumn ownerColumnR2 = new GridBoundColumn();

ownerColumnR2.DataField = "Manager";

ownerColumnR2.HeaderText = "Manager";

this.radGrid1.MasterTableView.Columns.Add(ownerColumnR2);

break;

default:

break;

}

protected void LnkBtnB_OnClick(object sender, EventArgs e)

{

try

{

this.AddColumnsToGrid(); // <-- Even though I do this. The columns go missing.

// Does something not related to the question

}

catch (Exception ex)

{

throw;

}

I saw this post as well. The RadGrid is created on Page_Init and then added. But I want to keep the mark up and only bind the data and columns through server side. I tried using Rebind() and DataBind() function on 'LnkBtnB_OnClick', Then all the data disappears. I do not want to Bind the data on every post back.

If theres a way to make the columns not to disappear then its great. I am also okay if theres a fix to bind only the columns as well. But not to bind all the data.

Thank you

Grid

answered on 16 Mar 2016

3 answers

332 views

Adding Subitems / Flyout menus to RadDropDownList

I've looked through the help and just can't seem to figure out how to do this. In my dropdownlist, I want to create sub menu items for a couple of the items in the list.

Currently the dropdownlist items are being added in the code behind. Like this:

ddlSystem.Items.Add(new DropDownListItem(LogFile.CHCS, LogFile.CHCS));

ddlSystem.Items.Add(new DropDownListItem(LogFile.DCIPS, LogFile.DCIPS));

ddlSystem.Items.Add(new DropDownListItem(LogFile.EPEB, LogFile.EPEB));

So what I'm trying to do is change CHCS so that there are sub items under it that will fly out when you hover over it.

Thanks for any thoughts.

Rodney

DropDownList

answered on 16 Mar 2016

3 answers

317 views

Missing Production Worthy Features

I've been using some of your competitors' diagramming products over the years and was pretty excited to see this addition to the Telerik toolset.

That said, there are several features that prohibit my move to the Telerik diagram control. Is there a feature roadmap to help me see if/when these might appear?

Note: its possible these are implemented somehow and I just missed how to do it - if so, please advise!

#1: Click and double click events on a shape.
#2: Events associated with creating connections between shapes (I need an event that fires when the "drag" operation starts and one that fires when the user finishes by selecting the target shape).
#3: Fix the bug that prohibits the EndCap feature from working.
#4: Allow shapes to be dragged and dropped between 2 diagram controls (and fire the associated drag-drop events on the target diagram container).
#5: Click/double click event on connections.
#6: Shapes currently support text inside the shape - how about text as a label above (or below) the shape. I want to have shapes in the form of small circles that have a text label above showing the user what the shape represents.

Whew - these are the top ones I can think of right off. I'm sure there are more - but if your new control could support the above, I get to drop the other vendor solutions and go 100% Telerik.

Thanks!
Dave

Diagram

answered on 16 Mar 2016

3 answers

276 views

[Solved] Fire AJAX Server event on TextChanged.

Hi,

i'm trying to do the following.....

I want to validate a username is unique from a RadTextBox and handle TextChanged which calls the database. What I subsequently need to do is get the client to display a radalert or a radwindow to display saying the name is already in use.

I have a RadAjaxManager, and enabled the textbox within it.

In textchanged handler I try to inject a radalert

RadAjaxManager1.ResponseScripts.Add("radalert('UserName is already in use!')");

but it never displays.

Is this something that is possible, or not?

Regards
Paul.

Input

answered on 16 Mar 2016

27 answers

1.3K+ views

Skin problem after updating

I just update my project from radControls for ASP.NET Ajax Q2 2012 to Q3 2012 and now I am getting the following error:

Telerik.Web.UI.RadFormDecorator with ID='RadFormDecorator1' was unable to find an embedded skin with the name 'WebBlue'. Please, make sure that the skin name is spelled correctly and that you have added a reference to the Telerik.Web.UI.Skins.dll assembly in your project. If you want to use a custom skin, set EnableEmbeddedSkins=false.

I checked and I DO have a reference to Telerik.Web.UI.Skins.dll in my project! I even tried deleting and re-adding the reference with no luck. I checked the version of the Telerik.Web.UI.Skins.dll Telerik.Web.UI.Skins.dll file in my /Bin folder and it is the correct version. I've restarted Visual Studio repeatedly and it doesn't help!

General Discussions

answered on 16 Mar 2016