Group snippets or multiple snippets in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

Group snippets or multiple snippets

7 Answers 55 Views

Editor

This is a migrated thread and some comments may be shown as answers.

ManniAT asked on 22 Apr 2009, 07:09 PM

Hi,

I have a site where the user can customize content (like some kind of CMS).
For this I provide a lot of snippets to make the placement of placeholders.
---a placeholder in my case is something like $$SYS_UTC_DATE$$ which gets later replaced by a value.

There are a lot of them - an by theory I could group them to "server variables" - "user variables" - and so on.

But I don't know how to achieve this with rad editor.
Nesting snippets like with custom links does not work.
And I have now idea how to enable multiple (different) snippet combos in the toolbox.

By the way - I sometimes have 2 or more editors visible which share the same toolprovider which works fine and saves a lot of loading time.
So if code is needed to achieve what I need - pleas also let me know if the solution works with toolproviderid.

Regards

Manfred

7 Answers, 1 is accepted

answered on 27 Apr 2009, 10:50 AM

Hi ManniAT,

RadEditor offers a dropdown tool named Insert Code Snippet which is suitable for your scenario. You can find information about it and how to configure it in this help article: Code Snippets.

Unfortunately, the current implementation of the ToolProviderID functionality does not apply the collections of the parent editor to the child editors. This means that the Snippets of the parent editor will be not inherited by the child editors. The enhancement of this property is logged in our ToDo list but I cannot provide an estimate when it will be done.

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 27 Apr 2009, 11:42 AM

Hi Rumen,

I guess my question was misunderstood.
I know the snippets - and I use it via ToolsFile.xml - and by the way with tools.xml also the ToolProviderID works.

My problem is that my <snippets> section in ToolsFile.xml became to big.
So it is hard for my users to find the correct entry in a list of (lets say) 50 entries.

Therefore I want to have either
a.) something like with hyperlinks (grouping represented as treewview)
OR
b.) multiple <snippet> sections in tools.xml (every section building it's own dropdown)

So that in the result the user has (let's say) one dropdown for "subpage functions", one for "system values", one for .....

Regards

Manfred

answered on 29 Apr 2009, 10:07 AM

Hi Rumen,

thank you for this information.
I face two problems - first the TreeView expects (for it's load function) an XML structure like this:

    
            <Tree> 
        
                <Node Text="North America" Expanded="True">  
        
                    <Node Text="Marketing" Expanded="True">  
        
                        <Node Text="Timesheet May 2004" /> 
        
                        <Node Text="Timesheet April 2004" /> 
        
                    </Node> 
        
                    <Node Text="Sales" > 
        
                        <Node Text="Timesheet May 2004" /> 
        
                        <Node Text="Timesheet April 2004" /> 
        
                    </Node> 
        
                    <Node Text="Productions" > 
        
                        <Node Text="Timesheet May 2004" /> 
        
                        <Node Text="Timesheet April 2004" /> 
        
                    </Node> 
        
                </Node>

What I need is "content" like this:

    
            <snippet name="Order Confirmation">  
        
                            <![CDATA[ 
        
                                <div style="width:300px;border:2px outset #D8D2BD;padding:34px;font-family:Arial, Verdana; font-size:11px;background-color:#F1EFE6;"> 
        
                                Dear ____________________,<br /> 
        
                                Thank you for inquiring about ____________. Your request will be processed in 48 hours and shipped at the address you have provided.  
        
                                <br /><br /> 
        
                                    <b>Please, contact us if you have any problems.</b> 
        
                                </div> 
        
                            ]]> 
        
                        </snippet>

I'm not sure if the treeview would accept such a thing.

The other problem is my solution itself.
When I look at sample provided it assumes a "flat" structure.
In my case I have a RadGrid with Master Detail. The master uses (in edit / insert mode) 3 RadEditors and the detail table 4 RadEditors.
Due to space recommendations some of those editors use ToolbarNode="floating". The editors itself move, the toolbars are dockable and so forth.
And last not least there are two different ToolFiles - which means two different sets of snippets.
If I look at the used scripts and html I guess this would end in pretty complex scripts, a set of scripts / div's for each editor instance, a lot of code behind to bind those trees when changing the grid modes (to / from edit, insert).
If it is buildable (I'm sure it is) this would blow by 300% or more.

The next problem I see is maintenance - what I my customer has a need "please change editor 3 to floating toolbars...."?
Or "pleas put the description left of the editor - not on top of it..".
The things don't become easier by the fact that I'm not talking about one page - there are >12 of them.

I simply guess it would be easier to have a popup (RadWindow) with some "Selection UI" (a number of listboxes, a hierarchical grid or comboboxes) which I can invoke via a button on the editors toolbar - and it simply returns the content I selected.
I'm just thinking about it - but I guess using the editor's showExternalDialog this is much easier - and it stays also maintainable.

I was just hoping there is a (overseen by me) way to group snippets like with hyperlinks or to have multiple snippets.

Anyhow thank you for your help

Manfred

answered on 12 Sep 2012, 02:20 PM

Drop-down.png

Hi guys,

I know this is an old post but I just had a similar requirement and was searching for this. I couldn't find any other posts and figured I might as well post a resolution for this here to help anyone looking for it in the future.

You can use this post:
http://www.telerik.com/support/kb/aspnet-ajax/editor/integrating-radtreeview-in-a-custom-dropdown-of-radeditor-v5-x-v7-x-radeditor-for-asp-net-ajax.aspx
to see how you can insert a custom button that displays a treeview.

You will need to add items in your treeview with the appropriate text to display and value to paste when you click it. I want mine organized into folders and files to be able to easily change them in the future. So what I did is have a folder Templates under my website and then have subfolders for the list menu items and text files below them for the treelist items. I have the following code in my code behind to populate them dynamically when the editor is loaded:

protected void Page_Load(object sender, EventArgs e) {

// Get folders in the templates path. If none exist then get files

string[] folderEntries = Directory.GetDirectories(MapPath("Templates"));

if (folderEntries.Length > 0) {

foreach (string folderName in folderEntries) {

rtvCodeSnippets.Nodes.Add(new RadTreeNode(folderName.Substring(folderName.LastIndexOf("\\") + 1)));

int nodeIndex = rtvCodeSnippets.Nodes.Count - 1;

string[] fileEntries = Directory.GetFiles(folderName);

foreach (string fileName in fileEntries) {

try {

// Read the file contents

StreamReader templateReader = new StreamReader(fileName);

string templateContents = templateReader.ReadToEnd();

templateReader.Close();

string templateName = fileName;

if (templateName.LastIndexOf("\\") > 0) {

templateName = templateName.Substring(templateName.LastIndexOf("\\") + 1);

}

if (templateName.LastIndexOf(".") > 0) {

templateName = templateName.Substring(0, templateName.LastIndexOf("."));

}

// Add it in the snippets (key is the filename and value is the contents)

rtvCodeSnippets.Nodes[nodeIndex].Nodes.Add(new RadTreeNode(templateName, templateContents));

}

catch {

}

Finally you'll need to change the HandleClick function from the provided Telerik link above a little bit as in the code snippet below (essentially it only changes the pasteHtml line):

function HandleClick(sender, args) {

var treeDiv = document.getElementById("treeDiv");

var editor = treeDiv.RadEditor;

if (treeDiv.RestorePoint) treeDiv.RestorePoint.select();

editor.pasteHtml(args.get_node().get_value());

treeDiv.style.display = "none";

}

It looks like the attached image in the end (I have scratched most options to protect client privacy) and when you select an option the contents of the appropriate file are inserted in your editor.