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.