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.