Questions on UI for ASP.NET AJAX Forum

1 answer

175 views

RadGrid autogenerated column - how size properly

Hello,

I have a new situation with radgrids.

The columns are auto generating fine, I actually have two grids on one page.

I’m NOT using hardcoded columns in the ASP page.

I need to know how to change the widths of the columns in
the C# code behind ideally, if not through javascript.

Here the ASP code that generates the two columns, which work
fine except for not having control over the width.

Also, a lot is commented out. This code was commented
out due to both incompatibles with our master page and due to redundancies
between the autogenerated code of the two grids.

I can switch to bound columns if necessary. However I
would prefer not to because with this method I can control everything by
programming in Sql Server and then do minimal work in C# / ASP to make the
grid. However if I must, I’ll accept that as a solution.

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Main.Master" AutoEventWireup="true"


CodeBehind="Default.aspx.cs" Inherits="SludgeBilling.Pages.Default" %>

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


<telerik:RadStyleSheetManager ID="RadStyleSheetManager1"
runat="server" />

</head>

<body>


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


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


<Scripts>


<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.Core.js" />


<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQuery.js" />


<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQueryInclude.js" />


</Scripts>

        </telerik:RadScriptManager>


<script type="text/javascript">


//Put your JavaScript code here.


</script> --%>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:content id="Content2" contentplaceholderid="cphCenter" runat="server">


<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">


<script type="text/javascript">


