Questions on UI for ASP.NET AJAX Forum

110,810 questions

3 answers

212 views

Add textbox to the RadEditor's Tool Collection

Hello all,

I am new to Telerik RadControls and currently I am working on RadEditor Control for the application I am developing using ASP.Net 3.5 Ajax... I would like to know whether is it possible to "Add textbox to RadEditor's Tool Collection"

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

    CodeBehind="~/welcomeScreen.aspx.cs" Inherits="Waivenet.welcomeScreen" %>

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<asp:Content ID="headContent" ContentPlaceHolderID="headph" runat="server">

<script type="text/javascript">

            //<![CDATA[

                /************************************************

                *

                *    Tool with custom rendering

                *

                ************************************************/

                var defaultoInputWidthValue = "set Width...";

                var defaultoInputHeightValue = "set Height...";

                var defaultoInputUrlValue = "add URL...";

                if ("undefined" == typeof(RadEditorToolInitializer))

                {

                    var RadEditorToolInitializer = {};

                }

                /* RadEditorToolInitializer is a global object that contains initializer functions for custom tools */

                RadEditorToolInitializer["CustomRenderedTool"] = function (toolArgs)

                    {

                        function CustomRenderedTool(toolArgs)

                        {

                            this.Controller = toolArgs.Controller;

                            this.Name = toolArgs.Name;

                        }

                        CustomRenderedTool.prototype.Create = function()

                        {

                            var oInputWidth = document.createElement ("INPUT");

                            oInputWidth.type = "text";

                            oInputWidth.style.width = "75px";

                            oInputWidth.value = defaultoInputWidthValue;

                            oInputWidth.onclick = function(){if (this.value == defaultoInputWidthValue)this.value = ""};

                            var oInputHeight = document.createElement ("INPUT");

                            oInputHeight.type = "text";

                            oInputHeight.style.width = "75px";

                            oInputHeight.value = defaultoInputHeightValue;

                            oInputHeight.onclick = function(){if (this.value == defaultoInputHeightValue)this.value = ""};



                            var oInputUrl = document.createElement ("INPUT");

                            oInputUrl.type = "text";

                            oInputUrl.style.width = "90px";

                            oInputUrl.value = defaultoInputUrlValue;

                            oInputUrl.onclick = function(){if (this.value == defaultoInputUrlValue)this.value = ""};



                            var oButton = document.createElement ("INPUT");

                            oButton.type = "button";

                            oButton.value= "Insert!";

                            oButton.className = "RadEButton";

                            var controller = this.Controller;

                            var toolObject = new Object();

                            toolObject.widthHolder = oInputWidth;

                            toolObject.heightHolder = oInputHeight;

                            toolObject.className = "CustomRenderedTool";

                            toolObject.urlHolder = oInputUrl;

                            oButton.onclick= function anon (e)

                            {

                                controller.Fire("CustomRenderedTool", toolObject);

                                return false;

                            };

                            var oHolder = document.createElement ("DIV");

                            oHolder.appendChild (oInputWidth);

                            oHolder.appendChild (oInputHeight);

                            oHolder.appendChild (oInputUrl);

                            oHolder.appendChild (oButton);

                            return oHolder;

                            return oButton;

                        };



                        return new CustomRenderedTool (toolArgs);

                    };

            //]]>

            </script>

</asp:Content>

<asp:Content ID="menuContent" ContentPlaceHolderID="menuph" runat="server">

    <div id="cusotmizeScreenDiv" style="float: right; margin-top: 3.5%;">

        <asp:Panel ID="cmsPanel" runat="server" ScrollBars="Auto" GroupingText="Content Management">

            <asp:CheckBoxList ID="cblCustomizeLayout" runat="server">

            </asp:CheckBoxList>

            <br />

            <asp:Button ID="btEnable" runat="server" Text="Enable Selected" OnClick="btEnableClick"

                ToolTip="Click to enable the status of the seletced blocks" />

            <br />

            <br />

            <asp:Button ID="btDisable" runat="server" Text="Disable Selected" OnClick="btDisableClick"

                ToolTip="Click to disable the status of the seletced blocks" />

        </asp:Panel>

    </div>

</asp:Content>

