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%3a7ee0bb1fHi 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.