Hi,
I am trying to implement a partial view on an igDialog box. This view must be refreshed when clicking on a button in a cell of an igHierarchicalGrid.
The partial view and dialog are defined as follows:
<div id="dialog" hidden="hidden">
<p>
@**@
@Html.Partial("../PurchaseOrderEnquiry/POPackSize")
p>
div>
@(Html.Infragistics()
.Dialog()
.State(DialogState.Closed)
.ShowHeader(true)
.ShowCloseButton(true)
.Modal(true)
.ContentID("dialog")
.Height("500px")
.Width("380px")
.Render()
)
}
The button calls this JS function to refresh the view:
function OpenPopup(e) {
var POLineID = $(e).attr("data-id");
$("#dialog").load('@Url.Action("RefreshPackSize", "PurchaseOrderEnquiry")' + '?POLineID=' + POLineID);
$("#dialog").igDialog("open");
Here is the RefreshPackSize function in the Controller:
public ActionResult RefreshPackSize(int POLineID)
{
POEnquiryModel model = new POEnquiryModel();
model.PackSizeModel = new POEnquiryPackSizeModel();
model.PackSizeModel.POLineID = POLineID;
return PartialView("POPackSize", model);
The POPackSize PartialView definition:
@using Infragistics.Web.Mvc;
@model FashionCloud.Models.POEnquiryModel
@(Html.Infragistics().Loader()
.ScriptPath(Url.Content("~/Infragistics/js/"))
.CssPath(Url.Content("~/Infragistics/css/"))
.Theme("infragistics")
<body>
<fieldset>
<legend>Filters</legend>
<img style="width: 100%" src="http://www.igniteui.com/images/samples/dialog-window/content.jpg" />
</p>
@using (Html.BeginForm())
if (@Model.PackSizeModel != null)
if (@Model.PackSizeModel.POLineID > 0)
@Html.LabelFor(m => m.PackSizeModel.POLineID)
@Html.Infragistics().TextEditorFor(m => m.PackSizeModel.POLineID).Width(200).MaxLength(26).Render()
</fieldset>
</body>
My problem:
If I change "return PartialView("POPackSize", model);" to "return PartialView("POPackSize");" i.e. without the "model" parameter, the default "Close" button is visible,
As soon as "model" is added back, the "Close" button is no longer visible, and the dialog can only be closed using 'ESC', however it will not open again without error (if closed with the "Close" button, it works fine though).
As you can see, I have tried to explicitly show the header and close button in the dialog definition on my view, but it doesn't seem to help.
What is happening to the "Close" button, and how can I get it to display permanently?
Thanks
Deon
Hello Meyer,
I followed the steps you suggested and was unable to reproduce the behavior you're describing.
I have created a sample of Dialog with button. I am using partial view to render controls in the view. When I click the button to open dialog box close button doesn’t disappear.
I have attached the sample project I used to test this. Please test this project on your PC; whether or not it works correctly may help indicate the nature of this problem.
I noticed that when you are using loader, you are using ‘.render’ option that you don’t need to use it .in the loader you just have to define scriptPath, csspath and resources as mention in the following API document.
http://www.igniteui.com/help/api/2016.1/ig.loader
You can refer the following step by step guides going through the process of adding an igDialog control to a web page
http://www.igniteui.com/help/adding-igdialog
Please find the attached isolated sample of igDialog I use to test it, would like to compare it with your sample and if you are still getting the same issue please modify the sample I have provided with your scenario and send me back so that I can debug the code and find the cause of the issue.
Please let me know if I you need further assistance.
Find the attached sample.
Hi Divya,
Thanks for you response. I have since upgraded my project to JQuery 1.9.1, and IgniteUI 2016.1. Although the default button still does not appear, I have added one manually which did not work before, but since upgrading it does.
Hello Deon,
Thank you for the update and i am glad that you found your code working.
Pleae let me know if you need further assistance.