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.
Hi Pradeep,
Looking at your code I assume that you want to use hierarchicalgrid based on the properties that you have defined in the grid initialization. However please note that the hierarchicalgrid should be created using igHierarchicalGrid widget, not igGrid. For instance: http://help.infragistics.com/jQuery/2015.2/ui.ighierarchicalgrid The error that you're facing could be related to this or if it still occurs please send me a working sample that I can run on my side and debug it. Waiting for your response.