Questions on UI for ASP.NET AJAX Forum

1 answer

108 views

hi

I have 2 stored proc and i need to bind the result of 2 Proc into a single Radgrid. How should i go about it? thanks

Grid

answered on 08 Aug 2011

1 answer

106 views

combobox problem

hi i new to telerik. i added the RadComboBox with autocomplete to my website
its working perfect on Firefox but in chrome and internet explorer its not working.

ComboBox

answered on 08 Aug 2011

2 answers

100 views

[Solved] Problem with a Combo of IE/FormDecorator/Splitter

Hi.

As mentioned in the title i have a problem with a combination of the 3 - Internet Explorer (tested with 8 and 9), FormDecorator and Splitter.
Its hard to explain, so i hope you guys will test it. But i give my best...

In my sample Page i have a RadSplitter with 2 panes. RadSplitter is in 100% height mode. So the necessary stlying for Html, Body, Form is applied. As well as all the settings needed for RadSplitter i have found at this page: (Without the Margin/Offset Stuff)
http://www.telerik.com/support/kb/aspnet-ajax/splitter/radsplitter-which-is-100-of-the-page-and-has-margin-applied.aspx

In the Bottom Pane i am loading several DropDownLists with the styling applied from FormDecorator.
You will notice that the DropDownLists have a rather large width for the amount kind of Data they have, thats because i wanted them to be placed under each other. So that a scrollbar appears in the bottom pane, this scrollbar is very important to this problem, so when you are testing this application resize your browser window so that you have a scrollbar.

Now that you have this test page running, and you can see it. Do some scrolling with the scrollbar... Then try to open a dropdownlist, the second you click on the dropdownlist the position jumps to the very bottom of the page. So that you arent able to see the dropdownlist at all, its like the html container suddendly got a padding of the amount you have scroll down the page and you can now see the very bottom of the html container that is blank...

So... I dont really believe you have understood the problem (as long as you havent tested it yourself), so i hope some screenshots will help:
1.) http://s1.directupload.net/file/d/2593/77pu5nm7_jpg.htm

2.) http://s7.directupload.net/file/d/2593/8srp3r5g_jpg.htm

3.) http://s1.directupload.net/file/d/2593/kjtwzdmy_jpg.htm

Hope you understood the problem and can help me fix it. I cannot use RadComboBox because it renders to slow for the amount i have in my application, so i am hoping for a fix that works with this combination Internet Explorer, FormDecorator and DropDownList.

Here is the TestPage:
Aspx File

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

<style type="text/css">

html, body, form

{

height: 100%;

overflow: hidden;

padding: 0%;

margin: 0%;

}

</style>

</head>

<body>

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

<telerik:RadScriptManager ID="ScriptManager" runat="server">

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator45" runat="server" EnableRoundedCorners="false" DecoratedControls="Select" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Hay">

</telerik:RadSkinManager>

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

</telerik:RadAjaxManager>

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"

Orientation="Horizontal">

<telerik:RadPane ID="RadPane1" runat="server">

Head Stuff...

</telerik:RadPane>

<telerik:RadPane ID="RadPane2" runat="server" >

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

C# File

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using Telerik.Web.UI;

public partial class WebForm1 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

DataTable dtTest = new DataTable();

dtTest.Columns.Add("Value");

dtTest.Columns.Add("Text");

for (int i = 0; i < 20; i++)

{

DataRow dr = dtTest.NewRow();

dr["Value"] = i;

dr["Text"] = i;

dtTest.Rows.Add(dr);

}

for (int i = 0; i < 100; i++)

{

//RadComboBox ddlTest = new RadComboBox(); - Works fine..

DropDownList ddlTest = new DropDownList();

ddlTest.ID = Convert.ToString(i);

ddlTest.DataValueField = "Value";

ddlTest.DataTextField = "Text";

ddlTest.Style.Add("width", "500px");

ddlTest.DataSource = dtTest;

ddlTest.DataBind();

RadPane2.Controls.Add(ddlTest);

}

FormDecorator

answered on 08 Aug 2011

3 answers

166 views

ScriptManager eating my javascript?

I have a really simple scenario for a menu using the MooTools framework. Everything works perfect until I add a RadScriptManager to support the use of a RadGrid.

My first line of script fires the menu to run the animation, but even though I have added references to the JS files I'm using, it still refuses to work with the ScriptManager on the page.

Where am I going wrong?

                    <script type="text/javascript">    default_accordion_id = 0;</script>         
                     
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">         
                    <Scripts>         
                        <asp:ScriptReference Path="~/JS/script.js" />         
                        <asp:ScriptReference Path="~/JS/mootools.v1.11.js" />         
                    </Scripts>         
                </telerik:RadScriptManager>         

