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

Editing <select> element properties

6 Answers 82 Views

Editor

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

6 Answers, 1 is accepted

answered on 19 Aug 2010, 02:38 PM

customselecteditdialog-web-ui.zip

Hello lsavard,

RadEditor does not offer the requested features out-of-the box, but you can implement them using custom dialogs.

For your convenience I have attached an example demonstrating how to edit, add or remove select element items from a custom dialog.

Best wishes,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 12 May 2011, 09:04 AM

Okay this is a bug to me.

Nevertheless: I used the solution you uploaded. Because I am using the RAD for MOSS 2007 I had to do some changes.
I made the following:

ToolsFile.xml: <tool name="ListManager"/>
Edit css for icon
Edit resx for tooltip
ConfigFile.xml: <property name="ExternalDialogsPath">/_wpresources/RadEditorSharePoint/5.8.7.0__1f131a624888eeed/Resources/EditorDialogs</property>
I copied the ListManager.html in the EditorDialogs folder
MOSSEditorTools.js:
Telerik.Web.UI.Editor.CommandList["ListManager"] = function(commandName, editor, args) {
    var selection = editor.getSelectedElement();

    var arg = new Object();
    arg.Select = selection;
    //debugger;
    if (selection.tagName != "SELECT") {
        alert("Bitte selektieren Sie ein DropDown SELECT Element, um diesen Manager zu nutzen!");
        return false;
    }
    else {
        editor.showExternalDialog(
               '/_wpresources/RadEditorSharePoint/5.8.7.0__1f131a624888eeed/Resources/EditorDialogs/ListManager.html',
        /*               '/_wpresources/RadEditorSharePoint/5.8.7.0__1f131a624888eeed/Resources/EditorDialogs/ListManager.aspx',*/
               arg,
               550,
               560,
               null,
               null,
               'Insert Selection',
               true,
               Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
               false,
               false);
    }
}

The html site works fine. Unfortunalety it looks like Windows and not like RAD. Therefore I made an own aspx site:

<%@ Page Language="C#" AutoEventWireup="true" ClassName="ListManager" CodeBehind="ListManager.aspx.cs" %>

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

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

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

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

<fieldset>

<legend>Manage SELECT items</legend>

<table border="0" cellpadding="1" cellspacing="0" style="width: 343px; font-size: 12px; font-family: Arial;">

<tr>

<td>

Name:

</td>

<td style="width: 154px">

<input type="text" id="SelectName" />

</td>

</tr>

<tr>

<td>

Size:

</td>

<td style="width: 154px">

<input type="text" id="SizeValue" onkeyup="SetSize()" />

</td>

</tr>

<tr>

<td>

Multiple select:

</td>

<td style="width: 154px">

<input type="checkbox" id="multipleSelection" onclick="SetMultipleSelection()" />

</tr>

<tr>

<td>

Default selection:

<br />

</td>

<td style="width: 154px">

<input type="checkbox" id="selectedItem" onclick="SetDefaultOption(this.checked)" /><br />

<br />

</tr>

<tr>

<td style="height: 43px; padding-left: 2px;" valign="bottom">

Item Text:<br />

<input type="text" id="ItemText" style="width: 157px;" />

</td>

<td style="width: 154px; height: 43px; padding-right: 2px;" valign="bottom">

Item Value:<br />

<input type="text" id="ItemValue" style="width: 157px" />

</td>

<td style="width: 58px; height: 43px;" valign="bottom">

<input type="button" id="Insert" value="Insert" style="width: 55px" onclick="AddItem()" />

</td>

</tr>

<tr>

<td colspan="2">

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

<tr>

<td width="50%">

<select size="5" id="NameDropDown" style="width: 157px" onchange="CopySelection(this.selectedIndex)">

</select>

</td>

<td width="50%">

<select size="5" id="ValueDropDown" style="width: 157px" onchange="CopySelection(this.selectedIndex)">

</select>

</td>

</tr>

</table>

</td>

<td style="width: 58px">

<input type="button" id="Button1" value="Update" style="width: 55px" onclick="UpdateItem()" />

