воскресенье 19 апреля22.08.2017/admin

Ajax Popup Control Extender In Asp.net

In this blog we will see how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, showing/displaying/calling the modal popup from a hyper link control within the gridview control and finally some important javascript methods of the ASP.NET AJAX ModalPopupExtender control. Introduction: This article helps you more to explore the ModalPopup Extender integrated with Asp.Net GridView control. By reading this article, you will understand the way to show dynamic data in the ModalPopup, edit the data in the ModalPopup extender and save it into database by making a postback.

ajax control toolkit(modal popup)

Posted by: yamamoto-hideki on 8 September 2017, 10:28 am EST

- Post Options:
Posted 8 September 2017, 10:28 am EST
Hello.
I want to ajax control toolkit(modal popup) when user click spread's particular cell.
Is it possible?
- Post Options:
Replied 8 September 2017, 10:28 am EST
There's really not much to this.

All you need to do is trap whatever spread event you want on the client side and then add this code:

var ss = document.getElementById('FpSpread1');
ss.UpdatePostbackData();
ss.CallBack('PopMyDialog');

On the server side, catch teh button command and pop the dialog.

Protected Sub ss_ButtonCommand(ByVal sender As Object, ByVal e As FarPoint.Web.Spread.SpreadCommandEventArgs) Handles ss.ButtonCommand
Dim sv As SheetView = ss.Sheets(0)

If e.CommandName = 'PopMyDialog' Then
MyDialog.Show()
End If
End Sub

Alternatively, you can pop the dialog from the client as well.

Hope this helps .. Ed
- Post Options:
Replied 8 September 2017, 10:28 am EST
I'm sorry that I using version 3.

Thank you for reply.
- Post Options:
Replied 8 September 2017, 10:28 am EST
If you are using version 4 then you can add the Extender dll to your project and create celltypes that are based on the Ajax Control toolkit members.

Post Options:

Replied 8 September 2017, 10:28 am EST

It helps but i can´t execute it because it makes an error:

'Error 1 Handles clause requires a WithEvents variable defined in the containing type or one of its base types. '

'Error 2 Name 'ss' is not declared. ' Free daz 3d model kids.

From the client side i can open the modal popup, but if i can open from the server side better, because in this modal will charge data from the database and to do that from the client side it will be complex, and my javascript nivel is very low.

Here is my code:

.aspx


</pre><p> <script language='javascript' type='text/javascript'>
 function openwin()
 {
 var val = FpSpread1.GetValue(FpSpread1.ActiveRow, 1);
 window.open('http://www.fpoint.com?param1=' + val,'_blank', 'width=500,height = 50');
 return false;
 }
 function ShowModal()
 {
 var modal=$find('ModalPopUP');
 var ss = document.getElementById('FpSpread1');
 ss.UpdatePostbackData();
 ss.CallBack('PopMyDialog');
 //modal.show();
 }
 function HideModalPopup()
 {
 var modal = $find('ModalPopUP');
 modal.hide();
 }
 </script>
</head>
<body>
 <form runat='server'>
 <asp:ScriptManager runat='server'>
 </asp:ScriptManager>
 <FarPoint:FpSpread runat='server' BorderColor='Black' 
 BorderStyle='Solid' BorderWidth='1px' Height='200' Width='400'>
 <commandbar backcolor='Control' buttonfacecolor='Control' 
 buttonhighlightcolor='ControlLightLight' buttonshadowcolor='ControlDark'>
 </commandbar>
 <sheets>
 <FarPoint:SheetView SheetName='Sheet1'>
 </FarPoint:SheetView>
 </sheets>
 </FarPoint:FpSpread>
 <asp:Panel runat='server' CssClass='modalWindow' Width='300' Height='150'>
 <asp:Label runat='server' Text='Escribe algo'></asp:Label> 
 <asp:TextBox runat='server'></asp:TextBox>
 <asp:Button runat='server' Text='Aceptar' />
 <asp:Button runat='server' Text='Cerrar' />
 </asp:Panel>
 <asp:LinkButton runat='server' Text='FakePopup' />
 <asp:LinkButton runat='server' Text='FakeUpdate' />
 <asp:LinkButton runat='server' Text='FakeCancel' />
 <cc1:roundedcornersextender 
 TargetControlID='panelPopup' runat='server' BorderColor='black' Radius='6'>
 </cc1:roundedcornersextender>
 <cc1:modalpopupextender runat='server' 
 BackgroundCssClass='modalBackground' TargetControlID='popupExe' 
 PopupControlID='panelPopup' OnCancelScript='HideModalPopup()' 
 CancelControlID='Cerrar'>
 </cc1:modalpopupextender>
 </form>
</body>
 And the aspx.vb code
