"Uncaught TypeError: closeIcon_.html(...).buttonMarkup is not a function"
Hi,
I want to create multi instance of element like div label, table, panel and chart with customized property, so for example I select table it will create property for table, I click chart it will create the chart property and load igDataChart at the same time. About jquery .load the actual page will be loaded in certain element inside Shared page using jquery .load.
Thanks.
Hi Japz,
Sorry it was my mistake about the converting to jQuery - I was looking at the modified index that used jQuery, not at mine razor syntax.
Anyway, I used the same jQuery code from Index page and placed in in the shared layout - chart renders fine, no issues on my side with the references from the cdn that I provided. If there are some on your side, please provide the modified sample just to be sure we are working on the same.
I do not see any issue using jQuery .load, but I do not see why you need it ? It seems excessive if you can just put the igDatChart initialization code (either jquery or mvc wrapper).
Looking forward to hearing from you.
This is your given code.
@*Reference the Infragistics ASP.NET MVC Helpers Assembly*@@using Infragistics.Web.Mvc
@*By defining the model type here, it is accessed in the View using the Model property*@@model igDataChartMVCExporttoPDF.Models.CustomersViewModel
@{ Layout = "~/Views/Shared/_Layout.cshtml";}
<!DOCTYPE html>
<html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title>
<!-- These styles aren't required but provide better styling for labels on the running sample --> <style> BODY { font: 1em "Segoe UI",Helvetica,Tahoma,Arial,Verdana,sans-serif; }
H2 { margin: 40px 0 0 0; }
H3 { margin: 10px 0 0 0; } </style>
<!-- Ignite UI Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2015.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.lob.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.dv.js"></script>
</head><body> <span>Body start</span> @using (Html.BeginForm()) {
<span>Hello world!</span>
} <span>Body end</span>
</body>
</html>
I change the references that you give but it return "Uncaught TypeError: $(...).igDataChart is not a function".
Here are the codes that I added in Index Page.
<div style="width: 80%; min-width: 210px;"> <div id="chart"></div></div>
<script> $(function () { var data = [ { "CountryName": "China", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 }, { "CountryName": "India", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 }, { "CountryName": "United States", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 }, { "CountryName": "Indonesia", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 }, { "CountryName": "Brazil", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 } ];
$("#chart").igDataChart({ width: "100%", height: "400px", title: "Population per Country", subtitle: "Five largest projected populations for 2015", dataSource: data, axes: [ { name: "NameAxis", type: "categoryX", title: "Country", label: "CountryName" }, { name: "PopulationAxis", type: "numericY", minimumValue: 0, title: "Millions of People", } ], series: [ { name: "2015Population", type: "column", isHighlightingEnabled: true, isTransitionInEnabled: true, xAxis: "NameAxis", yAxis: "PopulationAxis", valueMemberPath: "Pop2015" } ] }); }); </script>
This will display two chart the one that I added and the other that you given. By the way, I load the page with igDataChart using jquery .load event in Shared Layout, is it okay?
Thank you for your great help.
Thank you for the modified code - I used it and the sample app ran fine and no errors occurred. Could you please let me know if the same behavior persist on your side if you use the following references: <!-- Ignite UI Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.dv.js"></script> <script src="http://cdn-na.infragistics.com/jquery/20141/latest/js/infragistics.lob.js"></script>
instead of the ones referred on your local machine ?
Also, the sample I have sent initializes the igDataChart control with jQuery, so I was not able to understand which part of the sample you want converted to jQuery, please specify.