Thanks.

General Discussions

answered on 08 Aug 2011

3 answers

125 views

[Solved] BR tags being trimmed when switching between modes

Hi there,

I'm having a problem with <br /> tags being trimmed switching between design and html view. I upgraded to the latest version (2011.1.413.35) and it's still happening. Basically if I have html where the <br /> is inline with a <p> tag it will get trimmed off. So If you start off by inputing this into the editor:

<p ><br /><br /><br /><br /><br />

Testing 1

2

3

</p>

Then if you switch to design mode and back you will get this:

<p ><br />

<br />

Testing 1

2

3

</p>

So one of the <br /> tags got trimmed off. If you switch between views again you get this:

<p>

<br />

Testing 1

2

3

</p>

Now it will stop trimming the <br /> when you switch between modes since it's not inline with the <p> tag. But if you manually move those 3 existing <br /> tags up to inline with the <p> tag it will continue to trim. I tried turning off all content filters and it does the same thing.

Thanks for your help.

Brian

Editor

answered on 08 Aug 2011

1 answer

122 views

[Solved] Numeric column too wide

Hi,

I've created some numeric column and tried various ways to make the field smaller....I'm unable to accomplish regardless of the item, header, and footer width change...this happens for all of the numeric field. please help.

<

telerik:GridNumericColumn DecimalDigits="2"

FilterControlAltText="Filter ShutInPressure column"

HeaderText="Shut In Pressure (psig)" UniqueName="ShutInPressure" DataField="Shut_In_Pressure">

</telerik:GridNumericColumn>

(view attached)

Grid

answered on 08 Aug 2011

1 answer

246 views

Loading panel with ascx user controls

I have an .aspx page with two user controls.
User Control A has an asp:ImageButton control that, when clicked, raises an event to the page. The page performs some actions and then makes visible an asp:Panel that contains User Control B. User Control B merely contains some labels, buttons, etc for display purposes.
What I would like is this: when the user clicks the button in User Control A, a loading panel would kick in where User Control B is going to be displayed so that the user knows something is happening.

I have implemented loading panels before, but the pieces involved here with the user controls and event raising seems to make this more challenging.

Is what I am trying to do possible? If so, what am I missing?

Thanks,
Dennis

Ajax

answered on 08 Aug 2011

3 answers

154 views

[Solved] locate RadComboBox in grid

Hi,

I have 3 different RadComboBox within GridTemplate column. I'm trying to build a cascading hierarchy upon the selection of each RadComboBox.

Within the code behind........onSelectedIndexChange of the 1st RadComboBox........I need to find the 2nd RadComboBox so that I can set the displayed value and text.

protected void ComboBox1_OnSelectedIndexChangedHandler(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

Session[

"ID"] = e.Value;

Session[

"Text"] = e.Text;

//Since the Area has been changed, we set the FMT RadComboBox

}

thanks,
Minh Bui

Grid

answered on 08 Aug 2011

4 answers

153 views

SelectedItems is zero

Hello

I'm getting value of a cell in selected row in RadGrid. I have enable Client-Side Row Selection and PostBackOnRowClick.

<telerik:RadGrid ID="RgdOffer" runat="server" CellSpacing="0"

EnableEmbeddedSkins="False" GridLines="None"

onitemcommand="RgdOffer_ItemCommand" onitemdatabound="RgdOffer_ItemDataBound"

Skin="GPF" CssClass="shadow">

<ClientSettings EnableRowHoverStyle="True" AllowColumnsReorder="True"

EnablePostBackOnRowClick="True" ReorderColumnsOnClient="True">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="False" />

</ClientSettings>

And from code-behind, I get the value of the cell with this code snippet in ItemCommand event:

if (e.CommandName == "RowClick" && e.Item is GridDataItem)

