Ext.Net approach to desktop implementation - asp.net

i wanto to start use a Ext.Net desktop (i use it as "normal page" for other application).
i want to know the best approach of initialization desktop from database data.
my actual approach is:
1. start with "minimal" desktop page (start menu ecc...) without any modules;
2. read data from database (based on same parameters) and create dynamic modules (i think with DesktopModuleProxy) whit userc control (ex i save path/title/etc... of usercontrol in database);
3. create usercontrol and render it in desktop
i start with this example: http://examples.ext.net/#/Desktop/Introduction/Overview/
method AddNewModule() works only if there is a submit (ex with a launcher), but it doesn't works from Page_Load event and i have this javascript error:
"Cannot read property 'length' of undefined" in ext.axd:93
maybe i use wrong lifecycle page?
finally maybe i use a webform instead usercontrol, but i have same case where i must use usercontrol...
thanks!
.aspx FILE
<ext:Desktop ID="Desktop1" runat="server">
<StartMenu Title="Ext.Net Desktop" Icon="Application" Height="300">
<ToolConfig>
<ext:Toolbar ID="Toolbar1" runat="server" Width="100">
<Items>
<ext:Button ID="Button1" runat="server" Text="Settings" Icon="Cog" />
<ext:Button ID="Button2" runat="server" Text="Logout" Icon="Key">
<DirectEvents>
<Click OnEvent="Logout_Click">
<EventMask ShowMask="true" Msg="Ciao..." MinDelay="1000" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</ToolConfig>
</StartMenu>
<TaskBar TrayWidth="100">
<QuickStart>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Button ID="Button3" runat="server" Handler="tile" Icon="ApplicationTileVertical">
<QTipCfg Text="Tile windows" />
</ext:Button>
<ext:Button ID="Button4" runat="server" Handler="cascade" Icon="ApplicationCascade">
<QTipCfg Text="Cascade windows" />
</ext:Button>
</Items>
</ext:Toolbar>
</QuickStart>
<Tray>
<ext:Toolbar ID="Toolbar3" runat="server">
<Items>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" />
</Items>
</ext:Toolbar>
</Tray>
</TaskBar>
<DirectEvents>
<Ready OnEvent="loadTest"></Ready>
</DirectEvents>
</ext:Desktop>
.cs file
[DirectMethod]
public void loadTest(object sender, DirectEventArgs e)
{
DesktopModuleProxy control = Ext.Net.Utilities.ControlUtils.FindControl<Ext.Net.DesktopModuleProxy> (this.LoadControl("/user/default.ascx"));
control.RegisterModule();
}
Error by chrome:
Uncaught TypeError: Cannot read property 'app' of undefined Default.aspx:31
Uncaught TypeError: Cannot read property 'length' of undefined ext.axd:93
these is a "last version" of my various tests. if i invoke same method "loadTest" by button (like the original example) it works. User control has only 1 label with datetime.
thanks!

You can use Ext.onReady and ext:ResourcePlaceHolder with DirectMethod on server, like this:
<ext:ResourcePlaceHolder runat="server" Mode="Script" />
<script type="text/javascript">
Ext.onReady(function () {
App.direct.YourDirectMethod();
});
</script>

Related

Call hidden ASP.NET FileUpload control from a Button control

I have a webpage containing one ASP.NET file upload control and a button to upload the file to server. The existing code looks like below.
<div runat="server" style="width: 110%">
<asp:FileUpload ID="fileUpload" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" OnClick="BtnFileUpload_Click" Text="Upload" />
</div>
But our client don't want to see the default look and feel of a standard file upload control. He wants us to add another button and wrap the file upload control with the button, so that whenever user clicks on the button, file upload dialog window opens.
Thanks
you cna do that using jquery you can set fileupload visiblity as none and can open fileuploader from button click like
<div runat="server" style="width: 110%">
<asp:FileUpload style="display:none" ID="fileUpload" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" onclick="$('#fileUpload').trigger('click'); return false;" OnClick="BtnFileUpload_Click" Text="Upload" />
</div>
you need to reference of jquery for this.
In addition to #Kevin Shah's solution, I got it working this way:
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="BtnFileUpload" runat="server" OnClientClick="$('#ContentPlaceHolder1_FileUpload1').trigger('click'); return false;" Text="Upload" />
My Webform is inside a MasterPage, so I had to look at "View source" while debugging in Chrome to get the correct element ID ContentPlaceHolder1_FileUpload1 instead of just FileUpload1

Ext.Net,loading 2 child page ,and reach from one child to another

