DevExpress: How do get an instance of a control client-side and access its client-side members?

问题

I have a DateEdit control from DexExpress and need to get the date value from it using Javascript. Conceptually, I am looking for something like this:

var d = $("dpEndDate").GetDate();

Their API reference indicates that .GetDate() is a member, but I just need to know how to acquire a client-side instance of the object that contains this member.

回答1:

It is necessary to specify the ClientInstanceName property (for the ASP.NET WebForms) and the “Name” property (for the ASP.NET MVC) to enable control’s client-side programmatic object:

<dx:ASPxDateEdit ... ClientInstanceName="de">
</dx:ASPxDateEdit>

var date = de.GetDate();

回答2:

If you're developing a user control based on multiple DevExpress controls that need to be able to interact with each other and you're going to have more than one instance of your user control on a given page, then it is best to use DevExpress' window.aspxGetControlCollection() with the ClientID of the DevExpress control like so:

window.aspxGetControlCollection().elements[clientID];

The downside of this is that you've typically got to build client side event handlers in the code behind where you've got easy access to the DevExpress control ClientIDs like so.

ASPxGridView.ClientSideEvents.EndCallback = "function(s,e) { window.aspxGetControlCollection().elements['" + SomeOtherDevExpressControl.ClientID + "'].PerformCallback('callbackArg'); }";

Either that or create a JS object to handle your client side actions and override the render method to add a some script to create this instance with the needed ClientIDs.

JS Instance:

window.ClientControl = function(SomeOtherDevExpressControlClientId)
{
    this.SomeOtherDevExpressControlClientId = SomeOtherDevExpressControlClientId;
    this.SomeOtherDevExpressControl() = function(){ return window.aspxGetControlCollection().elements[this.SomeOtherDevExpressControlClientId]; }
    this.GridEndCallback = function(s,e) { this.SomeOtherDevExpressControl().PerformCallback('callbackArg'); }
}

Render Override:

proteced override void Render(HtmlTextWriter writer)
{
    base.Render(writer);
    writer.WriteLine();
    writer.WriteBeginTag("script");
    writer.WriteAttribute("type", "text/javascript");
    writer.Write(">");
    writer.WriteLine("window['" + UserControl.ClientInstanceName+ "'] = new ClientControl('" + SomeOtherDevExpressControl.ClientID + "');");
    writer.WriteEndTag("script");

}

With the second method there's an assumption that you added a public string attribute ClientInstanceName to your user control and have given that a value in the markup.

回答3:

Try:

var d = $("#<%=dpEndDate %>").GetDate();

The reason is that ASP.NET ClientIDs are qualified by their naming-container in the control tree, so may end up as something like "ctl1_ct12_ct12_dpEndDate".

You can get ASP.NET 4.0 to not use this hierarchical naming, but it's on by default.

来源：https://stackoverflow.com/questions/7808230/devexpress-how-do-get-an-instance-of-a-control-client-side-and-access-its-clien

标签

ASP.NET

api

devexpress

client-side