I'm puzzled by the CSOM documentation, and am not sure what method/properties I should be using. I'd like to use a webdialogwindow to display client side messages (as a better formatted version of Confirm/Alert). I can populate its contents server side easily enough, but I'd like the option of filling it on the client end too.
I don't want to give it a URL, I want to edit the content of an existing control within the content pane (labels or asp:Literal or suchlike).
I am doing something similar. I have a userControl with a label inside the WebDialogWindow content pane template. Then I use jQuery to manipulate the content. My javascript "Alert" function is:
function wjDlgMsg_show(sCaption, sMsg, sHeight){ // get the dialog var dialog = $find("ctlDlgMsg_dlgIMsg"); // use jQuery to set the caption $("#ctlDlgMsg_dlgIMsg .igdw_wgOfficeBlueHeaderCaption").text(sCaption);
// use jQuery to set the label content (as html) $("#ctlDlgMsg_dlgIMsg .lblPopMsg").html(sMsg);
// show the dialog dialog.show();
// set dialog height. Could not figure out how to calculate it automatically // NOTE: docs say parameters are height, width, ... // actual parameters are: width, height, ... if (sHeight != "") dialog.setSize(null, sHeight, null); // Can also set the caption here (must be done after dialog is shown) //dialog.get_header().setCaptionText(sCaption);}
Thanks. I eventually came up wqith something similar, though not as elegant (I'm not that familiar with JQuery yet). But I did get what I wanted.
I"m assuming the JQuery lines are literals created using $find('<%=dlgMessage.ClientID%>') style syntax - an you show me the original source lines please?
Hi Victor,
Thanks for the sample. Most of my production code is server-centric, but I am slowly evolving it into a more client-centric architecture. Your sample helps.
By the way, my profile is set up to receive emails, but I am getting any emails. Do you perhaps know what I need to do?
Hi Greg,
I wrote a sample for you which create child elements in dialog dynamically. You can do similar at any time. Below is ClientEvents.Loaded was used.
<script type="text/javascript">function clickMe(){ var field = $get('dynamicFieldID'); var message = 'Button click'; if(field) message += ' Field:' + field.value; alert(message);}function createChildren(dialog, evtArgs){ var div = dialog.get_contentPane().getBody(); var button = document.createElement('INPUT'); button.type = 'button'; button.value = 'Dynamic Button'; button.onclick = clickMe; div.appendChild(button); var field = document.createElement('INPUT'); field.value = 'enter value'; field.id = 'dynamicFieldID'; div.appendChild(field);}</script><ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Height="200px" Width="200px" InitialLocation="Centered"> <ClientEvents Loaded="createChildren" /></ig:WebDialogWindow>
Actually, the javascript function is actual code. (no <%...%>). The aspx lines are:
<%@ Register src="uc/ucjDlgMsg.ascx" tagname="ucDlgMsg" tagprefix="ucClientDlg" %>...<ucClientDlg:ucDlgMsg ID="ctlDlgMsg" runat="server" />
and the actual user control is:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucjDlgMsg.ascx.cs" Inherits="WebGen.ucjDlgMsg" %><%@ Register TagPrefix="cc1" Namespace="Infragistics.Web.UI.LayoutControls" Assembly="Infragistics35.Web.v9.2, Version=9.2.20092.2056, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" %><asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server"></asp:ScriptManagerProxy><cc1:WebDialogWindow ID="dlgIMsg" runat="server" InitialLocation="Centered" Moveable="False" Width="380px" Modal="True" StyleSetPath="~/ig_res/" StyleSetName="wgOfficeBlue" WindowState="Hidden"> <Header CaptionText="hello"> </Header> <ContentPane ScrollBars="Hidden"> <Template> <asp:Panel ID="dlgIMsg_pnClient" runat="server" Style="position: relative; left: 0px; top: 0px; width: 100%; height: 100%" BackColor="#EFF3FA" Font-Size="10pt"> <br /> <div align="center"> <asp:Label ID="dlgIMsg_msg" runat="server" Width="340px" Text="" CssClass="lblPopMsg"></asp:Label> <br /> <br /> <asp:Panel ID="dlgIMsg_pnLine" runat="server" Width="100%" Height="1px" BackColor="#00428C"> </asp:Panel> <asp:Button ID="dlgIMsgBtnClose" runat="server" Text="Close" Width="60px" Font-Size="8pt" CssClass="dlgIMsgCloseButton" OnClientClick="return wjDlgMsg_onClick();" /> </div> </asp:Panel> </Template> </ContentPane></cc1:WebDialogWindow>