Questions on UI for ASP.NET AJAX Forum

2 answers

126 views

CSS/Skin Used on the RadToolBar on the Telerik Demos Site

I just wondered if there was a skin/CSS available to re-create something similar to the RadToolBar used on the Telerik demos site. It looks like it is a RadTabStrip but in fact is a RadToolBar; any help with re-creating something similar to this would be greatly appreciated! I have attached a screen shot of what I am referring to if I haven’t been that clear.

ToolBar

answered on 10 Feb 2011

3 answers

105 views

Hide Expand on ServerOnDemand Grid?

I've searched and looked up on how to hide Expand/Collapse but seems to only work if you already have all the data.

there a way to do it with ServerOnDemand loading?

If I try this http://www.telerik.com/help/aspnet/grid/grdhideexpandcollapseimageswhennorecords.html

All the expand/collapse buttons go away. I'm assuming because the grid doesn't know if the row has child items or not. I have a dataset with three tables loaded already, there a way to check to see if each row will have child items and then hide/show the expand?

Grid

answered on 10 Feb 2011

9 answers

451 views

Grid Width Extends Past Screen

As the title says my grid extends past the screen width....here is my Grid:

    
            <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Sunset" AllowSorting="true" ShowFooter="false">  
        
                                    <ItemStyle Font-Size="11px" /> 
        
                                    <MasterTableView> 
        
                                        <RowIndicatorColumn> 
        
                                            <HeaderStyle Width="20px"></HeaderStyle> 
        
                                        </RowIndicatorColumn> 
        
                                        <ExpandCollapseColumn> 
        
                                            <HeaderStyle Width="20px"></HeaderStyle> 
        
                                        </ExpandCollapseColumn> 
        
                                    </MasterTableView> 
        
                                    <ClientSettings AllowColumnHide="false">  
        
                                        <Scrolling AllowScroll="true" UseStaticHeaders="True" ScrollHeight="450px" /> 
        
                                        <Resizing AllowColumnResize="true" ClipCellContentOnResize="true" 
        
                                               /> 
        
                                    </ClientSettings> 
        
                                </telerik:RadGrid>

When the grid loads with data it stretches past the screen width. What I want it to do is add a scroll bar to the bottom of the grid and allow you to scroll left or right without going off the right side of the screen. Kind of like how you can scroll up and down within the grid with the side scroll bar....that works as inteded.

I also set the initial size of my columns programmatically in the ColumnCreated event:

    
                Protected Sub RadGrid1_ColumnCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridColumnCreatedEventArgs) Handles RadGrid1.ColumnCreated  
        
                    Dim name As String = e.Column.UniqueName  
        
                    'resize columns  
        
                    If name = "Name" Or name = "Address1" Or name = "RFI Email" Or name = "Personal Email" Or name = "Practice" Then 
        
                        Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
        
                        boundColumn.ItemStyle.Width = 150  
        
                        boundColumn.HeaderStyle.Width = 150  
        
                    End If 
        
                    If name = "Initials" Or name = "State" Then 
        
                        Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
        
                        boundColumn.ItemStyle.Width = 45  
        
                        boundColumn.HeaderStyle.Width = 45  
        
                    End If 
        
                    If name = "Office" Then 
        
                        Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
        
                        boundColumn.ItemStyle.Width = 80  
        
                        boundColumn.HeaderStyle.Width = 80  
        
                    End If 
        
                    If name = "Ext" Or name = "Zip" Then 
        
                        Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
        
                        boundColumn.ItemStyle.Width = 50  
        
                        boundColumn.HeaderStyle.Width = 50  
        
                    End If 
        
                    If name = "Cell" Or name = "Home" Or name = "Fax" Or name = "Business" Or name = "City" Then 
        
                        Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
        
                        boundColumn.ItemStyle.Width = 89  
        
                        boundColumn.HeaderStyle.Width = 89  
        
                    End If 
        
                    If name = "Address2" Then 
        
                        Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
        
                        boundColumn.ItemStyle.Width = 70  
        
                        boundColumn.HeaderStyle.Width = 70  
        
                    End If 
        
                    If name = "Preferred" Then 
        
                        Dim boundColumn As GridBoundColumn = CType(e.Column, GridBoundColumn)  
        
                        boundColumn.ItemStyle.Width = 95  
        
                        boundColumn.HeaderStyle.Width = 95  
        
                    End If 
        
                End Sub

