CKEditor wih AjaxControlToolkit's ModalPopup - asp.net

I have got *.ascx control with Ckeditor embedded by using CKEditor's control for ASP.NET (v 3.6.4). I have also ModalPopup control from AjaxControolToolkit4.5, attached to Link Button. When clicked, it shows panels with Radio Button list filled in with the aid of some code behind logic.
How should I change my *.ascx control to have a CKEditor'a plugin button in toolbar, firing this ModalPopup?
Code (not working):
<%# Control Language="C#" AutoEventWireup="true" CodeFile="CKEditorWithModalPopup.ascx.cs" Inherits="Controls_CKEditorWithModalPopup" %>
<%# Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<script type="text/javascript">
$(function () {
var a = {
exec: function (editor) {
javascript: __doPostBack('ctl03$LinkButton1', '') // explicite id for test
}
},
b = 'modalPopup';
CKEDITOR.plugins.add(b, {
init: function (editor) {
editor.addCommand(b, a);
editor.ui.addButton("modalPopup", {
label: 'Modal Popup',
icon: "~/Images/modal_popup.png",
command: b
});
}
});
});
</script>
<CKEditor:CKEditorControl ID="CKEditor1" BasePath="~/ckeditor" Toolbar="Basic" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="LinkButton1"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton"
CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" />
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black">
<div>
<p>
Choose the phrase to insert:</p>
</div>
</asp:Panel>
<asp:RadioButtonList ID="rbList" runat="server" />
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</asp:Panel>

I found better solution for CKEditor modal popup functionality - I decided to write it as CKEditor plugin. It is much easier and maintainable approach.
Creating a CKEditor Plugin with a Custom Dialog Window
The purpose of this answer is to close the old question.

Related

User control as Image button

I have created user control with label and image
i need raise event when click on the user control
when click on the div which contain the label and image
user control code is bellow
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ImageButton.ascx.cs" Inherits="AdvancedGrid.UC.ImageButton" %>
<div id="divClickableDiv" runat="server">
<div>
<asp:Image ID="Button_Image" ImageUrl="" runat="server" />
</div>
<div>
<asp:Label ID="Button_Text" runat="server" Text="Button"></asp:Label>
</div>
</div>
why not use use ImageButton control instead of Image if that is what you need? Try something like this:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ImageButton.ascx.cs" Inherits="AdvancedGrid.UC.ImageButton" %>
<div id="divClickableDiv" runat="server">
<div>
<asp:ImageButton ID="Button_Image" ImageUrl="" runat="server" OnClick="Button_Image_Click" />
</div>
<div>
<asp:Label ID="Button_Text" runat="server" Text="Button"></asp:Label>
</div>
</div>
- OnClick="Button_Image_Click" takes you to code behind where you can go to any URL you want like this:
protected void Button_Image_Click(object sender, EventArgs e)
{
Response.Redirect("~/page.aspx");
}
- or instead of OnClick and without code-behind try:
<asp:ImageButton ID="Button_Image" ImageUrl="" runat="server" OnClick="window.location.href = '<%= ResolveUrl("~/page.aspx") %>'" />
or
<asp:ImageButton ID="Button_Image" ImageUrl="" runat="server" OnClientClick="window.location.href='page.aspx'; return false;" />

link button click not getting fired

