Printable View
Hi, I would like to place an icon in the MaskConfig
I think I have to work on MsgCls property but I don't know which class I have to manage.
I would like to fill the white in which I put a green spot in the following image
Attachment 25032
It is enough the loader icon, or a custom one.
My code is
Is it possible?Code:Ext.Net.X.Mask.Show(New MaskConfig With {.Msg = GetText("TryAuthenticationWelcome") & " " & username})
Ext.Net.X.Redirect(HttpContext.Current.Request.Url.AbsoluteUri)
Thank you.
Hello @bbros!
I believe what you want is exactly what this example highlights: Panel - Custom Mask.
Hope this helps!
Hi Fabricio, thanks for your reply.
I created a simply repro-project. I don't have a window, like in your example, so a loader is missing as well.
Here is my webform, clicking the button I would like to display a loader icon in that 16x16 box which remains empty.
I don't know if it is possible.
Thank you very much again
Code:<!DOCTYPE html>
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim rm As New ResourceManager
body.Controls.Add(rm)
'Simulating long time loading
Threading.Thread.Sleep(2000)
Dim Button As New Ext.Net.Button With {.Text = "Click me!"}
AddHandler Button.DirectClick, AddressOf Button_Click
body.Controls.Add(Button)
End Sub
Public Sub Button_Click(sender As Object, e As DirectEventArgs)
Dim maskCfg = New MaskConfig With {.Msg = "<- I would like to have a loader icon here"}
maskCfg.MsgCls = "myicon"
Ext.Net.X.Mask.Show(maskCfg)
Ext.Net.X.Redirect(HttpContext.Current.Request.Url.AbsoluteUri)
End Sub
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style>
myicon {
background-image: 'https://itopia.com/wp-content/themes/itopia/img-cloud/loader.gif';
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body id="body" runat="server">
</body>
</html>
Hello @bbros!
You are on the right path there. But the CSS rules are wrong. In order to replace the right place with the custom icon, you should do some proper CSS rules. And the "dot" before the CSS rule name is important. Read about it here: CSS .class Selector.
Well, going into details on CSS is beyond the scope of Ext.NET support but we can give guidelines assuming you have experience with CSS. A good aid into determining the selector could be following this:
1. change your page so that the mask stays forever (remove the redirect from your line 21)
2. load the page and click the test button, so that the mask appears and stays
3. open the web browser's developer tools (if not open already, it does not matter). Usually shortcut key is F12.
4. right-click over the mask text or original "spinning" icon so that browser's context menu appears
5. click "inspect" (or "inspect element" in some browsers)
This will take you to the DOM explorer of the page, and will show the HTML5 markup code down to the mask, revealing on each levels the whole cascade of CSS rules. Here comes the need for CSS skills, which is essentinal for most style customization in Ext.NET.
There, you will see your 'myicon' class set on a Div element with also the 'x-mask-msg' CSS class. But that's not the element exactly surrounding the text and, if you inspect down to the innermost HTML div, closing in to the mask text message, you will see (in the right pane, showing affecting CSS styles on the selected HTML element) that there's a CSS rule affecting the background image and that will override your rule, set in an upper level of the "cascade".
And to fix that, all you have to do, is tailor your CSS selector to affect cascaded elements affecting that one, which would be something like:
Notice now not only the "myicon" text begins with a ".", but also the background-image specification is different. So that's why I am assuming you are not very acquainted with CSS. Knowing how it works is very useful for customizing Ext.NET, and there's a good amount of resources around the web for good guides. Googling specific questions also most time leads you to very useful stackoverflow answered questions, from my experience.Code:.myicon .x-mask-msg-text {
background-image: url(https://itopia.com/wp-content/themes/itopia/img-cloud/loader.gif);
}
Just to make the sample a proper "working" sample, the custom image you used is way too big and will just not fit the window. With the code above you'll see but a small part of the figure animating in the box.
With this few more lines on your CSS rule, then it becomes alright:
Then you have the custom figure in the same position the original one goes.Code:.myicon .x-mask-msg-text {
background-image: url(https://itopia.com/wp-content/themes/itopia/img-cloud/loader.gif);
background-size: 32px 32px;
padding: 38px 0 0
}
At this point you have all you need to properly use your custom animated icon on your loader mask. Remember, although you used in the CSS specification .myicon, on your code behind or markup, when you specify maskCfg.MsgCls, the dot does not carry in. I mean, you still bind the CSS class to the component via:
All that's left then should be to customize further the CSS rule to place the animation to the right. This shouldn't be a problem for an experienced web designer, but let us now if you still can't get it to work the way you need and we'll try and help you.Code:maskCfg.MsgCls = "myicon"
Some important considerations about the test case you provided.
It does it job, which is describe your scenario, but there are some issues with it that's better cleared out:
1. Check if page load is processed on first load or ajax request.
You should, during Page_Load(), test against either (or both)Ext.Net.X.IsAjaxRequestor/andPage.IsPostBack.
The way the example is, the 'click me' button will be re-created every time any server-side call to the page would happen, as the button click itself (for being a direct event).
2. Show mask and redirect
Did you notice with the thread sleep in page_load, both loading the page and also showing the mask is delayed by 2 seconds? What allows you to see the mask is actually the time it takes for the browser to load the redirection URL. Try changing that thread sleep time to something like 10 seconds.
But then you'll think "just add the thread sleep to the button click, after the mask show command and that's alright". No.
While code behind is being called, it is but building the list of client-side commands that should be run once the server side call happens. So what you get is a delay between concatenating the mask and redirect commands before sending the commands to the client browser. This wouldn't give a delay between the two commands' execution.
The way to "properly" solve that would be chaining server side calls. For example, you would have to have the Button_Click server side handler just add the mask and also add the call for (for example) another direct method which then could have the thread sleep and page redirect. So that the order happens:
- user clicks the button
- the server builds the command to show the mask and to call another server call, and provides that to the client
- the mask is then shown to the browser and the second call to the server-side code takes place
- the thread sleeps and adds the redirect (or for example, could just remove the mask)
3. CSS rules are wrong
Adding this again just for completudeness...
The CSS styling will never work because, first, it should have the leading dot.
The background-image requires an URL argument differently (wrapped inurl(), quotes optional)
Well, this post is just to point some issues on the test cases that, from experience, have been actual questions for Ext.NET beginners. This could be useful for people browsing this forum thread in the future.
thank you for your hints, those will be very useful!
great support
Hello @bbros!
We're glad the information above helped! Thanks for the feedback!