Partial Class PruebaModal
 Inherits System.Web.UI.Page
 Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
 If IsPostBack Then Return
 Dim test As New MyLinkType
 FpSpread1.Sheets(0).Columns(0).Label = 'Click this column'
 FpSpread1.Sheets(0).Columns(0).CellType = test
 FpSpread1.Sheets(0).SetValue(0, 1, 'Test0')
 FpSpread1.Sheets(0).SetValue(1, 1, 'Test1')
 FpSpread1.Sheets(0).SetValue(2, 1, 'Test2')
 Dim ModalDialog As New MyModalPopUp
 FpSpread1.Sheets(0).Columns(1).CellType = ModalDialog
 End Sub
 Protected Sub ss_ButtonCommand(ByVal sender As Object, ByVal e As FarPoint.Web.Spread.SpreadCommandEventArgs) Handles ss.ButtonCommand
 Dim sv As SheetView = ss.Sheets(0)
 If e.CommandName = 'PopMyDialog' Then
 ModalPopUP.Show()
 End If
 End Sub
 <Serializable()> Public Class MyLinkType
 Inherits FarPoint.Web.Spread.GeneralCellType
 Public Overrides Function PaintCell(ByVal id As String, ByVal parent As System.Web.UI.WebControls.TableCell, ByVal style As FarPoint.Web.Spread.Appearance, ByVal margin As FarPoint.Web.Spread.Inset, ByVal value As Object, ByVal upperLevel As Boolean) As System.Web.UI.Control
 parent.Attributes.Add('onclick', 'openwin()')
 Return MyBase.PaintCell(id, parent, style, margin, value, upperLevel)
 End Function
 End Class
 <Serializable()> Public Class MyModalPopUp
 Inherits FarPoint.Web.Spread.GeneralCellType
 Public Overrides Function PaintCell(ByVal id As String, ByVal parent As System.Web.UI.WebControls.TableCell, ByVal style As FarPoint.Web.Spread.Appearance, ByVal margin As FarPoint.Web.Spread.Inset, ByVal value As Object, ByVal upperLevel As Boolean) As System.Web.UI.Control
 parent.Attributes.Add('onclick', 'ShowModal()')
 Return MyBase.PaintCell(id, parent, style, margin, value, upperLevel)
 End Function
 End Class
End Class

Thank you very much

- Post Options:
Replied 8 September 2017, 10:28 am EST
<BLOCKQUOTE><div><img src='/wp-content/uploads/CS_images/icon-quote.gif'> BobM:</div><div>If you are using version 4 then you can add the Extender dll to your project and create celltypes that are based on the Ajax Control toolkit members.
</div></BLOCKQUOTE>
Can you give me some code to start with?
I want to do a modal popup, if is ajax modal popup better, that will be opened when a user clicks on a cell, then the user should select a value from a list and then this value will return to the cell that has open the window, it is possible to do that?
Thank you
- Post Options:
Replied 8 September 2017, 10:28 am EST
David,
You may catch the onMouseDown event of Spread client side and use the following code to perform following code to know which cell of Spread was right clicked.

function MyMouseDown() {
var ss = document.all('FpSpread1');
var row = event.srcElement.parentElement.rowIndex;
var col = event.srcElement.cellIndex
if (event.button 2) {
alert(col+' '+row);
}
}
Thanks,
- Post Options:
Replied 8 September 2017, 10:28 am EST
I followed the code fragments in these series of posts and have the following questions:
1. I get an invalid type on Dim sv AS SheetView. What is the correct declaration
2. MyDialog.Show is not working
3. How can I modify this code to trap a mouse right click on a particular cell so that a modal popup shows.
Thanks,

David
- Post Options:
Replied 8 September 2017, 10:28 am EST
Hello Deepak,

Thanks for getting back to me. I followed your suggestions for 1-3 and everything worked. Now I have one more question which is now that I trap the right mouse event how can I find out what cell I was in when the right mouse was clicked?

Thanks,

David
- Post Options:
Replied 8 September 2017, 10:28 am EST
Hello,

In your declaration of the ButtonCommand event, you need to use the ID of you Spread (FpSpread1; not ss). This is probably the cause of both of your errors.
- Post Options:
Replied 8 September 2017, 10:28 am EST
Hello
I have tried many things to do the callback but the application never arrives to the FpSpread1_ButtonCommand event. When i click on a cell of the third column the program go to the javascript function but the callback not work. It could be that i forget to declarate something but i don't know.
I attach my proyect if it helps to find a solution.
Thanks

2009/01/CallBack.rar
- Post Options:
Replied 8 September 2017, 10:28 am EST
Hello David,
1. You need to import the web spread name space as: Imports Farpoint.Web.Spread
2. MyDialog is the name of modal window.
3. The above code is for showing a modal window on a button click. You need to catch the MouseClick event client side and you can show the modal window by checking if it is a right click. This is pretty simple to implement.
Thanks,
- Post Options:
Replied 8 September 2017, 10:28 am EST
Hello,

The issue you are having is due to using the CallBack from the Spread control. When you do this, only the Spread control is updated on the postback. All the events in your code are firing, but since only the Spread is updating on this AJAX callback, the popupmodal control is not going to show. You need to change the callback as follows and everything will work as expected.

function ShowModalfromServer()

{

var ss = document.getElementById('FpSpread1');

//ss.UpdatePostbackData();

//ss.CallBack('PopMyDialog');

__doPostBack(ss.id, 'PopMyDialog');

}