function
OnClientClose(sender, eventArgs) {


if
(eventArgs.get_argument() == 'true')


$find("<%= RadAjaxManager.GetCurrent(Page).ClientID
%>").ajaxRequest("Reload");


else


return;


}


</script>


</telerik:RadCodeBlock>


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


<ClientEvents OnRequestStart="RadAjaxManager1_RequestStart" />


<AjaxSettings>


<telerik:AjaxSetting AjaxControlID="RadGrid1">


<UpdatedControls>


<telerik:AjaxUpdatedControl ControlID="RadGrid1" />


</UpdatedControls>


</telerik:AjaxSetting>


</AjaxSettings>


</telerik:RadAjaxManager> --%>


<div>


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


<script type="text/javascript">


function gridExport() {


$find("<%= RadGrid1.ClientID
%>").get_masterTableView().exportToExcel();


return false;


}


function RadAjaxManager1_RequestStart(sender, args) {


if (args.get_eventTarget() == "<%= RadGrid1.ClientID %>")


args.set_enableAjax(false);


}


</script>


</telerik:RadScriptBlock>



            <asp:Button
OnClientClick="return gridExport()" ID="Button1"
runat="server" Text="Export To Excel" /> --%>


<asp:SqlDataSource SelectCommand="select sum([Manifest].[Gallons]) as 'DailyTotal' ,
'<a href="Pages/Generator/GeneratorDetail.aspx?Id=' +
CONVERT(varchar(36),[Generator].[Id]) + '"><u>' +
[Generator].[Description] + '</u></a>' as Generator ,
[Generator].[SignificantUser] FROM [SludgeBillingSystem].[dbo].[Manifest] inner
join [SludgeBillingSystem].[dbo].[Generator] on [Manifest].[GeneratorId] =
[Generator].[Id] where [Manifest].[DeliveryDate] = cast(convert(varchar(10),
getdate(), 110) as datetime) group by [Generator].[Id],Generator.[Description],
[Generator].[SignificantUser] having sum([Manifest].[Gallons]) >= (SELECT
Convert(Int,REPLACE([AppConfiguration].[Value], ',', '')) as Value FROM
[SludgeBillingSystem].[dbo].[AppConfiguration] where Id =
'9208BD92-2777-400C-8E3E-ED2C791CB13C')" ConnectionString="<%$
ConnectionStrings:SludgeBillingSystem %>" ProviderName="System.Data.SqlClient" ID="DataSource1" runat="server"></asp:SqlDataSource>


<telerik:RadGrid DataSourceID="DataSource1" ID="RadGrid1" runat="server" Skin="Windows7">


<ExportSettings ExportOnlyData="False" FileName="ExportedRadGrid" OpenInNewWindow="False" IgnorePaging="False" />


        </telerik:RadGrid>


</div>


<%--</asp:content>


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


<Scripts>


<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.Core.js" />


<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQuery.js" />


<asp:ScriptReference Assembly="Telerik.Web.UI"
Name="Telerik.Web.UI.Common.jQueryInclude.js" />


</Scripts>

        </telerik:RadScriptManager>

        <script
type="text/javascript">


//Put your JavaScript code here.


</script>


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


<ClientEvents OnRequestStart="RadAjaxManager1_RequestStart" />


<AjaxSettings>


<telerik:AjaxSetting AjaxControlID="RadGrid1">


<UpdatedControls>


            <telerik:AjaxUpdatedControl
ControlID="RadGrid1" />


</UpdatedControls>


</telerik:AjaxSetting>


</AjaxSettings>


</telerik:RadAjaxManager> --%>


<div>


<%--
<telerik:RadScriptBlock ID="RadScriptBlock2"
runat="server">


<script type="text/javascript">


function gridExport() {


$find("<%= RadGrid1.ClientID
%>").get_masterTableView().exportToExcel();


return false;


}


function RadAjaxManager1_RequestStart(sender, args) {


if (args.get_eventTarget() == "<%= RadGrid1.ClientID %>")


args.set_enableAjax(false);


}


</script>


</telerik:RadScriptBlock>


<asp:Button OnClientClick="return gridExport()"
ID="Button2" runat="server" Text="Export To
Excel" /> --%>


<asp:SqlDataSource SelectCommand="select sum([Manifest].[Gallons]) /
count(distinct([Manifest].[DeliveryDate])) as MonthAvg , '<a
href="Pages/Generator/GeneratorDetail.aspx?Id=' +
CONVERT(varchar(36),[Generator].[Id]) + '"><u>' +
[Generator].[Description] + '</u></a>' as Generator ,
[Generator].[SignificantUser] FROM [SludgeBillingSystem].[dbo].[Manifest] inner
join [SludgeBillingSystem].[dbo].[Generator] on [Manifest].[GeneratorId] =
[Generator].[Id] where [Manifest].[DeliveryDate] >= DATEADD(mm, DATEDIFF(mm,
0, GETDATE()), 0) and [Manifest].[DeliveryDate] <= DATEADD (dd, -1,
DATEADD(mm, DATEDIFF(mm, 0, GETDATE()) + 1, 0)) group by [Generator].[Id],Generator.[Description],
[Generator].[SignificantUser] having sum([Manifest].[Gallons]) /
count(distinct([Manifest].[DeliveryDate])) >= (SELECT
Convert(Int,REPLACE([AppConfiguration].[Value], ',', '')) as Value FROM
[SludgeBillingSystem].[dbo].[AppConfiguration] where Id =
'9208BD92-2777-400C-8E3E-ED2C791CB13E')" ConnectionString="<%$
ConnectionStrings:SludgeBillingSystem %>" ProviderName="System.Data.SqlClient" ID="DataSource2" runat="server"></asp:SqlDataSource>


<telerik:RadGrid DataSourceID="DataSource2" ID="RadGrid2" runat="server" Skin="Windows7">


<ExportSettings ExportOnlyData="False" FileName="ExportedRadGrid" OpenInNewWindow="False" IgnorePaging="False" />


</telerik:RadGrid>


</div>


</asp:content>

<%--   </form>

</body>

</html>
--%>

Grid

answered on 27 Aug 2014

1 answer

112 views

ToggleRadioButton

I am not able to get whether RadButton - Radio has been "checked or not" at the client-side
My Telerik HTML code is

<Telerik:RadButton ID="rbFixed" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
GroupName="rbGrpFixedOrVariable" Checked="true" Text="Fixed" CssClass="standard_radio">
<Telerik:RadButton ID="rbVariable" runat="server" ButtonType="ToggleButton" ToggleType="Radio"
GroupName="rbGrpFixedOrVariable" Checked="false" Text="Variable" CssClass="standard_radio">

I am trying to access the same in my Javascript as

document.getElementById('<%= rbFixed.ClientID %>').get_checked () - Didn't work

document.getElementById('<%= rbFixed.ClientID %>').checked - Didn't work

$('#<%= rbFixed.ClientID %>').get_checked () - Didn't work

$find('#<%= rbFixed.ClientID %>').get_checked () - Didn't work

Any pointers would help a lot.

Thanks in Advance,
Vijai

Button

answered on 27 Aug 2014

10 answers

525 views

Closing a RadDropDownList on mouseleave

Hey guys,

I am in a situation where I need to close my RadDropDownLists on mouseleave.
The dropdowns are on my UserControl.ascx page along with some comboboxes.

I have referred your code for RadComboboxes and it works really fine. It closes the comboboxes on mouseleave. But when I call the same javascipt function for the DropDownLists on OnClientLoad it doesn't work.

Following is the code which I have referred:

<telerik:RadComboBox runat="server" ID="lstFoodStorage" OnClientLoad="onLoad">

<Items>

<telerik:RadComboBoxItem runat="server" Text="FoodStorage" />

<telerik:RadComboBoxItem runat="server" Text="Freezer" />

<telerik:RadComboBoxItem runat="server" Text="Fridge" />

<telerik:RadComboBoxItem runat="server" Text="Microwave" />

<telerik:RadComboBoxItem runat="server" Text="OnTheGo" />

<telerik:RadComboBoxItem CssClass="rcbitemlast" runat="server" Text="Pantry" />

</Items>

</telerik:RadComboBox>

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

function onLoad(sender) {

var div = sender.get_element();

$telerik.$(div).bind('mouseenter', function () {

if (!sender.get_dropDownVisible())

sender.showDropDown();

});

$telerik.$(".RadComboBoxDropDown").mouseleave(function (e) {

hideDropDown("#" + sender.get_id(), sender, e);

});

$telerik.$(div).mouseleave(function (e) {

hideDropDown(".RadComboBoxDropDown", sender, e);

});

}

function hideDropDown(selector, combo, e) {

var tgt = e.relatedTarget;

var parent = $telerik.$(selector)[0];

var parents = $telerik.$(tgt).parents(selector);

if (tgt != parent && parents.length == 0) {

if (combo.get_dropDownVisible())

combo.hideDropDown();

}

</script>

The selector in $telerik.$(".RadComboBoxDropDown") does not recognize the RadDropDownLists. It is only for ComboBoxes.
I need to achieve the same thing for my dropdownlists as well.

Following is the code for my dropdownlist:

<telerik:RadDropDownList ID="RadDropDownAreaList" Visible="true" runat="server" Width="300px"



DropDownHeight="200px">

</

telerik:RadDropDownList

<asp:CompareValidator runat="server" ID="Comparevalidator1" ValueToCompare=

"- Select -"

Operator="NotEqual" ControlToValidate="RadDropDownAreaList" ErrorMessage="Required"

                                        

ValidationGroup="e" />

DropDownList

answered on 27 Aug 2014

4 answers

126 views

Not working on Masterpages

Hi,

It's my first walk through telerik, and I started adding an control to an existing project.

The problem is that a RadDropDownList don't open when clicked, but is just on MasterPage Content, in an .aspx file it works fine.

HOW TO FIX?

I added the necessary controls in the MasterPage.

and the code that I'm using is on contect page is:

<%@ Page Title="" Language="C#" MasterPageFile="~/Sistema/SistemaBase.Master" AutoEventWireup="true" CodeBehind="Teste1.aspx.cs" Inherits="AdvocatiNet100.Sistema.Teste1" %>

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

<asp:Content ID="Content7" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ObjectDataSource ID="dsDados" runat="server" SelectMethod="LoadDados" TypeName="AdvocatiNet100.CompromissoINC"></asp:ObjectDataSource>

<label for="cboTipoIMG">Tipo do compromisso:</label><br />
<telerik:RadDropDownList ID="cboTipoIMG" runat="server" DataSourceID="dsDados" DataTextField="FDescricao" DataValueField="ID">

<ItemTemplate>
<table>
<tr>
<td>
<img src="http://www.menphissi.com.br/v4/agenda/<%# DataBinder.Eval(Container.DataItem, "FIcone")%>.png" width="16" height="16" alt="" />
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "FDescricao")%>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:RadDropDownList>
<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="cboTipoIMG">
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>

</asp:Content>

General Discussions

answered on 27 Aug 2014

2 answers

103 views

[HOWTO] Set GridGroupField HeaderText Programatically

I've got a default GroupByExpression selecting a column, and it works great.

I already set the column titles programatically because they are translated in different languages. I was trying to figure out how do I set the HeaderText for the GridGroupField programatically? It doesn't automatically get the column title, I can't databind via ASP.NET (like <%# GetTitle() %>), and I don't see a created/databound item to alter in the same way I'm altering many items.

ASPX:
[code]
<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldName="t_rv_account_group" HeaderText="CUSTOM VALUE HERE"/>
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField FieldName="t_rv_account_group" />
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>[/code]

It seems obvious now I've figured it out, but it took me enough time I thought I'd share. Since these are part of the HTML/ASP object, they of course are part of the object model, and can be modified in RadGrid1_PreRender() and can be set at the same time I'm setting translated column display titles.

C# CodeBehind:
[code]RadGrid1.MasterTableView.GroupByExpressions[0].SelectFields[0].HeaderText = CustomValueHereTitle;[/code]
This sets the specific one I knew about, or you can iterate the lists and map titles based on FieldName values.

Grid

answered on 26 Aug 2014

4 answers

129 views

iPad Safari - Paste into RadEditor Not Working

Seems like whn you copy something in the iPad Safari browser and try to paste it into the RadEditor it does not work? Even if you click the ToolBar Paste button it does not work. Is there a work around?

Editor

answered on 26 Aug 2014

3 answers

191 views

Rad Editor adds line break to empty content in Firefox

If you load an editor with some content, and then delete all the content (by using the keyboard delete key), the "Content" property of the edirot contains a rogue "<br />" tag when it should be empty. This is true even if the original content never occuped more than one line.This only seems to occur in Firefox. Is there any way to avoid this <br /> tag?

Editor

answered on 26 Aug 2014

2 answers

109 views

RadWindow won't stay on screen

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.rieDialogs
{
z-index: 10000;
}
#modalPopup_C
{
overflow:hidden !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadSkinManager ID="RadSkinManager1" runat="server"></telerik:RadSkinManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server"></telerik:RadWindowManager>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script>
var dialog;
var uploadedFilesCount = 0;

function OnClientFileUploaded(sender, eventArgs) {
uploadedFilesCount++;
}

function validateRadAsyncUpload(source, e) {
if (uploadedFilesCount > 0)
e.IsValid = true;
else
e.IsValid = false;
}

function showImageEditor() {
dialog = $find("<%= RwImageEditor.ClientID %>");
if (dialog) {
dialog.show();
}
else
radalert("Unable to locate image editor window.", 330, 110, "Debug");
}

//Callback function for the custom save button in the ImageEditor
function closeImageEditor(clientData, serverData) {
if (dialog)
dialog.close();
else
radalert("Unable to locate image editor window.", 330, 110, "Debug");
}

//Automatically resize image to 100 x 100 if it is cropped
function imgEditorImageChanged(imgEditor, args) {
setTimeout(function () {
if (args.get_commandName() == "Crop")
imgEditor.resizeImage(100, 100, true);
}, 500);
}

//Create a custom save command for the image editor
Telerik.Web.UI.ImageEditor.CommandList.SavePicture = function (imageEditor, commandName, args) {
imageEditor.saveImageOnServer("Picture", true);
closeImageEditor();
}

</script>
</telerik:RadScriptBlock>
<table>
<tr>
<td>
<telerik:RadAsyncUpload runat="server" ID="RauPicture"
OnClientFileUploaded="OnClientFileUploaded" OnFileUploaded="RauPicture_FileUploaded"
AllowedFileExtensions="jpg,jpeg,png,gif" MaxFileSize="1048576" Width="250px">
</telerik:RadAsyncUpload>
<asp:Button ID="BtnUpload" Text="Upload Image" runat="server"
CausesValidation="False" Width="229px" OnClientClick="showImageEditor()">
</asp:Button>
</td>
</tr>
<tr>
<td>
<telerik:RadTextBox ID="TextBox1" runat="server" CausesValidation="True" Visible="false"
AutoAdjustImageControlSize="false" Height="80px" Width="80px" >
</telerik:RadTextBox>
<asp:CustomValidator ID="CvRauPicture" runat="server" ErrorMessage="Please select a picture." ControlToValidate="TextBox1" ClientValidationFunction="validateRadAsyncUpload" CssClass="errors" Text="ç"></asp:CustomValidator>
</td>
</tr>
</table>
<telerik:RadAjaxPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" EnableAJAX="true">
<telerik:RadWindow ID="RwImageEditor" runat="server" Animation="Fade"
AutoSize="True" Modal="False" VisibleStatusbar="False" Title="Edit Photo" EnableViewState="false" ShowContentDuringLoad="true" VisibleOnPageLoad="false">
<ContentTemplate>
<telerik:RadImageEditor ID="RadImageEditor1" runat="server" OnImageLoading="RadImageEditor1_ImageLoading"
OnClientImageChanged="imgEditorImageChanged">
<Tools>
<telerik:ImageEditorToolGroup>
<telerik:ImageEditorTool CommandName="SavePicture" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorToolStrip CommandName="Undo" />
<telerik:ImageEditorToolStrip CommandName="Redo" />
<telerik:ImageEditorToolStrip CommandName="Reset" />
<telerik:ImageEditorToolSeparator />
<telerik:ImageEditorTool CommandName="Crop" />
<telerik:ImageEditorTool CommandName="Resize" />
</telerik:ImageEditorToolGroup>
</Tools>
</telerik:RadImageEditor>
</ContentTemplate>
</telerik:RadWindow>
</telerik:RadAjaxPanel>
</form>
</body>
</html>

Window

answered on 26 Aug 2014

2 answers

137 views

PDF Export problem with tables

I'm trying to export an HTML table from RadEditor and the text is getting jumbled up. I can reproduce this by pasting the code below into the RadEditor Export to PDF demo. What am I doing wrong?

<table height="180" style="width: 720px;" border="1">

<colgroup><col /></colgroup>

<tbody>

<tr>

<td>

<p style="text-align: center;"><span style="font-family: Arial; font-size: 48px;">Your Name Here<br />

(555) 555-5555</span></p>

</td>

</tr>

</tbody>

</table>

Editor

answered on 26 Aug 2014

3 answers

52 views

get starting with telerik

hi i am new to telerik .
my first question is this open source and paid tool.
if it is an open source where i can download this telerik components to visual studio 2005.

Grid

answered on 26 Aug 2014