<asp:Content ID="mainContent" ContentPlaceHolderID="mainph" runat="server">

    <script type="text/javascript">

        function setStyle(editor, args) {

            var style = editor.get_contentArea().style;

            style.backgroundImage = "none";

            style.backgroundColor = "white";

            style.color = "black";

            style.fontFamily = "Tahoma";

            style.fontSize = 12 + "px";

        }

    </script>

    <div id="WelcomeMessage" runat="server" style="position: relative; float: left; width: 48%;

        height: 30%; left: 1%; top: 1%; margin-right: 1.5%; margin-top: 1%;" visible="false">

        <asp:Panel ID="welcomePanel" runat="server" ScrollBars="Auto" GroupingText="Welcome Message"

            Width="100%" Height="100%" Font-Bold="false">

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

            <br />

            <asp:Button ID="btCusotmize" runat="server" Text="Customize Welcome Message" Width="185px"

                Visible="true" OnClick="btCustomizeWelcomeMsgClick" />

            <telerik:RadEditor ID="welcomeEditor" runat="server" Skin="Web20" Width="100%" Height="100%"

                OnClientLoad="setStyle" Style="overflow: auto" ToolbarMode="Default" EditModes="Design,Preview"

                ToolsFile="~/ToolsFiles/WelcomeBlockTools.xml">

            </telerik:RadEditor>

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

                <script type="text/javascript">

                    //<![CDATA[

                    /* Implementation of the Submit command, declared in the editor's DefaultTools.xml file! */

                    if ("undefined" != typeof (Telerik.Web.UI.Editor)) {

                        Telerik.Web.UI.Editor.CommandList["Submit"] = function(submit, editor, args) {

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

                        };

                        /* Implementation of the Cancel command, declared in the editor's DefaultTools.xml file! */

                        Telerik.Web.UI.Editor.CommandList["Cancel"] = function(cancel, editor, args) {

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

                        };

                    }

                    //]]>

                </script>

            </telerik:RadCodeBlock>

        </asp:Panel>

    </div>

    <div id="News" runat="server" style="position: relative; height: 30%; float: left;

        width: 48%; left: 1%; top: 1%; margin-right: 1.5%; margin-top: 1%; overflow: auto"

        visible="false">

        <asp:Panel ID="newsPanel" runat="server" ScrollBars="Auto" GroupingText="News" Width="100%"

            Height="100%">

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

            <br />

            <asp:Button ID="btPostNews" Text="Post News" runat="server" OnClick="btPostNewsClick" />

            <br />

            <table id="tblHolder" cellspacing="0" cellpadding="2" border="0" runat="server">

                <tr>

                    <td>

                        <asp:Label ID="lbNewsExpDt" runat="server" Text="News Expiry Date:" Visible="false"></asp:Label>

                    </td>

                    <td>

                        <asp:TextBox ID="tbNewsExpDt" runat="server" Visible="false"></asp:TextBox>

                    </td>

                </tr>

            </table>

            <telerik:RadEditor ID="newsEditor" runat="server" Skin="Web20" Width="100%" Height="100%"

                OnClientLoad="setStyle" Style="overflow: auto" ToolbarMode="Default" EditModes="Design,Preview"

                ToolsFile="~/ToolsFiles/NewsBlockTools.xml" ToolsWidth="100%">

            </telerik:RadEditor>

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

                <script type="text/javascript">

                    //<![CDATA[

                    /* Implementation of the CustomRenderedTool command, declared in the NewsBlockTools.xml file! */

                    if ("undefined" != typeof (Telerik.Web.UI.Editor)) {

                        Telerik.Web.UI.Editor.CommandList["CustomRenderedTool"] = function(commandName, editor, oTool) {

                            var linkToPaste = "";

                            var selectionText = editor.get_html();

                            if (selectionText == "") {

                            selectionText = oTool.urlHolder.value;

                            }

                            var reDimension = /^\d+(px|pt)?$/ig;

                            var width = oTool.widthHolder.value;

                            if (!width.match(reDimension)) {

                            alert('Please, provide a valid width!');

                            return;

                            }

                            var height = oTool.heightHolder.value;

                            if (!height.match(reDimension)) {

                            alert('Please, provide a valid height!');

                            return;

                            }

                            var url = oTool.urlHolder.value;

                            if (!url.match(/^(http|file|ftp):\/\//ig)) {

                            alert('Please, provide a valid url!\nUrls should begin with a protocol name, like http://www.telerik.com,');

                            return;

                            }

                            linkToPaste = "<a href=\"#\" onclick=\"javascript:window.open('" + url +

                            "', '_blank', 'width=" + width +

                            ",height=" + height +

                            "');\">" + selectionText + "</a>"

                            editor.PasteHtml(linkToPaste);

                        };

                        /* Implementation of the Post command, declared in the editor's PostNewsTools.xml file! */

                        Telerik.Web.UI.Editor.CommandList["Post"] = function(newsPost, editor, args) {

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

                        };

                        /* Implementation of the Post command, declared in the editor's PostNewsTools.xml file! */

                        Telerik.Web.UI.Editor.CommandList["Cancel Post"] = function(cancelPost, editor, args) {

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

                        };

                    }

                    //]]>

                </script>

            </telerik:RadCodeBlock>

        </asp:Panel>

    </div>

I did go through the forums and found threads about using custom tools as well as adding custom controls to radeditor toolbars.But it didnt work for me.The problem that I am facing is rendering the "CustomRenderedTool" from the toolsfile.xml. I does show a icon with a tooltip of "CustomRenderedTool" but when I am trying to initialize Radeditor Tool using RadEditorToolInitializer, it not working fro me...

Here is the sample code that I am using...

Editor

answered on 21 Nov 2011

5 answers

189 views

how to send radeditor boldtext and forecolor through SMTP

Hi,
i have been using radeditor for email application as body for sending text ,if we send bold text or text with forecolours through smtp to other mails like gmail e.t.c the text we are sending in bold or with forecolour are displayed as simple text without colour ,how to solve this any idea i amsending smtp code please respond,thanks.

try

{

DbLayer objDB = new DbLayer();

System.Net.Mail.MailMessage Message = new System.Net.Mail.MailMessage();

Message.To.Add(rdtxtTo.Text);

if (rdtxtCC.Text != string.Empty)

{

Message.CC.Add(rdtxtCC.Text);

}

if (rdtxtBcc.Text != string.Empty)

{

Message.Bcc.Add(rdtxtBcc.Text);

}

Message.Subject = rdtxtSubject.Text;

//Discalimercode

CreateEventEntities objentity = new CreateEventEntities();

var mailDisclaimers = from c in objentity.Disclaimers where c.DisclaimerID == 1 select c;

if (mailDisclaimers.ToList().Count > 0 && mailDisclaimers.ToList()[0].DisclaimerID != 0)

{

if (mailDisclaimers.ToList()[0].DisclaimerText.ToString().Length > 0)

Disctext = mailDisclaimers.ToList()[0].DisclaimerText.ToString();

Disctext = "<br/><br/><br/><br/><br/>" + Disctext;

}

rdeditortxt.Content = rdeditortxt.Content + Disctext;

Message.Body = rdeditortxt.Text;

System.Net.Mail.SmtpClient SmtpClient = new System.Net.Mail.SmtpClient("smtp.gmail.com", 587);

SmtpClient.EnableSsl = true;

SmtpClient.Credentials = new System.Net.NetworkCredential("abc.com", "abc");

System.Net.Mail.MailAddress FromEmail = new System.Net.Mail.MailAddress(TextBox1.Text);

Message.From = FromEmail;

SmtpClient.Send(Message);

Editor

answered on 21 Nov 2011

1 answer

107 views

RadGrid in Panel Bar

Having trouble databinding a radGrid using the NeedDataStore ... using C#, but am having trouble with the syntax. I know that I should probably use the FindControl or FindItemByText ... but just need a kick in the right direction.

Thanks!

Larry

PanelBar

answered on 21 Nov 2011

1 answer

124 views

Radgrid Export Excel Solution

Hi All,

How to Export only the template column with label field and bound column and visible column in radgrid into excel.
we want HeaderText of radgrid column name as Column name in Excel how to get that..
please give the valuable solution for this.

General Discussions

answered on 21 Nov 2011

1 answer

125 views

binding to an ArrayList

I'd like to bind a simple two column grid to an ArrayList with an initial size of 0.

Can I be pointed to an example of how can to declare my grid to show column headers when the ArrayList is empty?

Grid

answered on 21 Nov 2011

1 answer

252 views

Getting cell value of a hidden column - client side

Hello.

For you information, the javascript code I have used to get the value of a hidden value is:

function GetSelectedRowCellValue(sender, args) {

var grid = $find("RadGridMain");

var selected = grid.get_masterTableView().get_selectedItems();

if (sel.length > 0) {

var row = grid.get_masterTableView().get_selectedItems()[0];

var cellValue = grid.get_masterTableView().getCellByColumnUniqueName(row, "TheColumnName").innerText;

...

}

...

}

The ASP.NET code is:

<telerik:GridBoundColumn DataField="TheColumnName" UniqueName="TheColumnName" DataType="System.Int32" Visible="true" Display="false" />

The Visible and Display settings are important.

I hope this can help other developers.

Regards
Augusto

Grid

answered on 21 Nov 2011

2 answers

178 views

Transparent button and toolbar

My radbuttons and radtoolbar button does not render properly when I use raddatepicker in my form. I'm using IE9.
I use a master page have two content place holders. One for the main content and form and another that has a floating div on at the bottom of the page. I place several telerik controls in the main content (i.e. textbox, numeric textbox, combo box, datepicker, grids, etc.) and i also use a radajaxmanager and radajaxlaodingpanel. The weird think is that the problem only happens when i place rad datepicker in my form. all the other controls works fine with radbutton and radtoolbar. Can someone help me solve this please?

Button

answered on 21 Nov 2011

2 answers

338 views

[Solved] RadScheduler Retrieving DataKeyField

So I'm wondering if it's possible to retrieve the DataKeyField of the Appointment inside the OnAppointmentDelete event and how (server-side not client-side)?

Regards,
Sasha.

Scheduler

answered on 20 Nov 2011

2 answers

165 views

Expand Row in Rad Grid

Hi i've a rad grid. I can expand the row in the grid. I've binded the grid from the dataset. When I expand the rows i want to populate the textboxes inside the expanded row. I'm unable to do that.

Can anyone help me out this?? Thank you

Grid

answered on 20 Nov 2011

9 answers

512 views

[Solved] Loaded user control is disapears in postback - why?

Hi,

One of the pages loading usercontrols dynamically from a folder (each usercontrol has a different form and a different functionality), but when I click in any button in the usercontrol which causes postback, then the entire usercontrol disapears.
Does Telerik ajax controls handles this issue? if so, please let me know how.

Regards,
Bader

Ajax

answered on 19 Nov 2011

Top users last month