Because i load js files at the end of the page igDialog get showned for a moment at page load
how can I get around of this
Hello Christian,
Thank you for contacting Infragistics!
It is normal when reference the JavaScript files at the bottom of the document and you instantiate the igDialog after that, to show the dialog after all other html is rendered and processed the only possible workaround is to load the in the head section.
Please provide a sample html page demonstrating your issue if I've misunderstood you.
I'm just following up to see if you need any further assistance with this issue. If so please let me know.
I would gess that You need to change the css for the dialog so it does not show before it get activated
Do you mean you want the dialog to be initially closed?
If so you can set this for the state property.
Let me know if you need further assistance.
I am still following up. Have you been able to resolve the issue?If you have any concerns or questions, please feel free to contact me, I will be glad to help you.Thank you for choosing Infragistics components!
Hello,
I have the same issue, i am using asp.net MVC 6. my igDialog is initialized with state closed in my main view, and the content of the dialog is in a partial view.
For some reason the content of the partial view is shown for a split second before the main view finishes loading. This is not the desired effect, since i want the contect of the dialog only to be shown when the user clicks con a button.
Any solution to this??
Here is some code:
main view:
<div class="ui-dialog-content" id="alarmDialog" frameborder="0"> @Html.Partial("~/Views/Home/WpCreateAlarm.cshtml")</div>
@(Html .Infragistics() .Dialog().Modal(true) .HeaderText("Alarms") .ShowFooter(true) .FooterText("<Button type='button' onclick='setAlarm()' class='btn btn-lg btn-success dialog-button-size'><span class='glyphicon glyphicon-ok'></span></Button><Button type='button' onclick='closeAlarmDialog()' class='btn btn-lg btn-danger dialog-button-size'><span class='glyphicon glyphicon-remove'></span></Button>") .ContentID("alarmDialog") .ShowMinimizeButton(false) .ShowMaximizeButton(false) .ShowPinButton(false) .ShowCloseButton(false) .Resizable(false) .Width("60%") .Height("40%") .State(DialogState.Closed) .Render())
partial view:
<div class="row"> <div class="col-sm-12"> <div class="text-size"> <div class="form-inline"> <label for="reference" id="lbSpecAlarmRef"></label> <input id="reference" class="form-control" style="margin-left:15px; width:250px" readonly /> <input id="lineId" type="hidden" readonly /> </div> </div> </div></div><br /><div class="row"> <div class="col-sm-12"> <form class="form-inline"> <div class="form-group"> <div style="margin-right:15px"> <label id="lbSpecAlarmQty"></label> </div> </div> <div class="form-group"> <div class="input-group" style=""> <span class="input-group-btn"> <button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <div class="text-size"> <input id="quantity" type="text" name="quant[2]" class="input-number form-control" style="height:49px;width:100px;text-align:center" value="0" min="0" max="100" readonly> </div> <span class="input-group-btn"> <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </form> </div></div>
The partial view content appears because of the MVC rendering and the fact that the HTML is send to the client where the igDialog code is still to be executed at some point later and render the html content in the dialog.
As an easy workaround, I suggest you to simply not display the partial view until the igDialog is shown.
For example:
<div class="ui-dialog-content" id="alarmDialog" frameborder="0" style="display:none">