<input type="button" id="Delete" value="Delete" style="width: 55px" onclick="DeleteItem()" /><br />

<input type="button" id="Up" value="Up" onclick="MoveItem(1)" style="width: 55px" /><br />

<input type="button" id="Down" value="Down" onclick="MoveItem(-1)" style="width: 55px" />

</td>

</tr>

</table>

<input type="button" id="Ok" value="Ok" onclick="Ok()" style="width: 55px" />

</fieldset>

</form>

<script type="text/javascript">

if (window.attachEvent) {

window.attachEvent("onload", initDialog);

}

else if (window.addEventListener) {

window.addEventListener("load", initDialog, false);

}

function getRadWindow() {

if (window.radWindow) {

return window.radWindow;

}

if (window.frameElement && window.frameElement.radWindow) {

return window.frameElement.radWindow;

}

return null;

}

var arg;

var oSelect;

function initDialog() {

var clientParameters = getRadWindow().ClientParameters; //return the arguments supplied from the parent page

oSelect = clientParameters.Select;

window.setTimeout(function() {

for (var i = 0; i < oSelect.length; i++) {

AddListBoxesItem(oSelect.options[i].text, oSelect.options[i].value);

}

}, 100);

}

var selectName = document.getElementById("SelectName");

var sizeValue = document.getElementById("SizeValue");

var itemText = document.getElementById("ItemText");

var itemValue = document.getElementById("ItemValue");

var insertButton = document.getElementById("Insert");

var deleteButton = document.getElementById("Delete");

var upButton = document.getElementById("Up");

var downButton = document.getElementById("Down");

var updateButton = document.getElementById("Button1");

var nameDropDown = document.getElementById("NameDropDown");

var valueDropDown = document.getElementById("ValueDropDown");

var checkMultiSel = document.getElementById("multipleSelection");

function SetName() {

oSelect.removeAttribute("name");

oSelect.removeAttribute("NAME");

oSelect.setAttribute("NAME", selectName.value);

}

function SetSize() {

oSelect.size = sizeValue.value;

}

function CopySelection(selItemIndex) {

nameDropDown.options[selItemIndex].selected = true;

valueDropDown.options[selItemIndex].selected = true;

for (var i = 0; i < oSelect.length; i++) {

oSelect.options[i].selected = false;

}

oSelect.options[selItemIndex].selected = true;

itemText.value = nameDropDown.options[selItemIndex].text;

itemValue.value = valueDropDown.options[selItemIndex].text;

}

function DisableAll() {

updateButton.disabled = true;

deleteButton.disabled = true;

upButton.disabled = true;

downButton.disabled = true;

}

function EnableAll() {

updateButton.disabled = false;

deleteButton.disabled = false;

upButton.disabled = false;

downButton.disabled = false;

}

function AddItem() {

var option1 = document.createElement('option');

var option2 = document.createElement('option');

var option3 = document.createElement('option');

option1.text = itemText.value;

option2.text = itemValue.value;

option3.text = itemText.value;

option3.value = itemValue.value;

if (document.all) {

NameDropDown.add(option1, 0);

ValueDropDown.add(option2, 0);

oSelect.add(option3, 0);

}

else {

NameDropDown.add(option1, NameDropDown.options[0]);

ValueDropDown.add(option2, ValueDropDown.options[0]);

oSelect.add(option3, oSelect.options[0]);

}

// Validation: Empty Case

if (nameDropDown.length == 0) DisableAll();

else EnableAll();

}

function UpdateItem() {

nameDropDown.options[nameDropDown.selectedIndex].text = itemText.value;

valueDropDown.options[valueDropDown.selectedIndex].text = itemValue.value;

oSelect.options[oSelect.selectedIndex].text = itemText.value;

oSelect.options[oSelect.selectedIndex].value = itemValue.value;

}

