Referencing properties of a composite control?

[FancyPrairie]

I'm trying to create a composite control that behaves like the combobox in Access. I have added several properties to the composite control that I can get/set at design time (Visual Studio 2005). The problem is that I don't know how to reference these "custom" properties within a javascript function.

For example, the control's name is MyComboBox and it contains 4 children: A label (lblComboBox), a text field (txtComboBox), a list box (lstComboBox), and an image (imgComboBox). MyComboBox contains a property (LimitToList) that is declared as boolean. How do I reference this property via javascript?

 

[BillyRayPreachersSon]

Without knowing VS controls, and without seeing any code, I'd find it hard to comment. Can you post the client-side code for a small test harness with one of your controls?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[FancyPrairie]

Not sure what exactly you want to see. But here's how I create the composite control:

    <ToolboxData("<{0}:MyComboBox runat=server></{0}:MyComboBox")> _
    Public Class MyComboBox

        Inherits CompositeControl
        Implements IValidator
        Implements ICallbackEventHandler

        Public Sub New()
            Me.Width = Unit.Pixel(400)
            Me.Height = Unit.Pixel(460)
        End Sub

        Private lblComboBox as New Label
        Private txtComboBox as New TextBox
        Private lstComboBox as New ListBox
        Private imgComboBox as New Image

        Protected Overrides Sub CreateChildControls()

            '**************************************
            '*  Set the child controls' ID names  *
            '**************************************

            lblComboBox.ID = "lblComboBox"
            txtComboBox.ID = "txtComboBox"
            lstComboBox.ID = "lstComboBox"
            imgComboBox.ID = "imgComboBox"

            ...
            txtComboBox.Attributes.Add("onblur", "MyComboBox_OnBlur()")
            ...
        End Sub

This is the code that creates the LimitToList property:

        <Category("ListBox"), Description("Specify the Data Source"), _
        PersistenceMode(PersistenceMode.InnerProperty)> _
        Public Property LimitToList() as Boolean
            Get
                If CType(ViewState("LimitToList"), Object) Is Nothing Then return True
                Return DirectCast(ViewState("LimitToList"), Boolean)   'maintained accross postback
            End Get

            Set(ByVal value As Boolean)

                ViewState("LimitToList") = value
                Me.ChildControlsCreated = False         '(Dirty Flag) Forces page to rerun the CreateChildControls in design view so user can see change take effect
            End Set
        end Property

Now, if you notice that when the control is built I add the onBlur event to the text box (I would rather add it to the Composite control, but don't know how). So, when the text box looses focus, the javascript function MyComboBox_OnBlur is executed. Within the javascript code, I need to reference the LimitToList property of my composite control. But I don't know how to reference it. I look at the control in debug and don't see any of the "custom" properties I defined.

 

[Olavxxx]

That is server-side..

In your client (IE, FF or whatever), take view->> source

Then you copy the code for the appropriate control

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

 

[BillyRayPreachersSon]

Yup... "client-side" != "server-side".

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[FancyPrairie]

I know what I showed you is server-side. It is the javascript function that is referenced by the line of code:
txtComboBox.Attributes.Add("onblur", "MyComboBox_OnBlur()")

function MyComboBox_OnBlur()
{
   var bolExample;
   bolExample = MyComboBox.LimitToList;
}

How do I reference MyComboBox.LimitToList

 

[BillyRayPreachersSon]

Show us the client-side code for the control itself and we might be able to help you. Otherwise, you might try asking in the .Net forum.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[FancyPrairie]

I wasn't sure in which forum I should ask the question. Anyway, here's how the control is defined.

<body>
    <form id="form1" runat="server"  >
        <div>
            ...
            <wbs:MyComboBox  ID="MyComboBox1" runat="server" DataSourceID="SqlDataSource1" DataTextField="strFullNamePhone" DataValueField="lngEmpID" Height="244px" Style="z-index: 104; left: 381px; position: absolute; top: 60px" Width="224px">
            </wbs:MyComboBox>
        </div>
    </form>
</body>

Note the DataSourceID, DataTextField, and DataValueField custom properties. I'm not able to reference those within javascript.

This what the code looks like after rendering:

<span id="MyComboBox1" style="display:inline-block;height:244px;width:224px;z-index: 104; left: 381px; position: absolute; top: 60px"><div style='width: 100%; height: 100%'><table cellpadding='0' cellspacing='0' border='0' style=' width: 100%; height: 100%;' ><tr style='border-right: inactivecaption 1px solid; border-left: inactivecaption 1px solid; border-top: inactivecaption 1px solid; border-bottom: inactivecaption 1px solid;'><td><span id="MyComboBox1_lblComboBox" style="display:inline-block;width:20px;">Select:</span></td><td style='width: 100%'><input name="MyComboBox1$txtComboBox" type="text" id="MyComboBox1_txtComboBox" onblur="MHSListBox_OnBlur()" onFocus="MMC_highlightToEnd(this,0)" onKeyPress="MHSListBox_OnKeyPress(this,false)" style="width:100%;overflow:hidden;" /></td><td style='z-index: 106; top: -2px; position: relative; vertical-align: middle; left: 1px;'   /><img id="MyComboBox1_imgComboBox" src="/AJAXEnabledWebSite1/WebResource.axd?d=LUnTWH3Ak7Hq2boS9QIzP39cK_XyaayY0s-vUPz3CXMQK4wRyI-DEhK1aO3cPqbT0&amp;t=633197653192778001" style="width:100%;border-width:0px;" /></td></tr><tr><td></td><td style='top: -10px; height: 100%' colspan='2'><select size="4" name="MyComboBox1$lstComboBox" id="MyComboBox1_lstComboBox" onblur="MHSListBox_OnBlur(MyComboBox1,'True','MyComboBox1_lstComboBox')" style="height:0%;width:100%;">

</select></td></tr></table></div></span>

 

[BillyRayPreachersSon]

Given that there's no "LimitToList" form field, and we can see no JS "controller" for the control, perhaps it isn't possible?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]