Questions on UI for ASP.NET AJAX Forum

1 answer

107 views

Menu / Mega Drop-Down example

Hi,

I'm trying to create a menu item like the one in the mega dropdown example.

Mega Drop Down

I've added my own html code to one of my RadMenuItem elements which is working fine.

My only problem now is how i can remove the skined background (I'm using the WebBlue skin) and

replace it with a plane white background. The realy importent css classes used in the example

(like "Products") unfortunately are not part of the source code.

Best regards

Martin Horst

Menu

answered on 01 Feb 2012

0 answers

71 views

Pass Row from one grid to another grid on the same page

Hi

We have a page that we are updating the RadGrid control from telerik RadGrid classic to telerik RadGrid ASP.Net Ajax control kit.

This page has 2 grids registered to it.

The first grid binds the data on the server and returns a set of results. We then select items on this grid and pass the selected items to the second grid on the page to highlight to the user what items there are selecting against one of our containers.

Previously our code done the following (Updated with the latest Telerik client side api reference calls)

function AddToList(index)
	{
		var grid = $find('<%=grd.ClientID%>');    
		var Tick = grid.MasterTableView.get_dataItems()[index].get_element().getElementsByTagName('IMG')[0];
		var PlusMinus = grid.MasterTableView.get_dataItems()[index].get_element().getElementsByTagName('IMG')[1];
		var hid = grid.MasterTableView.get_dataItems()[index].get_element().getElementsByTagName('INPUT')[10];
		
		if (!IsRevoked(PlusMinus) && !IsStatic(PlusMinus))
		{
			hid.value = "true";
			grid.MasterTableView.get_dataItems()[index].get_element().style.backgroundColor = "#E2EFE1";
			Tick.style.display = "block";
			PlusMinus.src = "../icons/tree/GreyMinus.gif";
			
			ShowRow(index);
		}
	}

Our problem lies in the ShowRow(index) call at the end of the method:

function ShowRow(index) 
{
	var ChkBox = GetPickerGrid().MasterTableView.get_dataItems()[index].get_element().getElementsByTagName('INPUT')[1];
    ChkBox.checked = true;
 
    GetPickerGrid().MasterTableView.ShowRow(index);
}

ShowRow is not an object.

Could you please point me in the right direction as to what ShowRow has now been replaced with or an alternative solution to what I am trying to achieve?

Regards,
Jonathan

Grid

asked on 01 Feb 2012

3 answers

1.0K+ views

how to align text of textbox label at top.

hi friends, sorry to ask this silly question. but iam new to telrik.
i placed a textbox control in my screen, which haves width:450px and height:100px.
the label for that textbox is placed in the middle for textbox, i need that text to place in the top against that textbox.

how to apply the text on top for the textbox. what css class should used to bring the text on the top.
thanks in advances
S.Rajkumar.

General Discussions

answered on 01 Feb 2012

5 answers

195 views

StyleSheetManager does not update head section after ajax postback

Good day,

I have a question regarding the usage of the StyleSheetManager in combination with Ajax Postbacks.

In some application scenarios we'd like to add stylesheets to the StyleSheets collection of the StyleSheetManager depending on the usercontrol we are loading after a javascript postback.

For instance:
- A button in an UpdatePanel is clicked
- An AJAX Postback occurs
- New Usercontrol is added to the controls collection of the Page
- Page_Init event of the new control is fired:

protected void Page_Init(object sender, EventArgs e)

{

RadStyleSheetManager.GetCurrent(Page).StyleSheets.Add(new StyleSheetReference("KaosCore.Style.Widgets.FeedWall.css", "KaosCore"));

RadScriptManager.GetCurrent(Page).Scripts.Add(new ScriptReference("KaosCore.Javascript.Widgets.FeedWall.js"));

- The scriptmanager loads its newly added script after the AJAX postback.
- The StyleSheetManager doen't seem to load the newly added stylesheet.

It looks like the RadStyleSheetManager loads only the Stylesheets added to the collection when the page is fully loaded ( !IsPostBack ).

Is there any way we can let the stylesheetmanager update the stylesheets in the head section with the current StyleSheets collection after an ajax postback?

Thanks in advance.

Regards,
P. van de Kamp
Application Developer

ScriptManager and StyleSheetManager

answered on 01 Feb 2012

2 answers

205 views

Problem with Inline Styling

I have defined a RadUpload control:

<telerik:RadUpload MaxFileSize="512000" OverwriteExistingFiles="true" ControlObjectsVisibility="None"
          runat="server" ID="RadUpload1" OnValidatingFile="uploadMedia_ValidatingFile"
          OnClientFileSelected="uploadMedia_FileSelected" Width="500px" />

But this is rendered as:

<span class="ruFileWrap ruStyled" style="width: 80px;" jQuery171041561896132524767="11">
    <input class="ruFileInput" id="ctl00_MainContent_Edit1_RadUpload1file0" submitName="ctl00_MainContent_Edit1_RadUpload1file0" type="file" size="23" unselectable="on" _events="[object Object]"/>
    <label style="display: none;" for="ctl00_MainContent_Edit1_RadUpload1file0">
    <input class="ruFakeInput" id="ctl00_MainContent_Edit1_RadUpload1TextBox0" type="text" size="22"/>
    <label style="display: none;" for="ctl00_MainContent_Edit1_RadUpload1TextBox0">
    <input class="ruButton ruBrowse" type="button" value="Select"/>

You may notice the style="width: 80px;" property. That's the bit that's causing problems, it's 'cutting off' the right half of the control. I've traced the style using IE's developer tool but all it's telling me is that it's 'Inline.' Where is this styling defined? Is it possible to override the 80px?

Thanks a lot.

EDIT: Please note that this happens regardless of whether I'm setting the EnableFileInputSkinning and InputSize properties, these where just set in an attempt to solve the problem, and it didn't work.

It's also worth mentioning that this has happened since our recent upgrade to Q3 2011 SP1.

General Discussions

answered on 01 Feb 2012

17 answers

337 views

How to collapse groups of items in RadGrid with editable checkboxes

Hi,

In my current project, I have a RadGrid with multilevel grouping which contains editable checkboxes.

However, it is not possible to collapse the group of items in the RadGrid.

The code is given below and the webpage is available on http://www.gouw.ws/EditGrouping.aspx

Can you please tell me how to make the RadGrid collapsible?

ASPX:
=====

<telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="false" AllowMultiRowEdit="true"

OnNeedDataSource="RadGrid1_NeedDataSource" OnPreRender="RadGrid1_PreRender" runat="server">

<ClientSettings EnableAlternatingItems="false">

<Scrolling UseStaticHeaders="true" />

</ClientSettings>

<MasterTableView EditMode="InPlace" TableLayout="Fixed">

<GroupByExpressions>

<telerik:GridGroupByExpression>

<GroupByFields>

<telerik:GridGroupByField FieldName="Category" SortOrder="Ascending" />

</GroupByFields>

<SelectFields>

<telerik:GridGroupByField FieldName="Category" HeaderText="Category" />

</SelectFields>

</telerik:GridGroupByExpression>

<telerik:GridGroupByExpression>

<GroupByFields>

<telerik:GridGroupByField FieldName="Type" SortOrder="Ascending" />

</GroupByFields>

<SelectFields>

<telerik:GridGroupByField FieldName="Type" HeaderText="Type" />

</SelectFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<Columns>

<telerik:GridBoundColumn DataField="Name" DataType="System.String" HeaderText="Name" HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" ReadOnly="true" UniqueName="Name" />

<telerik:GridCheckBoxColumn DataField="Email" DataType="System.Boolean" HeaderText="Email" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ReadOnly="false" UniqueName="Email" />

<telerik:GridCheckBoxColumn DataField="SMS" DataType="System.Boolean" HeaderText="SMS" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ReadOnly="false" UniqueName="SMS" />

<telerik:GridCheckBoxColumn DataField="NotifyByEmail" DataType="System.Boolean" HeaderText="Notify By Email" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" ReadOnly="false" UniqueName="NotifyByEmail" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

ASPX.CS:
========

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

{

private List<Data> _data = null;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

_data = Data.Load();

Session["DATA"] = _data;

}

else

{

_data = (List<Data>)Session["DATA"];

}

protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)

{

this.RadGrid1.DataSource = _data; ;

}

protected void RadGrid1_PreRender(object sender, EventArgs e)

{

foreach (GridDataItem item in this.RadGrid1.Items)

{

item.Edit = true;

}

this.RadGrid1.Rebind();

}

Regards,
Herman

Grid

answered on 01 Feb 2012

2 answers

151 views

format date doesn't work

hi,

I have a grid that gets it's data from oracle table, using stored procedures.

protected function fixdate(byref dt as datatable) as datatable

for each myrow in dt.rows

try

myrow("send_date") = cdate(myow("send_date")).tostring("dd/MM/yyyy")

catch ex as exception

...

end try

next

return dt

when I debug - everything works fine, but when I open the grid in my server application (at run time) - the date change format to "mm/dd/yyyy"

that's the grid code:

<telerik:RadGrid Skin="innovation" EnableEmbeddedSkins="false" ID="RadGrid1"

dir="rtl" HeaderStyle-ForeColor="White" AllowFilteringByColumn="True"

AllowSorting="True" AllowPaging="True" BorderColor="#74ABAE" BackColor="White"

BorderWidth="2px" runat="server" HeaderStyle-Font-Size="Small" ItemStyle-Font-Size="Small"

AlternatingItemStyle-Font-Size="Small" ItemStyle-BackColor="White" ItemStyle-ForeColor="Black"

PageSize="7" AutoGenerateColumns="False" PagerStyle-Font-Size="Small"

AlternatingItemStyle-ForeColor="Black"

Culture="Hebrew" GridLines="Vertical" Width="666px"

style="margin-right: 30px">

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Black">

</HeaderContextMenu>

<ItemStyle BackColor="White" Font-Size="Small" ForeColor="Black" />

<PagerStyle mode="NumericPages" ShowPagerText="false"></PagerStyle>

<MasterTableView>

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

<Columns>

<telerik:GridBoundColumn CurrentFilterFunction="Contains"

DataField="IDEA_CODE" UniqueName="IDEA_CODE" HeaderText="ideanum"

AutoPostBackOnFilter="true" DataType="System.Int32">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LINK" DataField="LINK" HeaderText=""

DataType="System.String" Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ROWNUM" HeaderText="#" Visible="false"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.Int32">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SENDER_ID" HeaderText="id"

UniqueName="SENDER_ID" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FULLNAME" HeaderText="namef"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SUBJECT" HeaderText="sub"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="DESCRIPTION" HeaderText="status"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SEND_DATE" HeaderText="sdate"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.DateTime" DataFormatString="{0:dd/MM/yy}">

</telerik:GridBoundColumn>

<telerik:GridImageColumn HeaderText="comments" UniqueName="FBIMG">

</telerik:GridImageColumn>

</Columns>

........

can you tell me what causing that problem?

kind regards, Dana

Grid

answered on 01 Feb 2012

2 answers

102 views

Sys.InvalidOperationException after F5 refresh

Hi
I've found a problem while using RadAjaxManager, a RadButton registered in its ajax setting to update an always visible asp.net panel containing an asp.net placeholder aimed to dinamically load an.ascx control (pnlItemDetails):

This is in a Content page:

<telerik:AjaxSetting AjaxControlID="BtnSelectItem">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlProjectDetails" />

<telerik:AjaxUpdatedControl ControlID="PnlLocalMenu" />

<telerik:AjaxUpdatedControl ControlID="pnlItemDetails" />

<telerik:AjaxUpdatedControl ControlID="navBarFader" />

</UpdatedControls>

</telerik:AjaxSetting>

the panel with the place holder

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

<asp:Panel ID="pnlItemDetails" CssClass="ProjectDetails" runat="server">

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

</asp:Panel>

All things works as expected until a browser refresh is invoked (by F5 or the 'File Download warning' bar of Internet Explorer).
After the page refresh, if the button is clicked, all server events are executed but at the client side, after the rendering phase, the following javascript error is triggered:

Sys.InvalidOperationException: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'ctl00_ctl00_MainContent_pnlItemDetailsPanel'. If it is being updated dynamically then it must be inside another UpdatePanel.

Now, I know that this problem is often related to the update of conditionally visible controls, but I have a container asp.net Panel that is always visible and this behaviour is only present after F5 refresh triggering.

It'seems that the F5 refresh fail somehow to get the full DOM and update panels to refresh

Please, I need some help in finding the source of this issue.

Thank You in advance,
Federico

General Discussions

answered on 01 Feb 2012

1 answer

81 views

RadComboBox SelectedIndexChanged only fires when running in Asp.net Development Server

Hi,

We're having issues with a ComboBox that won't fire its SelectedIndexChanged event.

So I started doing some tests by first creating a new dummy page with nothing on it and confirming that the ComboBox does in fact fire it's SelectedIndexChanged event, which it does. This is a page with a RadComboBox, RadGrid, both of which make use of ObjectDataSources to populate their data. The RadGrid relies on a selection in the RadComboBox to populate.

My project page on the other makes use of nested master pages, with a script manager located in the Base.master.
The page itself has a number of controls including the RadComboBox and RadGrid.

Here are the results, which are disturbing to say the least:
1. Running my test page directly using IIS 7 works fine
2. Running my test page in the Asp.net Development Server (in VS2010) works fine.
3. Running my project page in the Asp.net Development server works fine.
4. Running my project page in IIS7 fails. No event firing for SelectedIndexChanged event.

How on earth is this even remotely possible?

Regards,
Jacques

ComboBox

answered on 01 Feb 2012

2 answers

196 views

Add Dynamic control

Hi everyone,
I want to add any control dynamically in panel or layout.Can any one told me in which panel or layout i can add control dynamically.
I tried to add checkbox in panel(RadXmlHttpPanel also).

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)

