{"id":2250,"date":"2014-05-14T12:00:21","date_gmt":"2014-05-14T08:00:21","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2250"},"modified":"2026-06-12T17:53:29","modified_gmt":"2026-06-12T14:53:29","slug":"using-dhtmlx-gantt-chart-asp-net-mvc","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/using-dhtmlx-gantt-chart-asp-net-mvc\/","title":{"rendered":"Gantt Chart for ASP.NET MVC with dhtmlxGantt"},"content":{"rendered":"

We have an updated tutorial of how to use dhtmlxGantt with ASP.NET on the server side<\/a>. Unlike this guide, we use REST API so that the code appears far more simple.<\/strong><\/p>\n

The Gantt component is available in both free and paid editions. The free Community Edition<\/a> is distributed under the MIT license, which allows using the core Gantt functionality in commercial and open-source projects. The PRO Edition comes with a powerful pack of advanced features and professional tech support offered under commercial DHTMLX licenses.<\/p>\n

This tutorial will lead you through the steps required to integrate dhtmlxGantt into an ASP.NET MVC application. We will learn how to put this Ajax-based Gantt chart on a web page, load tasks from the .NET server side, and update them in the database when a user makes changes in the browser.<\/p>\n

\"Gantt<\/p>\n

If you are familiar with ASP.NET MVC and dhtmlxGantt and you just want to dive into the code, download the final demo app<\/a><\/b>.<\/p>\n

NOTE: The sample goes without pre-downloaded NuGet packages. They will be installed automatically when you Build the project in Visual Studio. If it doesn’t happen, you can either configure Visual Studio to restore missing packages during the build<\/a>, or install them manually by this command in Package Manager Console:<\/p>\n

Update-Package-Reinstall<\/div><\/div>\n

\"download<\/a><\/p>\n

If you need the detailed instructions on how to use dhtmlxGantt with ASP.NET MVC, keep reading the tutorial.<\/p>\n

Getting Started<\/h3>\n

First of all, you need to create a new MVC project.<\/p>\n

\"dhtmlxGantt<\/p>\n

The next things you need are dhtmlxGantt<\/a> and EntityFramework<\/a> libraries. You can install them using Nuget Package Manager.<\/p>\n

Once all necessary libraries are installed you can proceed to the first step.<\/p>\n

<\/p>\n

Step 1 \u2013 Initialization<\/h3>\n

First of all, you need to add links to the dhtmlxGantt files. Open the _Layout.cshtml<\/strong> file and modify it as follows:<\/p>\n

@<\/span>ViewBag.Title<\/span>
\n<<\/span>script src=<\/span>"~\/Scripts\/dhtmlxgantt\/dhtmlxgantt.js"<\/span> type=<\/span>"text\/javascript"<\/span> charset=<\/span>"utf-8"<\/span>><\/<\/span>script><\/span>
\n 
\n@<\/span>RenderBody(<\/span>)<\/span>
\n
\n<<\/span>script src=<\/span>"~\/Scripts\/main.js"<\/span> type=<\/span>"text\/javascript"<\/span> charset=<\/span>"utf-8"<\/span>><\/<\/span>script><\/span><\/div><\/div>\n

Then create HomeController<\/em> with Index action. Add this HTML container for dhtmlxGantt to the Index view:<\/p>\n

<\/div>\n

After that we need to add code that initializes the Gantt chart on a page. Create main.js<\/strong> file in the Scripts<\/strong> folder and fill it with the following data:<\/p>\n

(<\/span>function<\/span> (<\/span>)<\/span> {<\/span>
\n\/\/ add month scale<\/span>
\ngantt.config<\/span>.scale_unit<\/span> =<\/span> "week"<\/span>;<\/span>
\ngantt.config<\/span>.step<\/span> =<\/span> 1<\/span>;<\/span>
\ngantt.templates<\/span>.date_scale<\/span> =<\/span> function<\/span> (<\/span>date)<\/span> {<\/span>
\nvar<\/span> dateToStr =<\/span> gantt.date<\/span>.date_to_str<\/span>(<\/span>"%d %M"<\/span>)<\/span>;<\/span>
\nvar<\/span> endDate =<\/span> gantt.date<\/span>.add<\/span>(<\/span>gantt.date<\/span>.add<\/span>(<\/span>date,<\/span> 1<\/span>,<\/span> "week"<\/span>)<\/span>,<\/span> -<\/span>1<\/span>,<\/span> "day"<\/span>)<\/span>;<\/span>
\nreturn<\/span> dateToStr(<\/span>date)<\/span> +<\/span> " - "<\/span> +<\/span> dateToStr(<\/span>endDate)<\/span>;<\/span>
\n}<\/span>;<\/span>
\ngantt.config<\/span>.subscales<\/span> =<\/span> [<\/span>
\n{<\/span> unit:<\/span> "day"<\/span>,<\/span> step:<\/span> 1<\/span>,<\/span> date:<\/span> "%D"<\/span> }<\/span>
\n]<\/span>;<\/span>
\ngantt.config<\/span>.scale_height<\/span> =<\/span> 50<\/span>;<\/span>
\n
\n\/\/ configure milestone description<\/span>
\ngantt.templates<\/span>.rightside_text<\/span> =<\/span> function<\/span> (<\/span>start,<\/span> end,<\/span> task)<\/span> {<\/span>
\nif<\/span> (<\/span>task.type<\/span> ==<\/span> gantt.config<\/span>.types<\/span>.milestone<\/span>)<\/span> {<\/span>
\nreturn<\/span> task.text<\/span>;<\/span>
\n}<\/span>
\nreturn<\/span> ""<\/span>;<\/span>
\n}<\/span>;<\/span>
\n\/\/ add section to type selection: task, project or milestone<\/span>
\ngantt.config<\/span>.lightbox<\/span>.sections<\/span> =<\/span> [<\/span>
\n{<\/span> name:<\/span> "description"<\/span>,<\/span> height:<\/span> 70<\/span>,<\/span> map_to:<\/span> "text"<\/span>,<\/span> type:<\/span> "textarea"<\/span>,<\/span> focus:<\/span> true<\/span> }<\/span>,<\/span>
\n{<\/span> name:<\/span> "type"<\/span>,<\/span> type:<\/span> "typeselect"<\/span>,<\/span> map_to:<\/span> "type"<\/span> }<\/span>,<\/span>
\n{<\/span> name:<\/span> "time"<\/span>,<\/span> height:<\/span> 72<\/span>,<\/span> type:<\/span> "duration"<\/span>,<\/span> map_to:<\/span> "auto"<\/span> }<\/span>
\n]<\/span>;<\/span>
\n
\ngantt.config<\/span>.xml_date<\/span> =<\/span> "%Y-%m-%d %H:%i:%s"<\/span>;<\/span> \/\/ format of dates in XML<\/span>
\ngantt.init<\/span>(<\/span>"ganttContainer"<\/span>)<\/span>;<\/span> \/\/ initialize gantt<\/span>
\n}<\/span>)<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

At this point, the running application will look like this (no data yet):<\/p>\n

\"dhtmlxGantt<\/p>\n

Step 2 \u2013 Creating Task and Link Models<\/h3>\n

Now we need to create models to store our tasks and links. In this sample we use EF Code First, so you don’t need to create database tables manually. Let’s create Task<\/em> and Link<\/em> classes in Model<\/strong> folder:<\/p>\n

public<\/span> class<\/span> GanttTask
\n{<\/span>
\npublic<\/span> int<\/span> GanttTaskId {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\n[<\/span>MaxLength(<\/span>255<\/span>)<\/span>]<\/span>
\npublic<\/span> string<\/span> Text {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> DateTime StartDate {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> int<\/span> Duration {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> decimal<\/span> Progress {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> int<\/span> SortOrder {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> string<\/span> Type {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> int<\/span>?<\/span> ParentId {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\n}<\/span>
\n
\npublic<\/span> class<\/span> GanttLink
\n{<\/span>
\npublic<\/span> int<\/span> GanttLinkId {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\n[<\/span>MaxLength(<\/span>1<\/span>)<\/span>]<\/span>
\npublic<\/span> string<\/span> Type {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> int<\/span> SourceTaskId {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> int<\/span> TargetTaskId {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\n}<\/span><\/div><\/div>\n

Note that classes for Tasks and Links can have any number of custom columns that can be accessed on the client-side.<\/p>\n

The next step is to create the database context class. Create a new folder DAL<\/strong> (for Data Access Layer). In that folder create a new class file named GanttContext.cs<\/strong>, and replace the template code with the following code:<\/p>\n

public<\/span> class<\/span> GanttContext :<\/span> DbContext
\n{<\/span>
\npublic<\/span> GanttContext(<\/span>)<\/span> :<\/span> base<\/span>(<\/span>"GanttContext"<\/span>)<\/span> {<\/span> }<\/span>
\n
\npublic<\/span> DbSet GanttTasks {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\npublic<\/span> DbSet GanttLinks {<\/span> get<\/span>;<\/span> set<\/span>;<\/span> }<\/span>
\n}<\/span><\/div><\/div>\n

In this class, we link our models with database. The context class will use connection string named “GanttContext”, so you’ll need to define one in order to fetch the database.<\/p>\n

Step 3 \u2013 Loading Data<\/h3>\n

Now it came the turn of loading data. The client-side dhtmlxGantt component uses simple JSON structure<\/a>. Basically it is an object with two array properties, one for the links and one for the tasks. Task dates should be serialized in format specified in gantt.config.xml_date<\/a>, that has been defined in the main.js<\/strong>. We need to create a JSON object with two arrays for Tasks<\/em> and Links<\/em>.<\/p>\n

Add Data<\/em> action to HomeController.cs<\/strong> and GanttContext<\/em> variable to access the database:<\/p>\n

\/\/ database access<\/span>
\nprivate<\/span> readonly<\/span> GanttContext db =<\/span> new<\/span> GanttContext(<\/span>)<\/span>;<\/span>
\n
\npublic<\/span> JsonResult GetGanttData(<\/span>)<\/span>
\n{<\/span>
\nvar<\/span> jsonData =<\/span> new<\/span>
\n{<\/span>
\n\/\/ create tasks array<\/span>
\ndata =<\/span> (<\/span>
\nfrom<\/span> t in<\/span> db.<\/span>GanttTasks<\/span>.<\/span>AsEnumerable<\/span>(<\/span>)<\/span>
\nselect<\/span> new<\/span>
\n{<\/span>
\nid =<\/span> t.<\/span>GanttTaskId<\/span>,
\ntext =<\/span> t.<\/span>Text<\/span>,
\nstart_date =<\/span> t.<\/span>StartDate<\/span>.<\/span>ToString<\/span>(<\/span>"u"<\/span>)<\/span>,
\nduration =<\/span> t.<\/span>Duration<\/span>,
\norder =<\/span> t.<\/span>SortOrder<\/span>,
\nprogress =<\/span> t.<\/span>Progress<\/span>,
\nopen =<\/span> true<\/span>,
\nparent =<\/span> t.<\/span>ParentId<\/span>,
\ntype =<\/span> (<\/span>t.<\/span>Type<\/span> !=<\/span> null<\/span>)<\/span> ?<\/span> t.<\/span>Type<\/span> :<\/span> String<\/span>.<\/span>Empty<\/span>
\n}<\/span>
\n)<\/span>.<\/span>ToArray<\/span>(<\/span>)<\/span>,
\n\/\/ create links array<\/span>
\nlinks =<\/span> (<\/span>
\nfrom<\/span> l in<\/span> db.<\/span>GanttLinks<\/span>.<\/span>AsEnumerable<\/span>(<\/span>)<\/span>
\nselect<\/span> new<\/span>
\n{<\/span>
\nid =<\/span> l.<\/span>GanttLinkId<\/span>,
\nsource =<\/span> l.<\/span>SourceTaskId<\/span>,
\ntarget =<\/span> l.<\/span>TargetTaskId<\/span>,
\ntype =<\/span> l.<\/span>Type<\/span>
\n}<\/span>
\n)<\/span>.<\/span>ToArray<\/span>(<\/span>)<\/span>
\n}<\/span>;<\/span>
\n
\nreturn<\/span> new<\/span> JsonResult {<\/span> Data =<\/span> jsonData, JsonRequestBehavior =<\/span> JsonRequestBehavior.<\/span>AllowGet<\/span> }<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n
gantt.load<\/span>(<\/span>"\/Home\/Data"<\/span>,<\/span> "json"<\/span>)<\/span>;<\/span><\/div><\/div>\n

Now dhtmlxGantt is able to load data. However our database is empty so let’s configure entity framework to initialize the database with test data. In the DAL<\/strong> folder, create a new class file named GanttInitializer.cs<\/strong> and replace the template code with the following code, which causes a database to be created when needed and loads test data into the new database:<\/p>\n

public<\/span> class<\/span> GanttInitializer :<\/span> DropCreateDatabaseIfModelChanges
\n{<\/span>
\n  protected<\/span> override<\/span> void<\/span> Seed(<\/span>GanttContext context)<\/span>
\n  {<\/span>
\n    List tasks =<\/span> new<\/span> List(<\/span>)<\/span>
\n    {<\/span>
\n      new<\/span> GanttTask(<\/span>)<\/span> {<\/span> GanttTaskId =<\/span> 1<\/span>, Text =<\/span> "Project #2"<\/span>, StartDate =<\/span> DateTime.<\/span>Now<\/span>.<\/span>AddHours<\/span>(<\/span>-<\/span>3<\/span>)<\/span>,
\n      Duration =<\/span> 18<\/span>, SortOrder =<\/span> 10<\/span>, Progress =<\/span> 0.<\/span>4m, ParentId =<\/span> null<\/span> }<\/span>,
\n      new<\/span> GanttTask(<\/span>)<\/span> {<\/span> GanttTaskId =<\/span> 2<\/span>, Text =<\/span> "Task #1"<\/span>, StartDate =<\/span> DateTime.<\/span>Now<\/span>.<\/span>AddHours<\/span>(<\/span>-<\/span>2<\/span>)<\/span>,
\n      Duration =<\/span> 8<\/span>, SortOrder =<\/span> 10<\/span>, Progress =<\/span> 0.<\/span>6m, ParentId =<\/span> 1<\/span> }<\/span>,
\n      new<\/span> GanttTask(<\/span>)<\/span> {<\/span> GanttTaskId =<\/span> 3<\/span>, Text =<\/span> "Task #2"<\/span>, StartDate =<\/span> DateTime.<\/span>Now<\/span>.<\/span>AddHours<\/span>(<\/span>-<\/span>1<\/span>)<\/span>,
\n      Duration =<\/span> 8<\/span>, SortOrder =<\/span> 20<\/span>, Progress =<\/span> 0.<\/span>6m, ParentId =<\/span> 1<\/span> }<\/span>
\n    }<\/span>;<\/span>
\n    tasks.<\/span>ForEach<\/span>(<\/span>s =><\/span> context.<\/span>GanttTasks<\/span>.<\/span>Add<\/span>(<\/span>s)<\/span>)<\/span>;<\/span>
\n    context.<\/span>SaveChanges<\/span>(<\/span>)<\/span>;<\/span>
\n
\n    List links =<\/span> new<\/span> List(<\/span>)<\/span>
\n    {<\/span>
\n      new<\/span> GanttLink(<\/span>)<\/span> {<\/span> GanttLinkId =<\/span> 1<\/span>, SourceTaskId =<\/span> 1<\/span>, TargetTaskId =<\/span> 2<\/span>, Type =<\/span> \u201c1<\/span>\u201d }<\/span>,
\n      new<\/span> GanttLink(<\/span>)<\/span> {<\/span> GanttLinkId =<\/span> 2<\/span>, SourceTaskId =<\/span> 2<\/span>, TargetTaskId =<\/span> 3<\/span>, Type =<\/span> \u201c0<\/span>\u201d }<\/span>
\n    }<\/span>;<\/span>
\n
\n    links.<\/span>ForEach<\/span>(<\/span>s =><\/span> context.<\/span>GanttLinks<\/span>.<\/span>Add<\/span>(<\/span>s)<\/span>)<\/span>;<\/span>
\n    context.<\/span>SaveChanges<\/span>(<\/span>)<\/span>;<\/span>
\n  }<\/span>
\n}<\/span><\/div><\/div>\n

The Seed method takes the database context object as an input parameter, and the code in the method uses
\nthat object to add new entities to the database. For each entity type, the code creates a collection of new entities, adds them to the appropriate DbSet property, and then saves the changes to the database.<\/p>\n

To tell Entity Framework to use your initializer class, add an element to the entityFramework<\/em> element in the application Web.config<\/strong> file.<\/p>\n

dhtmlxGantt is now ready for loading data. If you run your application, it will look like this:<\/p>\n

\"dhtmlxGantt<\/p>\n

Step 4 \u2013 Saving Changes to the Database<\/h3>\n

After all the steps described above, we’ve built a Gantt chart that loads the tasks from the database but that’s not enough. Our next goal is to save changes made on the client side to the server. For this we will use dataProcessor<\/a> on the client. This library is integrated into dhtmlxGantt and automatically traces the changes made on the client side and sends updates to the server, so we need to configure the server to handle these requests.<\/p>\n

First of all, we need a class which will parse and represent data action sent from the client. Create a new GanttRequest<\/em> model in the Model<\/strong> folder and add the following code:<\/p>\n

public<\/span> enum<\/span> GanttMode
\n{<\/span>
\nTasks,
\nLinks
\n}<\/span>
\n
\npublic<\/span> enum<\/span> GanttAction
\n{<\/span>
\nInserted,
\nUpdated,
\nDeleted,
\nError
\n}<\/span>
\n
\npublic<\/span> static<\/span> List Parse(<\/span>FormCollection form, string<\/span> ganttMode)<\/span>
\n{<\/span>
\n\/\/ save current culture and change it to InvariantCulture for data parsing<\/span>
\nvar<\/span> currentCulture =<\/span> Thread.<\/span>CurrentThread<\/span>.<\/span>CurrentCulture<\/span>;<\/span>
\nThread.<\/span>CurrentThread<\/span>.<\/span>CurrentCulture<\/span> =<\/span> CultureInfo.<\/span>InvariantCulture<\/span>;<\/span>
\n
\nvar<\/span> dataActions =<\/span> new<\/span> List(<\/span>)<\/span>;<\/span>
\nvar<\/span> prefixes =<\/span> form[<\/span>"ids"<\/span>]<\/span>.<\/span>Split<\/span>(<\/span>','<\/span>)<\/span>;<\/span>
\n
\nforeach<\/span> (<\/span>var<\/span> prefix in<\/span> prefixes)<\/span>
\n{<\/span>
\nvar<\/span> request =<\/span> new<\/span> GanttRequest(<\/span>)<\/span>;<\/span>
\n
\n\/\/ lambda expression for form data parsing<\/span>
\nFunc&<\/span>lt;<\/span>string, string<\/span>&<\/span>gt;<\/span> parse =<\/span> x =&<\/span>gt;<\/span> form[<\/span>String<\/span>.<\/span>Format<\/span>(<\/span>"{0}_{1}"<\/span>, prefix, x)<\/span>]<\/span>;<\/span>
\n
\nrequest.<\/span>Mode<\/span> =<\/span> (<\/span>GanttMode)<\/span>Enum<\/span>.<\/span>Parse<\/span>(<\/span>typeof<\/span>(<\/span>GanttMode)<\/span>, ganttMode, true<\/span>)<\/span>;<\/span>
\nrequest.<\/span>Action<\/span> =<\/span> (<\/span>GanttAction)<\/span>Enum<\/span>.<\/span>Parse<\/span>(<\/span>typeof<\/span>(<\/span>GanttAction)<\/span>, parse(<\/span>"!nativeeditor_status"<\/span>)<\/span>, true<\/span>)<\/span>;<\/span>
\nrequest.<\/span>SourceId<\/span> =<\/span> Int64.<\/span>Parse<\/span>(<\/span>parse(<\/span>"id"<\/span>)<\/span>)<\/span>;<\/span>
\n
\n\/\/ parse gantt task<\/span>
\nif<\/span> (<\/span>request.<\/span>Action<\/span> !=<\/span> GanttAction.<\/span>Deleted<\/span> &<\/span>amp;&<\/span>amp;<\/span> request.<\/span>Mode<\/span> ==<\/span> GanttMode.<\/span>Tasks<\/span>)<\/span>
\n{<\/span>
\nrequest.<\/span>UpdatedTask<\/span> =<\/span> new<\/span> Task(<\/span>)<\/span>
\n{<\/span>
\nId =<\/span> (<\/span>request.<\/span>Action<\/span> ==<\/span> GanttAction.<\/span>Updated<\/span>)<\/span> ?<\/span> (<\/span>int<\/span>)<\/span>request.<\/span>SourceId<\/span> :<\/span> 0<\/span>,
\nText =<\/span> parse(<\/span>"text"<\/span>)<\/span>,
\nStartDate =<\/span> DateTime.<\/span>Parse<\/span>(<\/span>parse(<\/span>"start_date"<\/span>)<\/span>)<\/span>,
\nDuration =<\/span> Int32.<\/span>Parse<\/span>(<\/span>parse(<\/span>"duration"<\/span>)<\/span>)<\/span>,
\nProgress =<\/span> Decimal<\/span>.<\/span>Parse<\/span>(<\/span>parse(<\/span>"progress"<\/span>)<\/span>)<\/span>,
\nParentId =<\/span> (<\/span>parse(<\/span>"parent"<\/span>)<\/span> !=<\/span> "0"<\/span>)<\/span> ?<\/span> Int32.<\/span>Parse<\/span>(<\/span>parse(<\/span>"parent"<\/span>)<\/span>)<\/span> :<\/span> (<\/span>int<\/span>?<\/span>)<\/span>null<\/span>,
\nSortOrder =<\/span> (<\/span>parse(<\/span>"order"<\/span>)<\/span> !=<\/span> null<\/span>)<\/span> ?<\/span> Int32.<\/span>Parse<\/span>(<\/span>parse(<\/span>"order"<\/span>)<\/span>)<\/span> :<\/span> 0<\/span>,
\nType =<\/span> parse(<\/span>"type"<\/span>)<\/span>
\n}<\/span>;<\/span>
\n}<\/span>
\n\/\/ parse gantt link<\/span>
\nelse<\/span> if<\/span> (<\/span>request.<\/span>Action<\/span> !=<\/span> GanttAction.<\/span>Deleted<\/span> &<\/span>amp;&<\/span>amp;<\/span> request.<\/span>Mode<\/span> ==<\/span> GanttMode.<\/span>Links<\/span>)<\/span>
\n{<\/span>
\nrequest.<\/span>UpdatedLink<\/span> =<\/span> new<\/span> Link(<\/span>)<\/span>
\n{<\/span>
\nId =<\/span> (<\/span>request.<\/span>Action<\/span> ==<\/span> GanttAction.<\/span>Updated<\/span>)<\/span> ?<\/span> (<\/span>int<\/span>)<\/span>request.<\/span>SourceId<\/span> :<\/span> 0<\/span>,
\nSourceTaskId =<\/span> Int32.<\/span>Parse<\/span>(<\/span>parse(<\/span>"source"<\/span>)<\/span>)<\/span>,
\nTargetTaskId =<\/span> Int32.<\/span>Parse<\/span>(<\/span>parse(<\/span>"target"<\/span>)<\/span>)<\/span>,
\nType =<\/span> parse(<\/span>"type"<\/span>)<\/span>
\n}<\/span>;<\/span>
\n}<\/span>
\n
\ndataActions.<\/span>Add<\/span>(<\/span>request)<\/span>;<\/span>
\n}<\/span>
\n
\n\/\/ return current culture back<\/span>
\nThread.<\/span>CurrentThread<\/span>.<\/span>CurrentCulture<\/span> =<\/span> currentCulture;<\/span>
\n
\nreturn<\/span> dataActions;<\/span>
\n}<\/span><\/div><\/div>\n

GanttRequest<\/em> class has several properties to store the action info that came from the client side, and one method that creates a collection of data actions from the request values.<\/p>\n

The data is sent from the client in the following format:<\/p>\n

ids:13,
\n13_!nativeeditor_status:"inserted",
\n13_text: "New task"
\n13_duration: 1<\/div><\/div>\n

which is common for all DHTMLX components that use dhtmlxDataprocessor<\/a>.<\/p>\n

A single request may specify operations on several data items. Each property has prefix that links to an id of the related data item. All sent ids are stored in “ids” parameter and separated by commas:<\/p>\n

ids:13,25
\n13_!nativeeditor_status:inserted,
\n25_!nativeeditor_status:updated,
\n...<\/div><\/div>\n

By default, requests for insert\/update contains only one id, while requests for deleting may have multiple items specified. Although, in general case, the request may contain any number of operations of different kind.<\/p>\n

First, we change the current culture to InvariantCulture<\/em>. This is needed for more predictable parsing of request parameters – the format of dates and numbers that comes from a client-side component does not depends on the server-side culture settings. Then we parse request values into collection of individual data actions and store it in request variable (GanttRequest<\/em> class has been defined in Models\/GanttRequest.cs<\/strong>).<\/p>\n

Note that the type of data action is defined by two properties:<\/p>\n

Then we need to configure dhtmlxGantt to load<\/a> data from this actions. Add the following line after the grid initialization in the main.js<\/strong> file:<\/p>\n

In this code we’ve specified scales configuration<\/a> – two line scale that will display days and weeks. Also we defined labels text for milestones and sections of the task details form<\/a>. At the end we’ve specified the format of dates for data loading (this is needed to parse the server-side data correctly) and initialized our Gantt chart.<\/p>\n