function AddListBoxesItem(oText, oValue) {

var option1 = document.createElement('option');

var option2 = document.createElement('option');

option1.text = oText;

option2.text = oValue;

if (document.all) {

NameDropDown.add(option1);

ValueDropDown.add(option2);

} else {

NameDropDown.add(option1, NameDropDown.options[NameDropDown.length]);

ValueDropDown.add(option2, ValueDropDown.options[ValueDropDown.length]);

}

function DeleteItem() {

var keepFocus = NameDropDown.selectedIndex - 1;

if (keepFocus < 0) keepFocus = 0;

NameDropDown.remove(NameDropDown.selectedIndex);

ValueDropDown.remove(ValueDropDown.selectedIndex);

oSelect.remove(oSelect.selectedIndex);

NameDropDown.selectedIndex = keepFocus;

ValueDropDown.selectedIndex = keepFocus;

oSelect.selectedIndex = keepFocus;

// Validation: Empty Case

if (nameDropDown.length == 0) DisableAll();

else EnableAll();

}

function MoveItem(oSign) {

//oSing can be -1 or 1

var selIndex = NameDropDown.selectedIndex;

var txtIndex = NameDropDown.options[selIndex].text;

var valueIndex = ValueDropDown.options[selIndex].text;

switch (oSign) {

case 1:

if (NameDropDown.selectedIndex == 0 || ValueDropDown.selectedIndex == 0) {

return false;

}

break;

case -1:

if (NameDropDown.selectedIndex == NameDropDown.length - 1 || ValueDropDown.selectedIndex == ValueDropDown.length - 1) {

return false;

}

break;

}

NameDropDown.remove(selIndex);

ValueDropDown.remove(selIndex);

oSelect.selectedIndex = selIndex;

oSelect.remove(selIndex);

var option1 = document.createElement('option');

var option2 = document.createElement('option');

var option3 = document.createElement('option');

option1.text = txtIndex;

option2.text = valueIndex;

option3.text = txtIndex;

option3.value = valueIndex;

if (document.all) {

NameDropDown.add(option1, selIndex - oSign);

ValueDropDown.add(option2, selIndex - oSign);

oSelect.add(option3, selIndex - oSign);

} else {

NameDropDown.add(option1, NameDropDown.options[selIndex - oSign]);

ValueDropDown.add(option2, ValueDropDown.options[selIndex - oSign]);

oSelect.add(option3, oSelect.options[selIndex - oSign]);

}

NameDropDown.selectedIndex = selIndex - oSign;

ValueDropDown.selectedIndex = selIndex - oSign;

oSelect.selectedIndex = selIndex - oSign;

}

function SetMultipleSelection() {

if (checkMultiSel.checked) {

oSelect.multiple = true;

}

else {

oSelect.multiple = false;

}

function SetDefaultOption(checked) {

var selDef = NameDropDown.selectedIndex;

if (selDef < 0) {

alert("To use the Default selection option you should select an item from the select fields below.");

}

else {

if (checked) {

ValueDropDown.options[selDef].style.backgroundColor = "cccccc";

NameDropDown.options[selDef].style.backgroundColor = "cccccc";

ValueDropDown.options[selDef].style.color = "red";

NameDropDown.options[selDef].style.color = "red";

}

else {

ValueDropDown.options[selDef].style.backgroundColor = "white";

NameDropDown.options[selDef].style.backgroundColor = "white";

ValueDropDown.options[selDef].style.color = "black";

NameDropDown.options[selDef].style.color = "black";

}

function Ok() {

SetName();

getRadWindow().close(null); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.

}

</script>

</body>

</html>

So if I use this site instead the html an error occurs immediatly after opening the dialog:
Line: 217
Error: 'NameDropDown' is undefined

Why???
And the site also don't look like RAD.

So the best solution would be if the aspx would work.
The easiest solution would be to change the look of the html.
Can you help me?

answered on 17 May 2011, 01:21 PM

CustomSelectDialog.zip

Hello Henrik,

This is not a bug, but a missing functionality, which we cannot provide for all browsers because Firefox does not allow to select and edit Select elements in the editable IFRAME content area. We develop only cross browser solutions.

For your convenience I updated the ListManager.html file to ListManager.aspx, fixed the JS error as well as added RadFormDecorator to style the contents of the dialog so that it looks like the other editor's dialogs, and attached the modified project to my reply.

All the best,
Rumen
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Editing &lt;select&gt; element properties

6 Answers, 1 is accepted

Editing <select> element properties