I am sorry I am repeating this question. Rather, I am having to repeat it. The last time I posted this, I dint get an answer. I have googled for more than 3 hrs, dint find an answer. Heres the html for the linkbutton and the modal popup. The link button is inside/on a tab panel and auto postback is set to true.
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClick="lnkAddNewAddress_Click">Click Here To Add New Address</asp:LinkButton>
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled" >
</asp:ModalPopupExtender>
I want the clickevent of the linkbutton to fire which is not happening. However clicking on the link does open the modal popup extender (which is also something I want)... How do I get into the click event. I know that a postback is being avoided here because of the modal popup probably...but I dont the solution for it....
The code on save button:
if(hdnfld.Value.ToString()!=null)
{
if(hdnfld.Value.ToString()=="Save")
{
SaveNewAddress();
}
else
{
UpdateAddress();
}
<%# Page StylesheetTheme="" Title="" Language="C#" MasterPageFile="~/Site.Master"
AutoEventWireup="true" CodeBehind="frmMyAccountMyProfile.aspx.cs" Inherits="WebApplication1.frmMyAccountMyProfile" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function CheckType(type)
{
document.getElementById("hdnfld").value = type;
alert(document.getElementById("hdnfld").value);
return false;
}
</script>
<link href="Styles/myStyleSheet.css" rel="stylesheet" type="text/css" />
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div class="divwrap">
<table style="width: 100%; margin-right: 0px;">
<tr>.........
<td>
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('Save');">Click Here To Add New Address</asp:LinkButton>
<asp:HiddenField ID="hdnfld" runat="server" />
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground" DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled">
</asp:ModalPopupExtender>
...........
<asp:Button ID="btnEdit" runat="server" CssClass="roundcorner btn" OnClick="btnEdit_Click" OnClientClick="return CheckType('Edit');" Text="Edit" />
<asp:Panel ID="pnlMyAddressBook" runat="server" BackColor="White" CssClass="roundcorner">
you can use hidden field instead of viewstate, if you really want to retain some value at code behind. You can access hidden field at client side as well as in code behind too.
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('save');">Click Here To Add New Address</asp:LinkButton>
<asp:HiddenField ID="hdf_type" runat="server" />
Javascript code
function CheckType(type) {
document.getElementById("hdf_type").value = type;
return false;
}
Access value in code behind when clicked on save button, and perform your action save or update according to value in hidden field.
hdf_type.Value.ToString();
MORE HELP FOR YOU
HTML FILE SHOULD LOOK LIKE THIS
below i'm posting the whole code which is working fine for me.
<head runat="server">
<title></title>
<script type="text/javascript">
function CheckType(type) {
document.getElementById("hdf_type").value = type;
alert(document.getElementById("hdf_type").value);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClientClick="return CheckType('save');">Click Here To Add New Address</asp:LinkButton>
<asp:Button ID="btn" runat="server" OnClientClick="return CheckType('edit');" Text="Click Here To Add New Address" />
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="lnkAddNewAddress"
ViewStateMode="Enabled">
</asp:ModalPopupExtender>
<div id="pnlMyAddressBook" style="height: 100px; width: 100px; display: none; background-color: Gray">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
</div>
<asp:HiddenField ID="hdf_type" runat="server" />
</div>
</form>
getting value at code behind:
Try this:
<asp:LinkButton ID="lnkAddNewAddress" runat="server" OnClick="lnkAddNewAddress_Click">Click Here To Add New Address</asp:LinkButton>
<asp:ModalPopupExtender ID="lnkAddNewAddress_ModalPopupExtender" runat="server" BackgroundCssClass="modalBackground"
DynamicServicePath="" Enabled="True" PopupControlID="pnlMyAddressBook" TargetControlID="btnHidden">
</asp:ModalPopupExtender>
<asp:Button ID="btnHidden" runat="server" style="Display:none;" Text="Button"/>
In Code behind:
protected void lnkAddNewAddress_Click(object sender, EventArgs e)
{
lnkAddNewAddress_ModalPopupExtender.Show();
}

Launch modal popup extender when button is pressed

I have a button setup to export my gridviews to word. Everything works fine, except I cannot find a way to launch/cancel my modalpopupextender I use to show that processing is happening. If I add it the button click:
btnExportToWord.Attributes.Add("onclick", "StartProgressBarNoValid()") it does not canel the modalpopupextender
Here is the update panel and the javascript function I use.
function StartProgressBarNoValid() {
var myExtender = $find('ProgressBarModalPopupExtender');
ProgressImg = document.getElementById('MyImage');
setTimeout("ProgressImg.src = ProgressImg.src", 10);
myExtender.show();
return true;
}
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<cc1:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
backgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender"
TargetControlID="hiddenField1" PopupControlID="Panel1" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
<img id="MyImage" src="../Images/Vista_Searching_Bar.gif" alt="" />
<div id="processMessage" style="width:200px;" ><br /><br /> Loading...<br /><br />
</div>
</asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
what is wrong with ProgressBarModalPopupExtender.Show() and ProgressBarModalPopupExtender.Hide() from the codebehind?

Calendar extender is not working

I have a requirement to show edit panel as second row of a datagrid upon addnew link click. for this I have taken a div which has set display:none. I am able to show as second row upon addnew link click. now the actual problem starts.
this div got a text box which is tied to calendar extender to behave as a claendar upon textbox click. but calendar is not showing up when the html of invisible div is inserted as second row of grid. please let me know if anyone need code for better understanding the problem. any help will be appreciated.
In your gridview put a templatedfield instead of a div. make that templated field hold a textbox and calender extender.
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
but If you want it when your inserting you should put
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</ItemTemplate>
<InsertItemTemplate>
<asp:TextBox ID="textbox1" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" TargetControlID="textbox1" runat="server">
</asp:CalendarExtender>
</InsertItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I hope this helps.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function AddCalendars()
{
//The last parameter should be the TargetControl's id. If you use "TextBox1", the TextBox1 would be associated.
var elem = $(".deneme");
for (var a = 0; a < elem.length; a++)
{
if ($find("CalendarExtender" + elem[a].id))
{
$find("CalendarExtender" + elem[a].id).dispose();
}
}
for (var i = 0; i < elem.length; i++)
{
$create(AjaxControlToolkit.CalendarBehavior, { "id": "CalendarExtender" + elem[i].id }, null, null, elem[i]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<%--the dummy calendar which is used to download the related script file.--%>
<asp:TextBox ID="dummyTextBox" runat="server" Style="display: none"></asp:TextBox>
<AjaxControlToolkit:CalendarExtender ID="dummyCalendarExtender" runat="server" Enabled="True"
TargetControlID="dummyTextBox">
</AjaxControlToolkit:CalendarExtender>
<%--the dummy calendar which is used to download the related script file.--%>
<asp:Button ID="Button1" OnClientClick="AddCalendars();return false" runat="server"
Text="CreateCalendarFromClient" /><br />
input:<input id="deneme1" type="text" class="deneme" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
TextBox:
<asp:TextBox ID="deneme2" runat="server" cssclass="deneme" ClientIDMode="Static"></asp:TextBox>
</div>
</form>
</body>
</html>

Trouble with passing a value from asp.net checkbox or textbox to server from simplemodal window

Hello all I am having a peculiar problem. In a test aspx (webform) I created the following. two checkboxes and some jQuery to hide or reveal the second one if the primary one was clicked. I then added a button that allowed me to render in the page the values of each checkbox to ensure that they are null.
Aspx
<head runat="server">
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript">
$(function () {
$('#cb2').hide();
$('#cb1').click(function () {
if ($('#cb1').is(":checked")) {
$('#cb2').show('fast');
}
else {
$('#cb2').hide();
$('#cb2').removeAttr('checked');
}
});
});
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptManger1" runat="server"></asp:ScriptManager>
<div id="cbHolder">
<asp:CheckBox Text="checkbox 1" ID="cb1" runat="server" />
<asp:CheckBox Text="checkbox 2" ID="cb2" runat="server" />
<asp:Button ID="checkBtn" runat="server" Text="get value" OnClick="checkBtn_Click" />
<br />
<asp:Label ID="lbl_Values" runat="server" />
</div>
</form>
CodeBehind aspx.cs
protected void checkBtn_Click(object sender, EventArgs e)
{
lbl_Values.Text = cb1.Checked.ToString() + cb2.Checked.ToString();
}
This all works fine
However I have now added this same content to my project and instead of it being in the form the content is now in a SimpleModal window.
aspx
<div id="save-modal-content">
<asp:Label ID="ssHeader" runat="server" Text="<%$ Resources:InformResources, SaveSearch_lbl %>" />
<br />
<div class="ssContainer">
<div class="ssLabel">
<asp:Label Text="<%$ Resources:InformResources, Name_lbl %>" runat="server" /></div>
<div>
<asp:TextBox CssClass="ssTextBox" ID="txt_ssname" runat="server" /></div>
</div>
<br />
<div class="ssContainer">
<div class="ssLabel">
<asp:Label Text="<%$ Resources:InformResources, DescFull_lbl %>" runat="server" /></div>
<div>
<asp:TextBox CssClass="ssTextBox" ID="txt_ssDescription" runat="server" /></div>
</div>
<br />
<div class="ssContainer">
<div class="ssLabel">
<asp:Label Text="<%$ Resources:InformResources, Query_lbl %>" runat="server" /></div>
<div>
<asp:TextBox CssClass="ssQueryBox" ID="txt_ssQueryText" runat="server" Rows="6" TextMode="MultiLine" /></div>
</div>
<hr class="invisiblehr" />
<div id="cb1" class="cbHolder">
<asp:CheckBox ID="cb_Notifiy" OnCheckedChanged="cb_click" runat="server" Text="I wish to receive notificaions on this search" />
</div>
<br />
<div id="cb2" class="cbHolder">
<asp:CheckBox ID="cb_Email" runat="server" Text="I wish to receive notifications via email" />
</div>
<hr class="invisiblehr" />
<div class="saveButtonContainer">
<asp:LinkButton ID="ssSaveButton" CssClass="advButtons" Text="Save" OnClick="ssSaveButton_Click"
runat="server" />
Cancel
</div>
</div>
js file
$(function () {
$('#cb_Notifiy').click(function () {
if ($('#cb_Notifiy').is(":checked")) {
$('#cb2').show('fast');
}
else {
$('#cb2').hide();
$('#cb_Email').removeAttr('checked');
}
});
And code behind
public void ssSaveButton_Click(object sender, EventArgs e)
{
txt_ssname.Text = cb_Notifiy.Checked.ToString() + cb_Email.Checked.ToString();
string foo = txt_ssname.Text.ToString();
}
code to call Simple modal window
//SimpleModal Save Dialog
$(function () {
$('#btnSave').click(function (e) {
var searchtrm = $('#tbsearchterm').val();
if (searchtrm == "Enter Search Term" || $.trim(searchtrm) === "") {
$('#alert-modal-content').modal({ overlayClose: false, close: false, containerId: 'alert-container' });
$('<b>Whoops!</b><br/><br/><span>Before you can save your search you need to enter a search term or query.</span>').appendTo('#alertTerm');
}
else {
$('#txt_ssQueryText').val(searchtrm);
$('#save-modal-content').modal({ overlayClose: false, close: false, containerId: 'saveSearch-container' });
}
});
});
Aside from a few tags changing the code is relatively the same. However within the project whenever the save button is clicked the method is called but all values (checkboxes, textboxes) are null.
Can anyone help me figure out why it works in one project but not the other.
Thanks in advance
Discovered the answer to my question here from a previous SO post
In short simple modal out of the box appends the content to the body of the document. This is outside of the form tag which is why the elements could not be found. Simple modal offers a property call appendTo which for asp.net use appendTo: 'form'. Adding this tag will allow for properties as well as calls to be made to the code behind.
Thanks

Resources