1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Binding Gantt control to Razor page model

Binding Gantt control to Razor page model

I have found a couple of examples for MVC but is there a way to bind the Gantt chart to the Razor page model and perform crud actions.  For example after a task is edited call a function in the model to update a database.

Something like endEdit="Model.UpdateRecord" would be ideal where in the model I have 'public void UpdateRecord(ITaskbarEditedEventArgs<Task> args)'

3 Replies 1 reply marked as answer
MS Monisha Sivanthilingam Syncfusion Team October 30, 2020 07:39 AM UTC

Hi Tim, 
 
Thank you for contacting Syncfusion Support. 
 
We have analyzed your query and have prepared a sample according to your requirement. In Gantt, we have provided support to update the CRUD action updates in Gantt control to server by using DataManager support. By using this support in Gantt, we can pass the updated data source to server on CRUD actions. We can define data source for Gantt as instance of DataManager and by using BatchUrl property of DataManager we can update the data source on CRUD operation. The code snippets demonstrate the solution. 
 
 
public ActionResult BatchSave([FromBody]ICRUDModel<TreeGridProjectData> data)  
        {  
             //...  
            if (data.added != null && data.added.Count() > 0)  
            {  
                foreach (var rec in data.added)  
                {  
                    uAdded.Add(this.Create(rec));  
                }  
            }  
  
            ////Performing update operation  
            if (data.changed != null && data.changed.Count() > 0)  
            {  
                foreach (var rec in data.changed)  
                {  
                    uChanged.Add(this.Edit(rec));  
                }  
            }  
  
            //Performing delete operation  
            if (data.deleted != null && data.deleted.Count() > 0)  
            {  
                foreach (var rec in data.deleted)  
                {  
                    uDeleted.Add(this.Delete(rec.taskID));  
                }  
            }  
            return Json(new { addedRecords = uAdded, changedRecords = uChanged, deletedRecords = uDeleted});  
        }  
        public TreeGridProjectData Create(TreeGridProjectData value)  
        {  
            //...  
        }  
  
        public TreeGridProjectData Edit(TreeGridProjectData value)  
        {  
            //...  
        }  
  
  
        public TreeGridProjectData Delete(string value)  
        {  
           //...  
        } 
 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha. 


TF Tim Faircloth October 30, 2020 01:00 PM UTC

Thank you for sample but that appears to still be using a controller in MVC.  Can it work with a razor page where Index.cshtml is the view and Index.cshtml.cs contains the page model information something like you gave here:

https://www.syncfusion.com/forums/152844/there-is-some-example-of-the-grid-with-net-core-2-razor-pages-not-with-mvc-view



PE Punniyamoorthi Elangovan Syncfusion Team November 3, 2020 03:30 AM UTC

Hi Tim, 

We have analyzed your query and created a sample based on you requirement. In the below sample, we have rendered the Essential JS2 Gantt component in ASP.NET core with Razor pages and perform CRUD operation in Gantt.   
  
Kindly refer to the below code example and sample for more information.   
  
<ejs-gantt id='RemoteData' treeColumnIndex="0" load="onLoad" height="450px"> 
        <e-data-manager url="/Index?handler=DataSource" batchUrl="/Index?handler=BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 
        <e-gantt-editsettings allowEditing="true" allowAdding="true" allowDeleting="true" mode="Dialog"></e-gantt-editsettings> 
        <e-gantt-taskfields id="taskID" name="taskName" startDate="startDate" 
                            duration="duration" progress="progress" dependency="Predecessor" parentID="parentID"> 
        </e-gantt-taskfields> 
    </ejs-gantt> 
  
  
Index.cshtml.cs 
  
public JsonResult OnPostBatchUpdate([FromBody] ICRUDModel<TreeGridProjectData> batchmodel) 
        { 
           List<TreeGridProjectData> uAdded = new List<TreeGridProjectData>(); 
            List<TreeGridProjectData> uChanged = new List<TreeGridProjectData>(); 
            List<TreeGridProjectData> uDeleted = new List<TreeGridProjectData>(); 
  
            //Performing insert operation 
            if (batchmodel.added != null && batchmodel.added.Count() > 0) 
            { 
                foreach (var rec in batchmodel.added) 
                { 
                    uAdded.Add(this.Create(rec)); 
                } 
            } 
  
            ////Performing update operation 
            if (batchmodel.changed != null && batchmodel.changed.Count() > 0) 
            { 
                foreach (var rec in batchmodel.changed) 
                { 
                    uChanged.Add(this.Edit(rec)); 
                } 
            } 
  
            //Performing delete operation 
            if (batchmodel.deleted != null && batchmodel.deleted.Count() > 0) 
            { 
                foreach (var rec in batchmodel.deleted) 
                { 
                    uDeleted.Add(this.Delete(rec.taskID)); 
                } 
            } 
            return new JsonResult(new { addedRecords = uAdded, changedRecords = uChanged, deletedRecords = uDeleted });  
             
        } 
You can find the sample from below link 
Regards, 
Punniyamoorthi 


Marked as answer
Loader.
Up arrow icon