How to change WaitingPopup appearance with JavaScript?

[tomer]

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]

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 

https://help.syncfusion.com/aspnet/waitingpopup/appearance-and-styling#template 

 

We have attached a sample for your reference. Please download the sample from the below link    

    

Sample: http://www.syncfusion.com/downloads/support/forum/132218/ze/132218_Sample392648308.zip  

 

Regards 

Ilakkiya.B   

[tomer]

Thanks

[Keerthana Rajendran]

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.