Hi All,
I have created modal popup using jquery in mvc3 razor and I tried to show the normal web page which renders as expected.When i try to show the page having igGrid.In which I am getting an error "igGrid" object doesnot support this property.
I have done model popup using the code present in the below link.
http://shahvaibhav.com/how-to-show-view-as-a-dialog-box-modal-popup-using-jquery-in-mvc3-razor/
Please try to resolve this issue.
Thanks,
Pradeep SE
Hello Pradeep,
Could you please send me a sample that demonstrates your scenario?
Regards,
Tsanna
Please find the code given below.
$.ajaxSetup({ cache: false });
$(document).ready(function () { $(".openDialog").live("click", function (e) { e.preventDefault();
$("<div></div>") .addClass("dialog") .attr("id", $(this) .attr("data-dialog-id")) .appendTo("body") .dialog({ title: $(this).attr("data-dialog-title"), close: function () { $(this).remove(); }, modal: true, height: 450, width: 750, left: 0, top: 10
}) .load(this.href); });
$(".close").live("click", function (e) { e.preventDefault(); $(this).closest(".dialog").dialog("close"); }); }); $(function () { $.ig.loader({ scriptPath: '@Url.Content("~/Content/Scripts")', cssPath: '@Url.Content("~/Content/css")', resources: 'igGrid.*', ready: function () {
$.getJSON("@Url.Content("~/Student/GetAllStudentData")", null, function (data) {
var headerTextValues = ["Student ID", "Student Name", "From Date", "Thru Date", "Student Rates"]; $('#tbStudentGrid').igGrid({ expandCollapseAnimations: true, animationDuration: 1000, expandTooltip: "Expand to View Details", collapseTooltip: "Hide details", dataSource: data, responseDataKey: "Records", dataSourceType: "json", autoGenerateLayouts: false, autoGenerateColumns: false,
rowEditDialogContainment: "owner", showReadonlyEditors: false,
columns: [ { headerText: headerTextValues[0], key: "StudentID", width: "10%" }, { headerText: headerTextValues[1], key: "StudentNam", width: "10%" }, { headerText: headerTextValues[2], key: "FromDate", width: "10%" }, { headerText: headerTextValues[3], key: "ThruDate", width: "10%" },
{ headerText: headerTextValues[4], key: "StudentRates", width: "10%", template: "{{if ${StudentRates} > 0 }}<a href='@Url.Content("~/StudentRates/StudentRates?masterflag=${StudentPtr}&contractnum=${PPORateProviderContractNum}&masterseqnum=${MasterProviderInternalNum}&providerseqnum=${ProviderInternalNum}&contractthrudate=${ThruDate}")' target='aboutDialog' class='dialog'>View Details</a>{{else}}No results found{{/if}}" } ],
initialDataBindDepth: -1; } });
</script></head>
<body><table id="tbStudentGrid" style="width: 100%;"></table></body>
In the code top of the jquery function contains modal popup and in igGrid function I have used the popup in conditional template.
But the output was 'igGrid' object was not supported.
Please give your suggestions on this.