My main.aspx
<ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" />
<form id="form2" runat="server">
<ext:Panel runat="server" ID="anaPanel" Title="OSO" Icon="Car">
<TopBar>
<ext:Toolbar runat="server" Layout="FitLayout">
<Items>
<ext:Menu ID="Menu1" runat="server" Floating="false" Layout="HBoxLayout" ShowSeparator="false"
AnimCollapse="true" Cls="horizontal-menu">
<Defaults>
<ext:Parameter Name="MenuAlign" Value="tl-bl?" Mode="Value" />
</Defaults>
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="" Icon="Group">
<Menu>
<ext:Menu ID="Menu2" runat="server">
<Items>
<ext:MenuItem Text="new card" Icon="GroupAdd">
<DirectEvents>
<Click OnEvent="AddNewCart_Click"></Click>
</DirectEvents>
</ext:MenuItem>
...............
...............
</ext:Panel>
</form>
My maninpage codebehind something like this.
protected void AddNewCart_Click(object sender, DirectEventArgs e)
{
string path = "Pages/Kart.aspx";
Window win = CreateWindows(MyWindow,Icon.Group,path,"new card", 420, 500);
// private Window CreateWindow(string Id, Icon ic, string path, string Title, int Heigh, int width){......};
//I get the new Window and pass some values and turn it back.
win.Render(this.Form);
win.Show();
}
inside Kart.aspx there is also a button and when the clicked button , load second childpage just the same above code
but changed path (lets say loading B.aspx).I am doing this like that window.parent.App.direct.MethodName(). *[MethodName() descibed in the main.aspx] but I need to refresh a grid inside the Kart.aspx, when and new item from B.aspx,
*I have tried to reach Kart.aspx methon like this window.parent.App.direct.MethodName() but seems doesnt work.it works only if it is described in the main.aspx codebehind.
a friend told me that ,only way to do that is use javascript" like this
Code-Behind
X.Call("ReloadGrid");
function ReloadGrid() {
var grid = window.parent.Ext.getCmp('GridId');
//grid reloading code
}
but I have no idea how I reload grid via this script.or are there anaother way to do this.thank you
my Kart.aspx ;
<ext:GridPanel runat="server" ID="grid1" Title="" Height="460"
Flex="1" Scroll="Vertical">
<Store>
<ext:Store ID="strKart" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" />
<ext:ModelField Name="name" />
<ext:ModelField Name="surname" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Exception Handler="Ext.Msg.alert('Products - Load failed', operation.getError());" />
</Listeners>
</ext:Store>
</Store>
and code behind of it
[DirectMethod]
public void ReloadKart()
{
this.strKart.DataSource = cari_bll.GetAll();
this.strKart.DataBind();
}
**trying to run ReloadKart () function from B.aspx which is clicked the button
Now you have 3 pages, the parent lets call it Parent.aspx, and the children Kart.aspx, and b.aspx
And you want to load the grid in Kart.aspx based on an event in b.aspx
Since you load the grid by calling the direct method
[DirectMethod]
public void ReloadKart()
{
this.strKart.DataSource = cari_bll.GetAll();
this.strKart.DataBind();
}
its boils down to calling this method inside Kart.aspx
To achieve this you need to do the following:
Define a JavaScript method in Kart.aspx that calls the direct method ReloadKart, lets name it ReloadGrid
function ReloadGrid()
{
App.direct.ReloadKart();
}
Define a delegate to this method in Parent.aspx, lets call it ReloadGridDelegate, a method to call that delegate CallKartReloadGrid, and a method to set it SetReloadGridDelegate
var ReloadGridDelegate;
function CallKartReloadGrid()
{
ReloadGridDelegate();
}
function SetReloadGridDelegate(delegate)
{
ReloadGridDelegate = delegate;
}
In Kart.aspx assign call the SetReloadGridDelegate
window.parent.SetReloadGridDelegate(ReloadGrid);
Finally in b.aspx call the parent method
window.parent.CallKartReloadGrid();

Open frame when clicked

I have button, which should open a modal pop up with iFrame to a page.
Currently the button click opens a PostBackUrl,
I want a similar thing to happen here.
That is, I want to open the Iframe scr Page as postbackurl.
<asp:Button ID="btnCreateComp" runat="server" Text="Create Company" CssClass="button_style"
PostBackUrl="~/Company.aspx" />
<asp:Panel ID="Pnl1" runat="server" CssClass="PanelPopup">
<div>
<iframe id="iframe1" runat="server" height="500px" width="500px" src="" ></iframe>
<asp:Button ID="btnclose" runat="server" Text="Close" CausesValidation="false" />
</div>
</asp:Panel>
I think you should use jquery pop up because it is easier than modalpopupextender because I found it buggy some time there are a lot of pop up in jquery:
Jquery popup exmaples
I used this one and it is working perfectly (you can place what ever you want) for me:
Note:The best feature I like about Jquery it is not required that your control must have runat="server" it works with both HTML Controls and ASP.NET Controls.
Adding event handler to button:
<asp:Button ID="btnclose" runat="server" Text="Close" CausesValidation="false" onclick="btnClicked" />
In the code behind:
protected void btnClicked(object sender, EventArgs e)
{
iframe1.src="an http link";
//do not try set src to www.google.com because they are blocking Iframe
}

