Questions on UI for ASP.NET AJAX Forum

110,748 questions

3 answers

202 views

Telerik.Web.UI Rad Grid Issues for column Freeze, Merge header

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="uclFleet.ascx.cs" Inherits="UserControls_uclFleet" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

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

<script type="text/javascript">

function fnGridCreated(sender, args) {

var scrollArea = sender.GridDataDiv;

var dataHeight = sender.get_masterTableView().get_element().clientHeight;

if (dataHeight < 350) {

scrollArea.style.height = dataHeight + 10 + "px";

}

</script>

<telerik:RadGrid ID="tlrkDgrFleet" runat="server" EnableViewState="true" CellPadding="0"

CellSpacing="0" GridLines="Both" Width="750px"

Skin="Office2007" HeaderStyle-Font-Size="8pt"

HeaderStyle-Font-Bold="true" AllowPaging="true" ShowHeader="true" OnNeedDataSource="tlrkDgrFleet_NeedDataSource" OnItemDataBound="tlrkDgrFleet_OnItemDataBound">

<MasterTableView CellPadding="0" CellSpacing="0" Width="99%" TableLayout="Fixed" ShowHeader="true" AutoGenerateColumns="false"

AllowPaging="true" ShowFooter="false">

<Columns>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="SerialNo" ItemStyle-HorizontalAlign="Right">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Serial

<br />

No.

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblSerialNo" runat="server"><%# Eval("A") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="100px"

UniqueName="ColHeader" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="width:100%" colspan="2">

Column header

<br /><hr />

</td>

</tr>

<tr>

<td>

Sub Col A

</td>

<td>

Sub Col B

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<table border="0" cellpadding="0" cellspacing="0" >

<tr>

<td>

<asp:Label ID="lblA" runat="server" ><%# Eval("B") %></asp:Label>

</td>

<td>

<asp:Label ID="lblE" runat="server"><%# Eval("C") %></asp:Label>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="100px"

UniqueName="Delivery" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 1" colspan="2">

Delivery<br /><hr />

</td>

</tr>

<tr>

<td>

Owner

</td>

<td>

Operator

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblOwn" runat="server"><%# Eval("D") %></asp:Label>

</ItemTemplate>

<ItemTemplate>

<asp:Label ID="lblOper" runat="server"><%# Eval("E") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="150px"

UniqueName="Current" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" >

<tr>

<td style="border:0" colspan="3">

Current<br /><hr />

</td>

</tr>

<tr>

<td>

Own

</td>

<td>

LEAST

</td>

<td>

SLE123

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<table border="0" cellpadding="0" cellspacing="0" >

<tr>

<td>

<asp:Label ID="lblCurrOwn" runat="server"><%# Eval("F") %></asp:Label>

</td>

<td>

<asp:Label ID="lblCurrLE" runat="server"><%# Eval("G")%></asp:Label>

</td>

<td>

<asp:Label ID="lblCurrSLE" runat="server"><%# Eval("H") %></asp:Label>

</td>

</tr>

</table>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="Future" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Future

<br />

Owner

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblr" runat="server"><%# Eval("I") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="Bus" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Bus

<br />

Contract

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblBusCon" runat="server"><%# Eval("J") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="Number" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

House

<br />

Number

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblNo" runat="server"><%# Eval("K") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="CurrentSet" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Current

<br />

Set.

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblCurrentSet" runat="server"><%# Eval("L") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="LaneNo" ItemStyle-HorizontalAlign="left">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Lane

<br />

No.

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblLaneNo" runat="server"><%# Eval("M") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="50px"

UniqueName="PurDate" ItemStyle-HorizontalAlign="center">

<HeaderTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<td style="border: 0" rowspan="2">

Purchase

<br />

Date

</td>

</tr>

</table>

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="lblDeliveryDate" runat="server"><%# Eval("N") %></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" FrozenColumnsCount= "3" UseStaticHeaders="true" SaveScrollPosition="true" />

<ClientEvents OnGridCreated="fnGridCreated" />

</ClientSettings>

</telerik:RadGrid>

//User Control uclFleet.ascx.cs file

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using Telerik.Web.UI;

using System.Text;

public partial class UserControls_uclFleet : System.Web.UI.UserControl

{

protected void tlrkDgrFleet_NeedDataSource(object source,

Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

dt.Columns.Add("A");

dt.Columns.Add("B");

dt.Columns.Add("C");

dt.Columns.Add("D");

dt.Columns.Add("E");

dt.Columns.Add("F");

dt.Columns.Add("G");

dt.Columns.Add("H");

dt.Columns.Add("I");

dt.Columns.Add("J");

dt.Columns.Add("K");

dt.Columns.Add("L");

dt.Columns.Add("M");

dt.Columns.Add("N");

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

{

DataRow dr;

dr = dt.NewRow();

dr["A"] = "1234";

dr["B"] = "ABCD - hjkl";

dr["C"] = "123-90";

dr["D"] = "13434";

dr["E"] = "1545";

dr["F"] = "1656";

dr["G"] = "1453";

dr["H"] = "15435";

dr["I"] = "5341";

dr["J"] = "1345";

dr["K"] = "135";

dr["L"] = "135";

dr["M"] = "1345";

dr["N"] = "11/07/2010";

dt.Rows.Add(dr);

DataRow dr1;

dr1 = dt.NewRow();

dr1["A"] = "1234";

dr1["B"] = "AWER - POUT";

dr1["C"] = "123-90";

dr1["D"] = "13434";

dr1["E"] = "1545";

dr1["F"] = "1656";

dr1["G"] = "ASD";

dr1["H"] = "15435";

dr1["I"] = "DSFSF";

dr1["J"] = "1345";

dr1["K"] = "135";

dr1["L"] = "EWEWR";

dr1["M"] = "1345";

dr1["N"] = "11/07/2010";

dt.Rows.Add(dr1);

}

tlrkDgrFleet.DataSource = dt;

}

protected void tlrkDgrFleet_OnItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

}

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

<%@ Register Src="~/UserControls/uclFleet.ascx" TagName="uclFleet" TagPrefix="uc2" %>

<%@ 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>

</head>

<body>

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

<table style="table-layout:fixed" width="100%"><tr><td>

<uc2:uclFleet ID="uclFleet" runat="server" /> </td></tr>

</table>

</form>

</body>

</html>

Hi,

1) I want a header in which there will be one main heading and under it there can be sub headings, the main header will span across its multiple sub headings, user can sort the grid by clicking on the sub headings. Please refer to the "UI.jpg"

