Gantt Chart Scheduling Module

Title:

BI{code} ?

Hi, I the ASP Awesome grid is awesome, and I was curious if ASP Awesome had a Gantt Chart control or any plans to add a control for Gantt Scheduling. Example below: https://www.gantt.com/

Save Changes Cancel

eliawesome

asked at 03 Jun 2021

Answers

• BI{code} ?

  using the data in our demo you could try this sample: controller: public ActionResult GridData(GridParams g) { var data = Db.Meetings.AsQueryable(); var gmb = new GridModelBuilder<Meeting>(g); data = gmb.OrderBy(data); var count = data.Count(); var page = gmb.GetPage(data); return Json(new {page, count}); } view: @(Html.Awe().Grid("Meetings") .DataFunc("getGridModel") .Height(350) .Columns( new Column{ Bind = "Id", Width = 100 }, new Column{ Bind = "Title"}, new Column{ Bind = "Start"}, new Column{ Bind = "End"} )) <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script> function getGridModel(sgp) { return $.when($.get('@Url.Action("GridData")', sgp)).then(function(res) { return buildGridModel(sgp, res); }); } function buildGridModel(sgp, res) { var gp = utils.getGridParams(sgp); awef.loop(res.page, function(itm) { // parse dates, in mvc5 itm.Start is a string like /Date(1624377600000)/ itm.Start = utils.toDate(itm.Start); itm.End = utils.toDate(itm.End); }); tryDrawChart(res.page); var opt = { gp: gp, key: "Id", pageItems: res.page, itemsCount: res.count, map: function(itm) { return { Id: itm.Id, Title: itm.Title, Start: awem.formatDate('d/m/yy', itm.Start), End: awem.formatDate('d/m/yy', itm.End) } } }; return utils.gridModelBuilder(opt); } google.charts.load('current', { 'packages': ['gantt'] }); function drawChart(cdata) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task ID'); data.addColumn('string', 'Task Name'); data.addColumn('date', 'Start Date'); data.addColumn('date', 'End Date'); data.addColumn('number', 'Duration'); data.addColumn('number', 'Percent Complete'); data.addColumn('string', 'Dependencies'); var arr = []; awef.loop(cdata, function (itm) { arr.push([itm.Id.toString(), itm.Title, itm.Start, itm.End, null, 0, null]); }); data.addRows(arr); var options = { height: data.getNumberOfRows() * 42 + 70, width: data.getNumberOfRows() * 300 }; var chart = new google.visualization.Gantt(document.getElementById('chart_div')); chart.draw(data, options); } // try until google js is loaded function tryDrawChart(cdata, atp) { if (google.visualization.Gantt) { drawChart(cdata); } else { if (atp && atp > 5) return; setTimeout(function() { tryDrawChart(cdata, (atp || 1) + 1); }, 1000); } } </script> <br/> <br/> <div id="chart_div" style="overflow: auto;"></div>

  Save Changes Cancel

  

  Omu

  answered at 05 Jun 2021

  • Thank you for the help!
    at 09 Jun 2021 eliawesome

please Sign In to leave an answer