My modal window is not transferring values to vb.net codebehind

I am getting the username and password to run some scripts
<act:ModalPopupExtender ID="unixLoginMPE" runat="server" TargetControlID="rdoUnix"
PopupControlID="unixPanel" BackgroundCssClass="modalBackground" CancelControlID="unixCancel" OkControlID="unixSubmit"
/>
<asp:Panel ID="unixPanel" runat="server"
CssClass="modalPopup" align="center" Style="display: none">Unix Username: <asp:TextBox ID="unixName" ClientIDMode="Static" runat="server" />
<br />
Unix Password: <asp:TextBox ID="unixPass" runat="server" ClientIDMode="Static" TextMode="Password" />
<br />
<asp:Button ID="unixCancel" runat="server" Text="Cancel" />
<asp:Button ID="unixSubmit" ClientIDMode="Static" runat="server" Text="Submit" OnClientClick="enableRDO()" />
</asp:Panel>
In my codebehind, I'm doing something like this just to test if the values have passed.
Dim UNIXPASSWORD As String = unixPass.text
Dim UNIXUSERNAME As String = unixName.Text
MsgBox(UNIXCOMPUTERNAME)
MsgBox(UNIXUSERNAME)
MsgBox(UNIXPASSWORD)
I do reference a script to enable the radio button. I asked a question to help me with that issue, it is all resolved Radio Button won't stay check if I have a modal window open up when it is selected
<script type="text/javascript">
function enableRDO() {
var cancel = document.getElementById('rdoUnix');
cancel.setAttribute('checked', 'true');
};
</script>
For some reason the values are passing just fine in Google Chrome but not in IE. I've been at this for a few hours and don't know what else to try...or search for
EDIT:
I'm still trying to attempt this. I setup up dummy text boxes which I will hide later on if I can pass to them. I'm still very lost with this...
<asp:TextBox ID="dummyUnixName" runat="server" />
<asp:TextBox ID="dummyUnixPass" runat="server" />
If you aren't performing a postback or an AJAX call, nothing will be passed to the code behind.
During debugging, Console.WriteLine can be redirected to the output window in VS; in production, it's going to go nowhere. A logging solution is often appropriate for a web application which needs to know more of what happened than which page was requested by a user (IIS logs).

Asp:FileUpload and RAD ajaxmanager not working together

I have following code for uploading a file:
<asp:Panel ID="pnlCauses" runat="server">
<asp:FileUpload ID="uplCauses" runat="server" />
<asp:Button runat="server" ID="btnUplCauses" Text="Upload" OnClick="btnUplCauses_Click" />
<asp:Label runat="server" ID="lblUplCausesStatus" Text="Upload status: " />
</asp:Panel>
And i have used following code to allow only pnlCauses to refresh.
<rad:AjaxSetting AjaxControlID="btnUplCauses">
<UpdatedControls>
<rad:AjaxUpdatedControl ControlID="pnlCauses" />
</UpdatedControls>
</rad:AjaxSetting>
But seems Upload control and Ajax dont work together.
Can anyone suggest me alternatives ? That how can i allow only panel to refresh and not complete page ?
ASP.NET FileUpload cannot upload files using AJAX calls. You must force a postback request, or use a control like RadAsyncUpload to upload files asynchronously.
Telerik documentation has a workaround for older Telerik ASP.NET controls on how to disable upload button AJAX calls in a RadAjaxPanel:
<script type="text/javascript">
//on upload button click temporarily disables ajax to perform upload actions
function conditionalPostback(sender, args)
{
if(args.EventTarget == "<%= ButtonSubmit.UniqueID %>")
{
args.EnableAjax = false;
}
}
</script>
<rada:radajaxpanel runat="server" id="RadAjaxPanel1"
clientevents-onrequeststart="conditionalPostback">
<rad:radupload runat="server" id="RadUpload1" />
<asp:button id="ButtonSubmit" runat="server" text="Upload" />
</rada:radajaxpanel>

Resources