Here is my code for Model Class:
public class GridModel { public double ID { get; set; } public string SHORT_NAME { get; set; } public string CARRIER_NAME { get; set; } public List<GridSparklineModel> SellDuration { get; set; } } public class GridSparklineModel { public DateTime YMDH { get; set; } public double SELL_DURATION { get; set; } public string DateString { get { return YMDH.ToString("h tt"); } } }
---------------------------------------
public class GridController : Controller { // // GET: /Grid/ public ActionResult Index() { return View(); } public class JsonNetActionResult : ActionResult { public Object Data { get; private set; } public JsonNetActionResult(Object data) { this.Data = data; } public override void ExecuteResult(ControllerContext context) { context.HttpContext.Response.ContentType = "application/json"; context.HttpContext.Response.Write(JsonConvert.SerializeObject(Data)); } } public JsonNetActionResult FetchGraphDataJSON() { List<GridModel> data = new List<GridModel>(); //DataFetching Logic DataTable dt = FetchFirstDataTable(); if (dt.Rows.Count != 0) { foreach (DataRow row in dt.Rows) { GridModel model = new GridModel(); model.ID = Convert.ToDouble(row["ID"].ToString()); model.SHORT_NAME = row["SHORT_NAME"].ToString(); model.CARRIER_NAME = row["CARRIER_NAME"].ToString(); model.SellDuration = new List<GridSparklineModel>(); double carrierId = Convert.ToDouble(row["ID"].ToString()); DataTable dt2 = GetDt2(); foreach (DataRow item2 in dt2.Select("ID=" + carrierId)) { model.SellDuration.Add(new GridSparklineModel { YMDH = DateTime.Parse(item2["YMDH"].ToString()), SELL_DURATION = Convert.ToDouble(item2["SELL_DURATION"]) }); } data.Add(model); } } return new JsonNetActionResult(data); } public DataTable FetchFirstDataTable() { DataTable dt = new DataTable(); dt.Columns.Add("ID", typeof(double)); dt.Columns.Add("SHORT_NAME"); dt.Columns.Add("CARRIER_NAME"); dt.Rows.Add(1, "A", "Carrier A"); dt.Rows.Add(2, "B", "Carrier B"); dt.Rows.Add(3, "C", "Carrier C"); dt.Rows.Add(4, "D", "Carrier D"); dt.Rows.Add(5, "E", "Carrier E"); dt.Rows.Add(6, "F", "Carrier F"); dt.Rows.Add(7, "G", "Carrier G"); return dt; } public DataTable GetDt2() { DataTable dt = new DataTable(); dt.Columns.Add("YMDH"); dt.Columns.Add("ID", typeof(double)); dt.Columns.Add("SELL_DURATION"); dt.Rows.Add("2009-03-07 00:00:00.000", 1, 222.999995); dt.Rows.Add("2009-03-07 01:00:00.000", 1, 75.816664); dt.Rows.Add("2009-03-07 02:00:00.000", 1, 39.349995); dt.Rows.Add("2009-03-07 03:00:00.000", 1, 275.91666); dt.Rows.Add("2009-03-07 04:00:00.000", 1, 352.666641); dt.Rows.Add("2009-03-07 00:00:00.000", 2, 80.783324); dt.Rows.Add("2009-03-07 01:00:00.000", 2, 162.049985); dt.Rows.Add("2009-03-07 02:00:00.000", 2, 107.199989); dt.Rows.Add("2009-03-07 03:00:00.000", 2, 44.849994); dt.Rows.Add("2009-03-07 04:00:00.000", 2, 156.516658); dt.Rows.Add("2009-03-07 05:00:00.000", 2, 467.583312); dt.Rows.Add("2009-03-07 06:00:00.000", 2, 455.199977); return dt; } }
-----------------------------------------
<!DOCTYPE html><html><head> <title></title> <!-- Ignite UI Required Combined CSS Files --> <link href="../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="../igniteui/css/structure/infragistics.css" rel="stylesheet" /> <script src="../js/modernizr.min.js"></script> <script src="../js/jquery.min.js"></script> <script src="../js/jquery-ui.min.js"></script> <!-- Ignite UI Required Combined JavaScript Files --> <script src="../igniteui/js/infragistics.core.js"></script> <script src="../igniteui/js/infragistics.dv.js"></script> <script src="../igniteui/js/infragistics.lob.js"></script></head><body> <!-- Target element for the igGrid --> <table id="grid"></table> <script> $(document).ready(function () { var url = '@Url.Action("FetchGraphDataJSON", "Grid")'; var rawData = null; $.ajax({ // have to use synchronous here, else the function // will return before the data is fetched async: false, url: url, dataType: "json", success: function (data) { rawData = data; } }); var plotData = [] for (i = 0; i < rawData.length; i++) { plotData.push([rawData[i].ID, rawData[i].SHORT_NAME, rawData[i].CARRIER_NAME], [rawData[i].SellDuration]); } $(function () { $("#grid").igGrid({ dataSource: plotData, autoGenerateColumns: false, height: "400px", rowsRendered: function (evt, ui) { //get data collection var dataSource = ui.owner.dataSource; $(".order-sparkline").each(function (i) { $(this).igSparkline({ dataSource: dataSource.findRecordByKey( $(this).data("ID")).SellDuration, height: "24px", width: "100%", valueMemberPath: 'SELL_DURATION' }) .css("background-color", "transparent"); }); }, primaryKey: "ID", rowTemplate: "<tr><td></td><td>${ID}</td><td>${SHORT_NAME}</td>" + "<td>${CARRIER_NAME}</td><td><div data-id='${ID}' class='order-sparkline'></div></td></tr>", columns: [ { key: "ID", hidden: true }, { key: "SHORT_NAME", headerText: "Short Name" }, { key: "CARRIER_NAME", headerText: "Name" }, { key: "SellDuration", headerText: "Duration" } ] }); }); }); </script></body></html>
I can see the Grid with 3 columns and last column for Sparkline is not shown. Can anybody please suggest what should be done to show the sparkline in grid.
Hello Aziz,
Thank you for contacting Infragistics!
I have created a sample based on your code. I am currently working on seeing why the Sparkline is not displaying properly. I will continue to look into this matter and will update you with my progress.
Thank you for your patience. I have done some further looking into this matter and your code. The reason you are seeing this is after you get your rawdata try to convert it further when this isn’t necessary. So instead of pushing the rawData into the plotData you can just do the following:
var plotData = rawData;
Also in your rowtemplate you had an extra <td></td> you will have <td></td> for each of your columns you had one for each of your columns and then an extra. In the sample you see an empty one because this is for the hidden id column.
Please let me know if you have any further questions concerning this matter.
Not working, it still does not show the sparkline chart in the Grid. All I can see is an ajax image rotating with no values in the last column. I tried running your sample as well but it couldn't build due to many errors. Does it run and show the chart at your end? I am running this in FireFox 27.0.0 and opera and safari 5.7.1. Can you please check this at your end and suggest why it is not displaying the chart in my browser. Also when I pressed F12 it shows error "TypeError: dataSource.findRecordByKey(...) is null" in the messages. This is the final code:
<script> $(document).ready(function () { var url = '@Url.Action("FetchGraphDataJSON", "Grid")'; var rawData = null; $.ajax({ // have to use synchronous here, else the function will return before the data is fetched async: false, url: url, dataType: "json", success: function (data) { rawData = data; } }); var plotData = rawData; $(function () { $("#grid").igGrid({ dataSource: plotData, autoGenerateColumns: false, height: "400px", rowsRendered: function (evt, ui) { //get data collection var dataSource = ui.owner.dataSource; $(".order-sparkline").each(function (i) { $(this).igSparkline({ dataSource: dataSource.findRecordByKey( $(this).data("ID")).SellDuration, height: "24px", width: "100%", valueMemberPath: 'SELL_DURATION' }) .css("background-color", "transparent"); }); }, primaryKey: "ID", rowTemplate: "<tr><td>${ID}</td><td>${SHORT_NAME}</td>" + "<td>${CARRIER_NAME}</td><td><div data-id='${ID}' class='order-sparkline'></div></td></tr>", columns: [ { key: "ID", hidden: true }, { key: "SHORT_NAME", headerText: "Short Name" }, { key: "CARRIER_NAME", headerText: "Name" }, { key: "SellDuration", headerText: "Duration" } ] }); }); }); </script>
Am I missing something here?
Thank you for the update. When I run my sample I am able to see the sparkline chart display in the grid. Reviewing my sample again I forgot about another change I made. In the rowsRendered event when you are finding the record by key you want to change the “ID” to “id” the reason for this is it is getting the data-id and not the id of your column so you code would look like the following:
rowsRendered: function (evt, ui) { //get data collection var dataSource = ui.owner.dataSource; $(".order-sparkline").each(function (i) { $(this).igSparkline({ dataSource: dataSource.findRecordByKey( $(this).data("id")).SellDuration, height: "24px", width: "100%", valueMemberPath: 'SELL_DURATION' }) .css("background-color", "transparent"); }); }
From what you mention in your update it seems like this should be the last error you are facing. Please let me know how this change works for you.
I am following up to see if the information provided has resolved this matter.
Thanks Mike for the solution.