2) The requirement is like i will be needing the Radgrid as usercontrol, which we will bind on Page. when we run the page, the screen looks fine except for the Merged Columns where in we need the headings and the Subheadeing, refer "Screenshot1.JPG"

The second issue which we I am facing is, The rad grd will have horizontal scroll and first 3 columns would be frozed.
But when we try to freeze the columns we face the following issues:

a) When we scroll, the complete alignment of the grid gets messed up, and one Grid line remains there and shows up in the middle of all scrolling columns. Refer "Screenshot2.JPG" .

b) After we scroll, the horizontal scroll itself disappears. Refer "Screenshot3.JPG" .

c) If we change the page size in pagination, the pagination also disappears. Refer "Screenshot4.JPG" .

Please refer to the code as well, We have created a user control "uclFleet.ascx" which we register in our page "Test_Fleet.aspx".

Thanks.

General Discussions

answered on 25 May 2011

1 answer

44 views

Radgrid with with ItemCommand not showing

Hi, i'm trying to use the ItemCommand to insert records in a Radgrid but when I press Add Record the grid disapears.

Is there a property that i I'm missing to set it correctly?

Grid

answered on 25 May 2011

2 answers

241 views

Partial match in combo: how to get that entry

I am using a combo to perform a "contains" search on titles of publications.

There are cases where I do not want to have the user select a single publication.

I would like to just accept what they type in for a partial match, and then have a button that sets a SQL select to match all titles in the current combo entry.