{

lblContent.Text = "u clicked " + e.Item.Text;

}

protected void RadToolBar1_ButtonClick(object sender, Telerik.Web.UI.RadToolBarEventArgs e)

{

lblContent.Text = "u clicked " + e.Item.Text;

}

protected void RadTabStrip1_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)

{

lblContent.Text = "u clicked " + e.Tab.Text;

}

protected void RadButton_addControl_Click(object sender, EventArgs e)

{

int i;

for (i = 0; i < 4; i++)

{

CheckBox ch = new CheckBox();

ch.ID = "ch" + i.ToString();

this.form1.Controls.Add(ch);

}

in xml

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!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" media="screen">

#content

{

height: 165px;

width: 500px;

margin-left: 75px;

vertical-align: top;

}

#tabs

{

margin-left: 75px;

width: 500px;

vertical-align: bottom;

}

</style>

</head>

<body style="height: 437px">

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

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

<div>

<telerik:RadMenu ID="RadMenu1" Runat="server" style="top: 0px; left: 0px"

onitemclick="RadMenu1_ItemClick">

<Items>

<telerik:RadMenuItem runat="server" Text="Edit">

<Items>

<telerik:RadMenuItem runat="server" Text="copy">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="cut">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="paste">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="print">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

<br />

<div>

<telerik:RadToolBar ID="RadToolBar1" Runat="server"

onbuttonclick="RadToolBar1_ButtonClick" Orientation="Vertical" Width="70px">

<Items>

<telerik:RadToolBarDropDown runat="server" Text="edit">

<Buttons>

<telerik:RadToolBarButton runat="server" Text="copy">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" Text="cut">

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" Text="paste">

</telerik:RadToolBarButton>

</Buttons>

</telerik:RadToolBarDropDown>

<telerik:RadToolBarSplitButton runat="server" Text="print">

</telerik:RadToolBarSplitButton>

</Items>

</telerik:RadToolBar>

</div>

<br />

<div id="content" runat="server">

<asp:Label ID="lblContent" runat="server" Text="Label"></asp:Label>

<div id="tabs" runat="server">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Orientation="HorizontalBottom"

Skin="WebBlue" OnTabClick="RadTabStrip1_TabClick" SelectedIndex="0" Width="500px">

</telerik:RadTabStrip>

</div>

    <telerik:RadButton ID="RadButton_addControl" runat="server"
            onclick="RadButton_addControl_Click" Text="AddControl">
          </telerik:RadButton>

</form>

</body>

</html>

This is working for first time but when i am trying do any other operation the check box is removed from the panel.
How i will add the control ?
Can any one give a simple example ?

thanks
bibhu

General Discussions

answered on 01 Feb 2012