Drop down list and check boxes in control designer
Hi
I need to create a custom designer for one of my controls. It needs to have 1 drop down list and a few check boxes (I know I can use a text box with a boolean value in, but it is at the request of my client).
Is this possible? I haven't been able to find documentation for it (that or I'm not sure how to phrase what I'm looking for)
Charles D.
Hi Charles,
Yes, this is possible. In the template of your control designer, you can add any controls you want - a DropDownList, as well. You can read more about control designers and how to work with them here:
http://www.sitefinity.com/40/help/developers-guide/sitefinity-essentials-controls-working-with-control-designers.html
Regards,
Svetoslav Petsov
the Telerik team
Hi
It took a bit of trial and error, but I got it right!
Now, How do I pass this value (in the designer) to my control? I might've overlooked that in the documentation.
Hi Charles,
Inside the client component there is a method applyChanges which you can use to set the property of the control you use. This method is called when the changes must be applied to the control. In it you must get an instance of the control and set its properties to the new values in the UI.
var controlData = this.get_controlData();
controlData.Title = jQuery("#txtTitle").val();
Here Title is a property of the control and we set its value to the txtTitle value
returned by a control from our desginer.
Greetings,
Ivan Dimitrov
the Telerik team
Hi
I know I'm asking silly questions...
I got everything to work now. Now, is there a way to make the dropdown list read values dynamically?
This is what my designer template looks like (not working):
<%@ Control Language=
"C#"
%>
<script>
protected
void
Page_Load(
object
sender, EventArgs e)
var folderArray = Directory.GetDirectories(
"~/IntranetDocumentLibrary"
,
"*.*"
,SearchOption.TopDirectoryOnly).ToList();
foreach
(var x
in
folderArray)
drpPath.Items.Add(x.ToString());
</script>
<asp:DropDownList ID=
"drpPath"
runat=
"server"
>
</asp:DropDownList>
Hello Charles,
You can bind the DropDown on the client, using server side code or service. You can use RadComboBox control, because there are many samples that you can reuse.
Greetings,
Ivan Dimitrov
the Telerik team
Hi
So, I got everything to work, and it well... It stopped working. I upgraded my project to SF4.2, and now it's not working...
Let me explain:
I have a control with a custom designer. On the designer I have 1 dropdown box, 1 textbox, and 6 checkboxes. The dropdown list and textbox workes. The values are passed through. But the checkboxes have changes from passing back a boolean to passing back "checked".
01.
applyChanges:
function
()
02.
03.
var
controlData =
this
.get_controlData();
04.
05.
controlData.Other = jQuery(
"#txtOther"
).val();
06.
controlData.libraryPath = jQuery(
"#drpPath"
).val();
07.
controlData.chkpdf = jQuery(
"#pdf"
).attr(
'checked'
);
08.
controlData.chkdoc = jQuery(
"#doc"
).attr(
'checked'
);
09.
controlData.chkdocx = jQuery(
"#docx"
).attr(
'checked'
);
10.
controlData.chkxls = jQuery(
"#xls"
).attr(
'checked'
);
11.
controlData.chkxlsx = jQuery(
"#xlsx"
).attr(
'checked'
);
12.
,
http://localhost:4467/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl01_TSM&compress=0&_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%3aen%3a7866b8a4-e0a8-4a7b-8304-35960ddd00f2%3a7ee0bb1f
Hi Charles,
Which example exactly did you use? If it is an example from the Products module, the module has been majorly changed in 4.2, so you will have to get the example from the new SDK.
If that's not the case - please send me your control so I can look for the problem.
Hi
The problem is that the designer is passing back the value 'checked' where it used to pass back a boolean value.
I have attached the output from firebug.
Here is the code I used:
DocumentListDesigner.js
Type.registerNamespace(
"SitefinityWebApp.common.UserControls.Documents.DocumentListDesigner"
);
SitefinityWebApp.common.UserControls.Documents.DocumentListDesigner =
function
(element)
SitefinityWebApp.common.UserControls.Documents.DocumentListDesigner.initializeBase(
this
, [element]);
SitefinityWebApp.common.UserControls.Documents.DocumentListDesigner.prototype =
initialize:
function
()
SitefinityWebApp.common.UserControls.Documents.DocumentListDesigner.callBaseMethod(
this
,
'initialize'
);
,
dispose:
function
()
SitefinityWebApp.common.UserControls.Documents.DocumentListDesigner.callBaseMethod(
this
,
'dispose'
);
,
refreshUI:
function
()
var
controlData =
this
.get_controlData();
jQuery(
"#txtOther"
).val(controlData.Other);
jQuery(
"#drpPath"
).attr(
'selected'
, controlData.libraryPath);
jQuery(
"#pdf"
).attr(
'checked'
, controlData.chkpdf);
jQuery(
"#doc"
).attr(
'checked'
, controlData.chkdoc);
jQuery(
"#docx"
).attr(
'checked'
, controlData.chkdocx);
jQuery(
"#xls"
).attr(
'checked'
, controlData.chkxls);
jQuery(
"#xlsx"
).attr(
'checked'
, controlData.chkxlsx);
,
applyChanges:
function
()
var
controlData =
this
.get_controlData();
controlData.Other = jQuery(
"#txtOther"
).val();
controlData.libraryPath = jQuery(
"#drpPath"
).val();
controlData.chkpdf = jQuery(
"#pdf"
).attr(
'checked'
);
controlData.chkdoc = jQuery(
"#doc"
).attr(
'checked'
);
controlData.chkdocx = jQuery(
"#docx"
).attr(
'checked'
);
controlData.chkxls = jQuery(
"#xls"
).attr(
'checked'
);
controlData.chkxlsx = jQuery(
"#xlsx"
).attr(
'checked'
);
,
get_controlData:
function
()
return
this
.get_propertyEditor().get_control();
,
get_propertyEditor:
function
()
return
this
._propertyEditor;
SitefinityWebApp.common.UserControls.Documents.DocumentListDesigner.registerClass(
'SitefinityWebApp.common.UserControls.Documents.DocumentListDesigner'
, Telerik.Sitefinity.Web.UI.ControlDesign.ControlDesignerBase);
if
(
typeof
(Sys) !==
'undefined'
) Sys.Application.notifyScriptLoaded();
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DesignerTemplate.ascx.cs"
Inherits="SitefinityWebApp.common.UserControls.Documents.DesignerTemplate" %>
<
script
type
=
"text/javascript"
>
$(document).ready(function ()
$('#dvDrop').load('/Common/UserControls/Documents/DesignerTemplateValues.aspx');
);
</
script
>
<
div
style
=
"width: 500px;"
>
<
span
>Library Path</
span
><
br
/>
<
div
id
=
"dvDrop"
>
</
div
>
<
span
>If other, please specify:</
span
><
br
/>
<
input
type
=
"text"
id
=
"txtOther"
/>
<
br
/>
<
br
/>
<
span
>Allowed file types:</
span
><
br
/>
<
table
>
<
tr
>
<
td
>
<
label
>
DocX</
label
>
</
td
>
<
td
>
<
input
id
=
"docx"
type
=
"checkbox"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Doc</
label
>
</
td
>
<
td
>
<
input
id
=
"doc"
type
=
"checkbox"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
XlsX</
label
>
</
td
>
<
td
>
<
input
id
=
"xlsx"
type
=
"checkbox"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Xls</
label
>
</
td
>
<
td
>
<
input
id
=
"xls"
type
=
"checkbox"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
label
>
Pdf</
label
>
</
td
>
<
td
>
<
input
id
=
"pdf"
type
=
"checkbox"
/>
</
td
>
</
tr
>
</
table
>
</
div
>
[ControlDesigner(
typeof
(common.UserControls.Documents.DocumentListDesigner)), PropertyEditorTitle(
"Library Properties"
)]
public
string
libraryPath
get
;
set
;
public
string
Other
get
;
set
;
public
bool
chkpdf
get
;
set
;
public
bool
chkdoc
get
;
set
;
public
bool
chkdocx
get
;
set
;
public
bool
chkxls
get
;
set
;
public
bool
chkxlsx
get
;
set
;
#region Visiblity
[Browsable(
false
)]
public
override
bool
EnableViewState
get
return
base
.EnableViewState;
set
base
.EnableViewState = value;
[Browsable(
false
)]
public
override
ClientIDMode ClientIDMode
get
return
base
.ClientIDMode;
set
base
.ClientIDMode = value;
[Browsable(
false
)]
public
override
bool
EnableTheming
get
return
base
.EnableTheming;
set
base
.EnableTheming = value;
[Browsable(
false
)]
public
override
string
ID
get
return
base
.ID;
set
base
.ID = value;
[Browsable(
false
)]
public
override
ViewStateMode ViewStateMode
get
return
base
.ViewStateMode;
set
base
.ViewStateMode = value;
[Browsable(
false
)]
public
override
bool
Visible
get
return
base
.Visible;
set
base
.Visible = value;
#endregion
public
string
folderPath =
"~/[DocumentLibrary]/"
;
public
string
filePath =
"/[DocumentLibrary]/"
;
public
string
SortBy =
"DateModified desc"
;
public
static
int
ItemsPerPage = 50;
public
static
string
fSort =
""
;
public
static
string
sSort =
""
;
public
static
string
dSort =
""
;
Hello Charles,
I tested it and indeed - the property has been changed to return string. To fix this, you can just use the property "isChecked" instead of "checked":
controlData.chkpdf = jQuery(
"#pdf"
).attr(
'isChecked'
)
Hi Svetoslav
Thanks for the reply. I have tried your suggestion, but it still does not work.
I am also still getting "validator is undefined" from one of the SF axd files(localhost:4721/Telerik.Web.UI.WebResource.axd
Is there another way/workaround for ths?
Thanks
Charles D.
Hello Charles,
I used the control from this article to test your issue, it really reproduced on 4.2, but after changing "checked" with "isChecked" no further problem was caused.
The only way I can tell why this isn't working for you is if you share your control so I can test it locally.