We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change WaitingPopup appearance with JavaScript?

Thread ID:

Created:

Updated:

Platform:

Replies:

132218 Aug 21,2017 11:40 AM UTC Aug 25,2017 04:31 AM UTC ASP.NET MVC (Classic) 3
loading
Tags: WaitingPopup
tomer
Asked On August 21, 2017 11:40 AM UTC

Hi,
How can I change the WaitingPopup color/transparency/hight with JavaScript?

I tried to use the examples in the next link:
https://help.syncfusion.com/aspnetmvc-classic/waitingpopup/client-side-methods


<asp:Button ID="ShowButton" runat="server" Text="Show" OnClientClick="showButtonOnClientClick(); return false;"/>

<ej:WaitingPopup ID="MyWaitingPopup" runat="server" ShowOnInit="false">
    <ej:DatePicker ID="DatePicker1" runat="server" ></ej:DatePicker>
</ej:WaitingPopup>

<script>
    function showButtonOnClientClick()
    {
        try
        {
            popUpObj = $("#<%=MyWaitingPopup.ClientID%>").data("ejWaitingPopup");
            //popUpObj.SetShapeColor("Green"); //error "setShapeColor is not a function"
            //popUpObj.SetTransparency(5); //error "SetTransparency is not a function"
            popUpObj.show();
        }
        catch (err) {
            alert(err.message);
        }
    }
</script>


Thanks,
   Tomer

Ilakkiya Baskar [Syncfusion]
Replied On August 22, 2017 12:47 PM UTC

Hi Tomer, 
 
Thank you for contacting Syncfusion Support.  
 
We suggest you to change the height or background color using cssClass property via setModel for waiting popup. 
 
<div id = "ControlRegion"> 
    <asp:Button ID="ShowButton" runat="server" Text="Show" OnClientClick="showButtonOnClientClick()"/> 
<div> 
    <ej:WaitingPopup ID="MyWaitingPopup" runat="server" ShowOnInit="true"> 
         
    </ej:WaitingPopup> 
    <ej:DropDownList ID="optValueChange" WatermarkText="Select" ClientSideOnChange="onActiveValueChange" runat="server" Width="107px" ToolTip="select.."> 
                        <Items> 
                            <ej:DropDownListItem Text="cssChange" Value="cssChange" /> 
                            <ej:DropDownListItem Text="transparent" Value="transparent" /> 
                            <ej:DropDownListItem Text="UrlChange" Value="UrlChange" /> 
                             
                        </Items> 
                    </ej:DropDownList> 
     <ej:DatePicker ID="DatePicker1" runat="server" ></ej:DatePicker> 
    <style type="text/css"> 
        #<%=MyWaitingPopup.ClientID%> { 
            height: 320px; 
            width: 600px; 
            margin: 0 auto; 
       
        #<%=MyWaitingPopup.ClientID%>_WaitingPopup .e-image { 
            display: block; 
             
       

        .UrlChange .e-image { 
        width:30px; 
        height:30px; 
        background:url("http://i.stack.imgur.com/FhHRx.gif"); 
       

        .transparent .e-image { 
        background-color:transparent; 
       

        .cssChange .e-image{ 
        height:100px; 
        background-color:red; 
       

    </style> 
</div> 
    <script> 
    function showButtonOnClientClick() 
   
         popUpObj = $("#<%=MyWaitingPopup.ClientID%>").data("ejWaitingPopup"); 
        popUpObj.setModel({ cssClass: 'cssChange' }); 
            popUpObj.show(); 
         
   
        function onActiveValueChange(args) { 
             obj = $("#<%=MyWaitingPopup.ClientID%>").data("ejWaitingPopup"); 
             obj.setModel({ cssClass: this.getValue() }); 
       
</script> 
</div> 

You can also modify the default image as template using  template property. 
 
For more details, please refer the below link 
 
We have attached a sample for your reference. Please download the sample from the below link    
    
 
Regards 
Ilakkiya.B   



tomer
Replied On August 24, 2017 07:33 AM UTC

Thanks


Keerthana Rajendran [Syncfusion]
Replied On August 25, 2017 04:31 AM UTC

Hi Tomer, 
 
Thanks for your update. We are glad to hear that our suggestion resolved your issue. Please get back to us if you require further assistance on this. We will be happy to assist you 
 
Regards, 
Keerthana. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;