Any help is appreciated.
thanks,

Coty

Grid

answered on 10 Feb 2011

4 answers

116 views

WebUserControl receive null DataItem

We have a RadGrid with an EditFormType of WebUserControl.

The problem is that the DataItem property is set to the correct element only on first selection. If, on save, validation error occurs and the form is redisplayed, the value passed to the DataItem is null.

What can we do wrong? Is there something specific to set to always get the correct element on each "postback"?

Thanks,

Hugues

Grid

answered on 10 Feb 2011

11 answers

169 views

Can't programically collapse radgrid's hierarchy items

Hello,
I have a problem with collapsing radgrid items, when they're set to edit mode.

protected void Page_Load(object sender, EventArgs e)

{

for (int i = 0; i < radGrid.PageSize; i++)

{

for (int j = 0; j < radGrid.PageSize; j++)

{

radGrid.EditIndexes.Add(i, 0, j);

}

When I use javascript collapseItem() function, it's impossible to expand it later by user.

On the other hand, it's possible to collapse and expand items by user click - but again, not by running js onclick() method.

function CollapseAll() {

var grid = $find("<%= radGrid.ClientID %>");

master = grid.get_masterTableView();

for (masterIndex = 0; masterIndex < master.get_dataItems().length; masterIndex++) {

master.collapseItem(masterIndex);

}

Any help would be appreciated.

Grid

answered on 10 Feb 2011

8 answers

147 views

automating UI action on rad ComboBox

Hello

I'm writing a test script that automates UI actions by accessing controls from the application under test using javascript/jquery. I load the test code which is a regular HTML page containing the test script into one frame and the application under test into another frame on the same page. Then I automate the UI action with something like this:

var completeBtn = $(parent.rightFrame.document).find("#completeButton");

completeBtn.click();

var genderSelect = $(parent.rightFrame.document).find("#genderDropDown");

genderSelect.val("F");

genderSelect.change();

I'm not familiar with the rad controls and I see that they are rendered completely different in the browser then the standard dropdowns. What do I need to do in order to select a value from the list items and fire the event that is usually triggered when a user selects an item from the drop down menu? (I would like to do this without writing anything on the page of the actual application under test and without even seeing anything of that page besides for the source code of what's actually rendered in the browser.)

Thanx

Alan

ComboBox

answered on 10 Feb 2011

1 answer

44 views

Drag'NDrop with Db reorder... update?

Hi.

I found a few old posts regarding the issue of the drag and drop feature (within the same grid) calling a function to set the new row order in the backend Db. The one from 9/2008 in the Code Files section lacks a lot of information (the DragDrop.js file referenced in the in-line script, and the SqlDataSource called in the code-behind. I am very interested in using such a function, and wonder if there is any updated information somewhere that I could tap.

Thanks.

Tom

Grid

answered on 10 Feb 2011

1 answer

106 views

How to select 'Select Date' on single click

Hi All,

I am using 'RadDatePicker' in my web application. I am using following java script to display current date as selected date by default and this script is working fine. My problem is that for selecting selected date(which is by default current date) i have to click two time on same date, first click remove its selection and second click select it and display it in date picker. i just want to do selection of selectted date at single click.
Please help me its urgent.

function

CurrentDateSelection(sender, eventArgs) {
         if (sender.get_selectedDate() == null) {
        eventArgs.set_cancelCalendarSynchronization(true);
         var popup = eventArgs.get_popupControl();
         var todaysDate = new Date();
         var todayTriplet = [todaysDate.getFullYear(), todaysDate.getMonth() + 1, todaysDate.getDate()];
        popup.selectDate(todayTriplet, true);
     }
}

-----------------------------------------
<telerik:RadDatePicker ID="RadDatePickerAnswerDate" runat="server" Width="110px">
<DateInput ID="DateInput25" runat="server" DateFormat="MM/dd/yyyy" />
<ClientEvents OnPopupOpening="CurrentDateSelection" />
</telerik:RadDatePicker>

DataPager

answered on 10 Feb 2011

1 answer

82 views

Rad upload postback Issue

Hai

I have placed the rad upload control inside the edit item template . But the page is reloaded at every time. If i add update panel the page i am unable to read the file from rad upload. How can i solve the page reload issue with rad grid and rad upload controls.

Thanks

Grid

answered on 10 Feb 2011

2 answers

115 views

100Mo limit size

Hi All,

I have an error when i try to upload a file size greater than 100Mo !. I don't understand if this error come from IIS or AsyncUpload ?
I do my test on my local machine with IIS 7.5 (Windows 7 Ultimate) and on my server with IIS 7.5 (windows 2008 R2 DataCenter) and i have the same error.

My web.config :

<security><requestLimits maxAllowedContentLength="314572800" /></requestFiltering></security>

My Upload.aspx :

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

<!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>

<script type="text/javascript">

var Nbre = 0;

function getRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

}

function CloseWindow() {

var wnd = getRadWindow();

var openerPage = wnd.BrowserWindow;

openerPage.Importer_Callback();

wnd.close();

}

function validateRadUpload1(source, arguments) {

arguments.IsValid = $find('RadUpload1').validateExtensions();

}

function fileUploaded(sender, args) {

Nbre++;

var name = args.get_fileName();

var $ = $telerik.$;

$(".info-panel").text(Nbre).show();

}

</script>

<link href="../css/principal.css" rel="stylesheet" type="text/css" />

</head>

<body>

<form runat="server" id="mainForm" method="post">

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

<telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"></telerik:RadFormDecorator>

<telerik:RadProgressManager runat="server" ID="RadProgressManager1" />

<div class="popup-texte-edit" style="height:30px; padding:5px"><strong>Cliquez sur le bouton "Parcourir" et selectionnez le ou les fichiers à importer</strong><br /><em>(utilisez la touche 'CTRL' pour séléctionner plusieurs fichiers à la fois).</em></div>

<div style="margin:10px;background-color: #EEEEEE;">

<div style="background-color: #CC0000; color: #FFDDDD; font-size: 11px; margin-bottom: 10px; padding: 5px;">Fichiers autorisés : <strong><asp:Literal ID="FileAllowed" runat="server" Text="" /></strong><span style="color:#fff; font-size:11px;float:right;display:inline-block">(Taille maximale du fichier : 300 Mo)</span></div>

<div style="background-color: #EEEEEE; border: 1px dashed #CCCCCC; height: 180px; overflow-y: auto; padding: 5px 10px;" class="upload-panel">

<telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" MaxFileSize="300000000" OnClientFileUploaded="fileUploaded" ControlObjectsVisibility="None" ReadOnlyFileInputs="true" InitialFileInputsCount="1" MaxFileInputsCount="1" InputSize="70" Localization-Remove="Supprimer" Localization-Select="Parcourir" />

<asp:CustomValidator ID="Customvalidator1" runat="server" Display="Dynamic" ClientValidationFunction="validateRadUpload1">

<span style="FONT-SIZE: 11px;margin-left:50px;font-weight:bold;color:#ff0000">!!! Type de fichier incorrect !!!</span>

</asp:CustomValidator><asp:Literal ID="MaxFileError" runat="server" />

</div>

<div style="background-color: #ddd; float: left; width: 100%;">

<div style="background-color: #ddd; float: left; width: 312px;line-height: 22px;"> <asp:CheckBox ID="Encodage" runat="server" Text="Encoder la vidéo" /></div>

<div style=

"background-color: #ddd; float: right; font-size: 11px; line-height: 22px; padding: 0 10px; text-align: right; width: 215px;"

>Nbre de fichiers importés : <span class="info-panel" style="font-weight:bold;display:inline">0</span></div>

</div>

<div style="position: absolute; top: 100px; left: 73px;"><telerik:RadProgressArea runat="server" ID="RadProgressArea1"></telerik:RadProgressArea></div>

<div id="ErrorHolder"></div>

<table width="100%" cellspacing="5">

<tr>

<td align="center" height="50" valign="middle"><asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" Text="Valider" /></td>

<td align="center" height="50" valign="middle"><asp:Button ID="Button2" runat="server" Text="Annuler" CausesValidation="false" OnClientClick="return CloseWindow();" /></td>

</tr>

</table>

</form>

</body>

</html>

My upload.aspx.cs :

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.IO;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

using Telerik;

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

{

protected void Page_Load(object sender, EventArgs e)

{

if (Request.Params["Mode"] != null)

{

RadProgressArea1.Localization.Uploaded = "Progression totale : ";

RadProgressArea1.Localization.UploadedFiles = "Progression : ";

RadProgressArea1.Localization.CurrentFileName = "Progession en cours : ";

RadProgressArea1.Localization.ElapsedTime = "Temps : ";

RadProgressArea1.Localization.EstimatedTime = "Temps estimé : ";

RadProgressArea1.Localization.TotalFiles = "Total : ";

RadProgressArea1.Localization.TransferSpeed = "Vitesse : ";

if (Request.Params["Mode"].ToString() == "photos")

{

FileAllowed.Text = "*.jpeg, *.jpg";

AsyncUpload1.AllowedFileExtensions = new string[] { ".jpg", ".jpeg", ".gif" };

Encodage.Visible = false;

AsyncUpload1.ControlObjectsVisibility = Telerik.Web.UI.ControlObjectsVisibility.None;

AsyncUpload1.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Automatic;

}

if (Request.Params["Mode"].ToString() == "videos")

{

FileAllowed.Text = "*.flv, *.avi, *.mov, *.mp4, *.mpeg, *.mpg, *.wmv";

AsyncUpload1.AllowedFileExtensions = new string[] { ".flv", ".avi", ".mov", ".mp4", ".mpeg", ".mpg", ".wmv" };

AsyncUpload1.MaxFileInputsCount = 1;

AsyncUpload1.ControlObjectsVisibility = Telerik.Web.UI.ControlObjectsVisibility.None;

AsyncUpload1.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Disabled;

AsyncUpload1.TemporaryFolder = Server.MapPath("/WorkingFolder/");

}

if (Request.Params["Mode"].ToString() == "audio")

{

FileAllowed.Text = "*.mp3,*.wav,*.flv, *.avi, *.mov, *.mp4, *.mpeg, *.mpg, *.wmv, *.mp2";

AsyncUpload1.AllowedFileExtensions = new string[] { ".mp3", "wav", ".flv", ".avi", ".mov", ".mp4", ".mpeg", ".mpg", ".wmv", ".mp2", ".wma" };

Encodage.Visible = false;

AsyncUpload1.MaxFileInputsCount = 1;

AsyncUpload1.ControlObjectsVisibility = Telerik.Web.UI.ControlObjectsVisibility.None;

AsyncUpload1.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Disabled;

}

protected void buttonSubmit_Click(object sender, System.EventArgs e)

{

string targetFolder = "", filename = "", fileWithoutExtension = "";

bool encoder = false;

if (AsyncUpload1.UploadedFiles.Count > 0)

{

foreach (UploadedFile validFile in AsyncUpload1.UploadedFiles)

{

filename = validFile.GetName();

fileWithoutExtension = validFile.GetNameWithoutExtension();

encoder = Encodage.Checked;

if (Request.Params["Mode"].ToString() == "videos")

{

if (((validFile.GetExtension() != ".flv") && (validFile.GetExtension() != ".mp4")) || (encoder)) { targetFolder = Server.MapPath("/WorkingFolder/"); encoder = true; }

else { targetFolder = Server.MapPath(Request.Params["Folder"].ToString()); }

}

else if (Request.Params["Mode"].ToString() == "audio")

{

if ((validFile.GetExtension() != ".mp3")) { targetFolder = Server.MapPath("/WorkingFolder/"); encoder = true; }

else { targetFolder = Server.MapPath(Request.Params["Folder"].ToString()); }

}

else { targetFolder = Server.MapPath(Request.Params["Folder"].ToString()); }

filename = validFile.GetExtension();

fileWithoutExtension = fileWithoutExtension;

validFile.SaveAs(Path.Combine(targetFolder, filename), true);

}

protected void Customvalidator1_ServerValidate(object source, ServerValidateEventArgs args)

{

args.IsValid = (AsyncUpload1.InvalidFiles.Count == 0);

}

protected void RadUpload1_ValidatingFile(object sender, Telerik.Web.UI.Upload.ValidateFileEventArgs e)

{

long maxZipFileSize = 300000000;

if (e.UploadedFile.ContentLength > maxZipFileSize)

{

e.IsValid = false;

}

e.SkipInternalValidation = true;

}

I don't found any documentation about this problem !

Can someone help me ?

thanx

AsyncUpload

answered on 10 Feb 2011