I tested by entering three characters, but on the code-behind I don't know how to retrieve what was entered, as there is nothing "selected".

How do I grab that entry, preferably without any complicated client-side coding.
..............
The combo is bound to a SQL datasource and has automatic load on demand enabled.

Per the online help pages, I think "the control cannot be validated by value out of the box..." is relevant, but I cannot quite understand the client logic, as it pertains to getting beyond "out of the box..." on the server.

RadComboBox can be easily validated against the Text of its items. This is by design.

The control cannot be validated by value out of the box. The combobox is a composite control, its input area being essentially a <

input

type"text" ...> DOM element. The .value property of this DOM element corresponds to the actual text being written inside the textbox. This is

ComboBox

answered on 25 May 2011

1 answer

190 views

How to hide the Expand/Collpse button in Panelbar

Hi,
i have build the menu using panel item. i have to hide the Expand/Collpse button of panel item,
please find the attachment for image.

Thanks,
Nagarajan

PanelBar

answered on 25 May 2011

6 answers

124 views

MinHeight Question

Hi all,

We have just started using the Telerik controls and I have a quick question on how to set the minHeight on the RadMultiPage control. I have it linked to my tab strip and as the user navigates from tab to tab, it load a new page (using the ContentUrl) into the corresponding RadPageView. I would like to set the minHeight of the RadMultiPage control to a given value, but I can't seem to figure out how to do this. Does anyone have any ideas how this could be accomplished?

Thanks,
J. E.

TabStrip

answered on 25 May 2011

1 answer

131 views

Uploading Duplicated?

Hi,

I have the async upload working in grids, with saving to disk, sql or Azure. Everything works great.

When I upload to Azure though, it seems the progress bar is for the progress of the temp file going to server, then it takes the same amount of time with the blinking yellow light, to complete the upload to Azure.

Is this normal? Or can I bypass the temp file going to the web server and go straight to Azure ?

Thanks
Eric

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1"

OnClientFilesUploaded="filesUploaded" HttpHandlerUrl="~/AzureHandler.ashx"

MultipleFileSelection="Automatic" Width="300px">

</telerik:RadAsyncUpload>

public class AzureHandler : AsyncUploadHandler, System.Web.SessionState.IRequiresSessionState