{

// String to store OfferNo

string strOfferNo = null;

// Get OfferNo of selected Offer

foreach (GridDataItem item in RgdOffer.SelectedItems)

{

strOfferNo = item["OfferNo"].Text;

}

And it did work.

But when I put my grid in to a RadDock, then SelectedItems always return 0.

I don't know why?

Can you help me explain this problem?

Thank you.

Thanh Dang

Grid

answered on 08 Aug 2011

2 answers

176 views

[Solved] Unable to get value of the property 'paste'

I've encountered another development issue, which I believe is AJAX-related. I've several controls (views) that are loaded into a multipage upon page Load. These controls are navigated via tabs in a tabstrip. Each view is divided into two parts via ASP update panels:

1. A toolbar (Toolbar_AjaxPanel)
2. Content affected by the toolbar, which contain a series of web user controls (Content_AjaxPanel)

One of these web user controls is a catalog that lists programs. A program in the list can be selected, and this raises the OnCatalogItemSelected event, a custom event which is triggered by the OnSelectedIndexChanged event of the RadGrid within the catalog web user control. The OnCatalogItemSelected event runs a few checks and sets some visibility settings before updating the content panel via Content_AjaxPanel.Update().

Everything appears to work as expected until I click a tab and switch to a different "view." When I do, I receive this client-side error:

Error: Unable to get value of the property 'paste': object is null or undefined

The application does not appear to be adversely affected, otherwise, but this error might confuse users. From what I can tell, it's the Update() call in the OnCatalogItemSelected event that causes this to happen. When I remove or comment it out, I no longer receive the message, but I need that Update() call to refresh the content and display the appropriate controls.

Here is the code that handles the OnCatalogItemSelected in the ProgramView.ascx view:

protected void Program_Catalog_OnCatalogItemSelected(object sender, ProgramManagement.Controls.ProgramCatalog.CatalogItemSelectedEventArgs e)

{

HtmlControl catalogContainer = CatalogContainer_Panel;

HtmlControl catalogItemContainer = CatalogItemContainer_Panel;

int selectedId = Program_Catalog.SelectedProgramID;

if (!e.IsFullPlan)

{

Program_ProgramManager.ViewMode = ProgramManagement.Controls.ProgramManager.View.Quick;

Program_OutcomeManager.Visible = true;

Program_OrganizerManager.Visible = true;

Program_AudienceManager.Visible = false;

Program_BudgetManager.Visible = false;

}

else

{

Program_ProgramManager.ViewMode = ProgramManagement.Controls.ProgramManager.View.Full;

Program_OutcomeManager.Visible = true;

Program_OrganizerManager.Visible = true;

Program_AudienceManager.Visible = true;

Program_BudgetManager.Visible = true;

}

Program_ProgramManager.Select(selectedId);

Program_AudienceManager.Select(selectedId);

Program_OutcomeManager.Select(selectedId);

Program_OrganizerManager.Select(selectedId);

Program_BudgetManager.Select(selectedId);

//Indicate that an item has been selected.

ItemSelected = true;

catalogContainer.Style["display"] = "none";

catalogItemContainer.Style["display"] = "block";

//Update the program content ajax panel

Content_AjaxPanel.Update();

}

And if you need it, here is the interface markup:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProgramView.ascx.cs" Inherits="AZ.SA.RL.App.ProgramManagement.ProgramView" %>

<%@ Register Src="~/Controls/ProgramCatalog.ascx" TagName="ProgramCatalog" TagPrefix="pm" %>

<%@ Register Src="~/Controls/ProgramManager.ascx" TagName="ProgramManager" TagPrefix="pm" %>

<%@ Register Src="~/Controls/OrganizerManager.ascx" TagName="OrganizerManager" TagPrefix="pm" %>

<%@ Register Src="~/Controls/AudienceManager.ascx" TagName="AudienceManager" TagPrefix="pm" %>

<%@ Register Src="~/Controls/OutcomeManager.ascx" TagName="OutcomeManager" TagPrefix="pm" %>

<%@ Register Src="~/Controls/BudgetManager.ascx" TagName="BudgetManager" TagPrefix="pm" %>

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

<script language="javascript" type="text/javascript">

var programToolbar;

var programCatalogButton;

var programNewButton;

var programQuickButton;

var programFullButton;

var programSeperator1;

var programQuickButton;

var programFullButton;

var programEvalButton;

var programSeperator2;

var programEditButton;

var programCancelButton;

var programSaveButton;

function Program_OnClientLoad(sender, args) {

programToolbar = sender;

programCatalogButton = programToolbar.findButtonByCommandName("CATALOG");

programNewButton = programToolbar.findItemByText("New Program");

programQuickButton = programToolbar.findItemByValue("Quick");

programFullButton = programToolbar.findItemByValue("Full");

programSeperator1 = programToolbar.findItemByValue("Sep1");

programQuickButton = programToolbar.findButtonByCommandName("QUICK");

programFullButton = programToolbar.findButtonByCommandName("FULL");

programEvalButton = programToolbar.findButtonByCommandName("EVAL");

programSeperator2 = programToolbar.findItemByValue("Sep2");

programEditButton = programToolbar.findButtonByCommandName("EDIT");

programCancelButton = programToolbar.findButtonByCommandName("CANCEL");

programSaveButton = programToolbar.findButtonByCommandName("SAVE");

}

function Program_OnClientButtonClicking(sender, args) {

var programButton = args.get_item();

var programCommand = programButton.get_commandName();

if (programCommand == "CANCEL") {

args.set_cancel(!confirm('Are you sure you want to discard any changes?'));

}

function Program_OnClientButtonClicked(sender, args) {

var programButton = args.get_item();

var programCommand = programButton.get_commandName();

var programCatalogContainer = $('div[name="catalogContainer"]')

var programCatalogItemContainer = $('div[name="catalogItemContainer"]')

switch (programCommand) {

case "CATALOG":

if (programCatalogButton != null) {

programCatalogButton.set_visible(false);

}

if (programNewButton != null) {

programNewButton.set_visible(true);

}

if (programSeperator1 != null) {

programSeperator1.set_visible(false);

}

if (programQuickButton != null) {

programQuickButton.set_visible(false);

}

if (programFullButton != null) {

programFullButton.set_visible(false);

}

if (programEvalButton != null) {

programEvalButton.set_visible(false);

}

if (programSeperator2 != null) {

programSeperator2.set_visible(false);

}

if (programEditButton != null) {

programEditButton.set_visible(false);

}

if (programCancelButton != null) {

programCancelButton.set_visible(false);

}

if (programSaveButton != null) {

programSaveButton.set_visible(false);

}

programCatalogContainer.fadeIn(500);

programCatalogContainer.css("display", "block");

programCatalogItemContainer.css("display", "none");

break;

}

function Program_OnCatalogItemClicked(sender, args) {

var programCatalogContainer = $('div[name="catalogContainer"]');

var programCatalogItemContainer = $('div[name="catalogItemContainer"]');

if (programCatalogButton != null) {

programCatalogButton.set_visible(true);

}

if (programNewButton != null) {

programNewButton.set_visible(false);

}

if (programSeperator1 != null) {

programSeperator1.set_visible(true);

}

if (programQuickButton != null) {

programQuickButton.set_visible(true);

}

if (programFullButton != null) {

programFullButton.set_visible(true);

}

if (programEvalButton != null) {

programEvalButton.set_visible(true);

}

if (programSeperator2 != null) {

programSeperator2.set_visible(true);

}

if (programEditButton != null) {

programEditButton.set_visible(true);

}

if (programCancelButton != null) {

programCancelButton.set_visible(false);

}

if (programSaveButton != null) {

programSaveButton.set_visible(false);

}

programCatalogContainer.slideUp(500);

programCatalogItemContainer.fadeIn(600).delay(800);

programCatalogItemContainer.css("display", "block");

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxManagerProxy ID="Program_AjaxManager" runat="server" />

<asp:UpdatePanel ID="Toolbar_AjaxPanel" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<telerik:RadToolBar ID="Program_Toolbar"

runat="server"

Skin="Black"

OnClientButtonClicking="Program_OnClientButtonClicking"

OnClientButtonClicked="Program_OnClientButtonClicked"

OnButtonClick="Program_ToolBar_ButtonClick"

OnClientLoad="Program_OnClientLoad"

BorderStyle="None"

BorderWidth="0"

Width="100%">

<Items>

<telerik:RadToolBarButton Text="View Catalog" Value="Catalog" CommandName="CATALOG" PostBack="false" />

<telerik:RadToolBarDropDown Text="New Program" DropDownWidth="150px">

<Buttons>

<telerik:RadToolBarButton Text="Quick Plan" CommandName="NEW" Value="Quick" />

<telerik:RadToolBarButton Text="Full Plan" CommandName="NEW" Value="Full" />

</Buttons>

</telerik:RadToolBarDropDown>

<telerik:RadToolBarButton IsSeparator="true" Value="Sep1" />

<telerik:RadToolBarButton Text="Quick Plan" CommandName="QUICK" Checked="true" CheckOnClick="true" Group="PlanType" />

<telerik:RadToolBarButton Text="Full Plan" CommandName="FULL" Checked="false" CheckOnClick="true" Group="PlanType" />

<telerik:RadToolBarButton Text="Evaluation" CommandName="EVAL" Checked="false" CheckOnClick="true" Group="PlanType" Enabled="false" Visible="false" />

<telerik:RadToolBarButton IsSeparator="true" Value="Sep2" />

<telerik:RadToolBarButton Text="Edit" CommandName="EDIT" />

<telerik:RadToolBarButton Text="Cancel" CommandName="CANCEL" />