{

protected override IAsyncUploadResult Process(UploadedFile file, HttpContext context, IAsyncUploadConfiguration configuration, string tempFileName)

{

SampleAsyncUploadResult result = CreateDefaultUploadResult<SampleAsyncUploadResult>(file);

SampleAsyncUploadConfiguration sampleConfiguration = configuration as SampleAsyncUploadConfiguration;

string container = null;

if (sampleConfiguration != null)

{

container = sampleConfiguration.ContainerName;

result.ImageID = InsertImage(file, container, sampleConfiguration.MetaTags);

}

// Populate any additional fields into the upload result.

// The upload result is available both on the client and on the server

return result;

}

public int InsertImage(UploadedFile file, string containerName, string metaTags)

{

AzureAcess.UploadToCloud(containerName, file, metaTags);

return 0;

}

AsyncUpload

answered on 25 May 2011

4 answers

228 views

TabStrip and PageView border top issue in Internet Explorer 7

Hi,

I am working in a tabbed layout, where i am facing an issue with the PageView border top and TabStrip intersecting area, The PageView border top is displaying under the selected tab too, I need to hide this border displaying under selected tab, I find this issue only in Internet Explorer lower version like 6,7.

I find this issue in the telerik demo's too, please find the screenshot attached, and let me know the solution as soon as possible.

Thanks & Regards,
Giri

TabStrip

answered on 25 May 2011

1 answer

36 views

Strange radGrid or radWindow behavior

i just upgraded our main project to the latest version (the one from 5.19 in case a new one comes out in the next few days) of the asp.net ajax controls. We also upgraded to Visual Studio 2010 and windows7 64bit development machines. Everything seems to be working fine except on one page we have rad grid commands set to open rad windows via javascript. We've opened radwindows that way in other places on the site and everything works fine, but when we use them from the grid(which is using the needDataSource event) we get 3 commands then the entire page stops responding. if i click the edit button(which opens a rad window) and close the window after the 3rd time no button on the page will work. but IE 8 still runs fine and nothing seems to be taking a large amount of memory or processor time.

I thought it might be due to a problem with my machine, but i copied it out to our dev server which is windows 2003 and IIS6 and it has the same problem. Currently the windows call a function to rebind the grid on close, i've tried removing it but it had no effect. Any suggestions would be welcome, i havent seen anything in the change log that looks like it cause something like this but i may have missed a version. I can try to post some code snipets if necessary, but i dobut i'll be able to post the page in its entirety.

Grid

answered on 25 May 2011

5 answers

202 views

RadAjaxLoadingPanel is not getting displayed with RadGrid

Hi,
I am using 2009.3.1103.20 version of Telerik Controls, Visual studio 2008.

My problem is that with one of my webpage, RadAjaxLoadingPanel is not getting displayed with RadGrid. On rest of the pages its displayed perfect when its rendering or while paging.

This is my ASP.Net Website. I have a Master page also where I have RadAjaxManager, RadScriptManager and RadStyleSheetManager. All of my webpages have master page defined as this master page.

Now on one of my webpage where I have Telerik:RadGrid, I implemented this RadAjaxLoadingPanel and its getting displayed correctly when I click on any page number. Now on my second page there is some problem where LoadingPanel is not getting displayed.
Some more details, on this page, I have so many different RadControls like I have RadCombo, RadWindow, RadWindowManager, RadToolBar, RadTabStrip, RadMultiPage, RadGrid, RadUpload, RadNumericTextBox etc. This is kind of big form. Now I have RadGrid on this page where I want to display loadingpanel when its rendering or refreshing or doing something.
I applied the same code which is working on other page but somehow loadingpanel is never getting displayed on this grid.
So can you tell me what's wrong in here as the same loadingpanel is working on other page, the only difference between these two page is that the page where its working does not have too many controls like this page.
Here is the simple Code I am trying.

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGridAllRequests">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGridAllRequests" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="0"

Skin="WebBlue" MinDisplayTime="1000" EnableAjaxSkinRendering="true" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGridAllRequests">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGridAllRequests" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<telerik:RadComboBox runat="server"

ID="DdlSelectOption" AutoPostBack="true" Width="600px" ToolTip="Select any option here to view Spending Requests history with different status"

Skin="Hay" Font-Bold="true" CausesValidation="false" ValidationGroup="none"

OnSelectedIndexChanged="DdlSelectOption_SelectedIndexChanged">

</telerik:RadComboBox>

<div class="Scrollgrid" style="width: 1030px; height: 350px;">

<telerik:RadGrid ID="RadGridAllRequests" runat="server" AllowPaging="true" AllowSorting="true"

AllowFilteringByColumn="true" AutoGenerateColumns="False" BorderStyle="None"

GridLines="Both" OnNeedDataSource="RadGridAllRequests_needdatasource" OnItemDataBound="RadGridAllRequests_ItemDataBound"

OnItemCreated="RadGridAllRequests_ItemCreated" OnItemCommand="RadGridAllRequests_ItemCommand"

AllowMultiRowSelection="true" SelectedItemStyle-CssClass="SelectedItem" Width="100%"

Skin="WebBlue">

</telerik:RadGrid>

</div>

</asp:Panel>

Please suggest me for this.
Thanks in advance,

Grid

answered on 25 May 2011

1 answer

106 views

Set Image focus on mouseover

Hi,

I am displaying couple of images inside the RadRotator. The RotatorType is Carousel. I want to set the image focus when the user mouseover any image inside the RadRotator. The OnClientMouseOver method works only when I mouseover any other control in my page and then mouseover the RadRotator Item (which in this case is an Image).

How do I fix this problem? I want the ability to set the currentItemIndex as soon as the I mouseover any item(s) within the RadRotator.

Thanks for your help.

Keyur

Rotator

answered on 25 May 2011

Top users last month