1. Home
  2. Forum
  3. ASP.NET Core
  4. persist data to the server

persist data to the server

Hello,

I'am using the kanban control in an asp.net core 2.0 application like this:

<ej-kanban id="KanbanBoard" key-field="Status">
    <e-kanbancolumns>
        <e-kanbancolumn header-text="Backlog" key=@(new List<string>(){"Open"})>
        </e-kanbancolumn>
        <e-kanbancolumn header-text="In Progress" key=@(new List<string>() {"InProgress"})></e-kanbancolumn>
        <e-kanbancolumn header-text="Done" key=@(new List<string>() {"Close"})></e-kanbancolumn>
    </e-kanbancolumns>
    <e-kanbanfield content="Summary" primary-key="Id">
    </e-kanbanfield>
    <e-kanbanedit-settings allow-editing="true" allow-adding="true">
        <e-kanbanedit-items>
            <e-kanbanedit-item field="Id"></e-kanbanedit-item>
            <e-kanbanedit-item field="Status" edit-type="Dropdown"></e-kanbanedit-item>
            <e-kanbanedit-item field="Assignee" edit-type="Dropdown"></e-kanbanedit-item>
            <e-kanbanedit-item field="Estimate" edit-type="Numeric" numeric-edit-options=@(new Syncfusion.JavaScript.Models.EditorProperties() { DecimalPlaces=2 })>
            </e-kanbanedit-item>
            <e-kanbanedit-item field="Summary" edit-type="TextArea" text-area-options=@(new Syncfusion.JavaScript.Models.KanbanTextAreaProperties() { Height="100", Width="200"})>
            </e-kanbanedit-item>
        </e-kanbanedit-items>
    </e-kanbanedit-settings>
</ej-kanban>

Now i am trying to persist the edits to the server, but can't get it to work.

5 Replies
AP Arun Palaniyandi Syncfusion Team October 11, 2017 10:51 AM UTC

Hi Dennis,    
   
Thanks for using Syncfusion Products.   
 
We have checked your shared code and we found that you have not bound the datasource and Crud url with ejDatamanager. Hence we had prepared a Kanban Core 2.0 sample with CRUD operations using ejDataManager. URL property is used to load data into Kanban and CrudURL property is used to get post action for processing adding/editing/deleting/updating data’s. You can use the below solution to perform CRUD actions. Please refer to the below code example and sample.    
    
Index.cshtml    
    
<ej-kanban id="KanbanBoard" key-field="Status">    
    <e-datamanager url="Home/GetData" // To load Kanban data    
                   crud-url="Home/Crud"  // To perform CRUD opeations    
                   adaptor="UrlAdaptor">  //Define dataManager    
     </e-datamanager>    
……….    
</ej-kanban>    
           
   
HomeController.cs    
public class HomeController : Controller    
    {    
        private KanbanDataContext _context;    
        public IActionResult Index()    
        {    
               
            return View();    
        }    
        
        public ActionResult GetData(Syncfusion.JavaScript.DataManager value)    
        {    
            List<KanbanTask> datas = _context.Tasks.Take(50).ToList(); // Get all Kanban data    
            DataResult result1 = new DataResult();    
            DataOperations operation = new DataOperations();    
            result1.result = datas;    
            result1.count = datas.AsQueryable().Count();    
            if (value.Skip > 0)    
                result1.result = operation.PerformSkip(result1.result, value.Skip);    
            if (value.Take > 0)    
                result1.result = operation.PerformTake(result1.result, value.Take);    
            return Json(result1);    
        }    
            
        //Edit multiple cards for priority drag and drop       
        public object Crud([FromBody] KanbanCRUDParams param)    
        {    
            var value = param.value;    
            if (param.action == "insert" || (param.action == "batch" && (param.added.Count > 0))) // this block of code will execute while inserting the card    
            {    
                {    
                    // Insert card in the database.    
                    DataResult result1 = new DataResult();    
                    if (param.added != null && param.added.Count() > 0)    
                    {    
                        foreach (var temp in param.added)    
                        {    
                            _context.Tasks.Add(temp);    
                        }    
                    }    
                    _context.SaveChanges();    
                    var data = _context.Tasks.ToList();    
                    return Json(result1);    
                }    
            }    
            if ((param.action == "remove") || (param.action == "batch" && (param.deleted.Count > 0))) // this block of code will execute while delete the card    
            {    
                foreach (var temp in param.deleted)    
                {    
                    KanbanTask old = _context.Tasks.Where(o => o.Id == temp.Id).SingleOrDefault();    
                    if (old != null) _context.Tasks.Remove(old);    
                }    
    
                _context.SaveChanges();    
            }    
    
           // when perform update operations    
            if (param.changed != null && param.changed.Count() > 0)    
            {    
                foreach (var temp in param.changed)    
                {    
                    KanbanTask old = _context.Tasks.Where(o => o.Id == temp.Id).SingleOrDefault();    
                    if (old != null)    
                    {    
                        KanbanTask update = _context.Tasks.Single(A => A.Id == temp.Id);    
                        update.Id = temp.Id;    
                        update.Status = temp.Status;    
                        update.Summary = temp.Summary;    
                        update.Type = temp.Type;    
                        update.Priority = temp.Priority;    
                        update.Tags = temp.Tags;    
                        update.Estimate = temp.Estimate;    
                        update.Assignee = temp.Assignee;    
                        update.ImgUrl = temp.ImgUrl;    
                        update.RankId = temp.RankId;    
                    }    
                }    
            }    
            _context.SaveChanges();// Save changed data on database        
    
            List<KanbanTask> datasource = _context.Tasks.Take(500).ToList();    
            return datasource;    
        }    
    
        public class DataResult    
        {    
            public IEnumerable result { get; set; }    
            public int count { get; set; }    
        }    
    
           
        public HomeController(KanbanDataContext context)    
        {    
            _context = context;    
        }    
    }    
       
 
We have also prepared a sample for your reference below.  
 
 
If the provided information and sample does not meet your requirement, please get back to us with more information, so that it will help us to provide the solution at earliest. 
  
Regards, 
Arun P. 


DE Dennis October 12, 2017 07:34 AM UTC

Thank you for the sample, i have tried the sample and have 2 questions regarding the sample:

1) i tried the datamanager and it makes 2 requests to the getdata method, is that correct? is it also posible to use the other adaptors webapi in cross domain situatiions with the Kanban board?

2) the dropdowns do not get populated when editing do in need to configure something extra to the datamanager? it does work when i use viewbag.datasource


BS Buvana Sathasivam Syncfusion Team October 13, 2017 12:20 PM UTC

Hi Dennis, 

Thanks for your update. 

Query #1: “ i tried the datamanager and it makes 2 requests to the getdata method, is that correct?” 

Yes, this is a normal behavior of our Kanban control.  If you have enable editing and context menu properties, getData method will be triggered to three times.  At the first time, GetData method is called to load data into Kanban board.  The second time, the GetData method is called to load sub context menu options of move to swimlane data.  Then the third time, the GetData method is called to load data into Kanban edit dialog forms.  So, the method is called based on properties of Kanban control.  If you perform any data operation like CRUD operations, then the GetData method was triggered after the CRUD method was triggered because of load modified data content into Kanban board.   
 
Query #2: “is it also posible to use the other adaptors webapi in cross domain situatiions with the Kanban board?” 
Datamanager is now provided with edit support for WebAPI from 15.3.0.26 version. Please let us know what kind of adaptor used in your sample to provide sample in that case. 
 
Query #3: “2) the dropdowns do not get populated when editing do in need to configure something extra to the datamanager? it does work when i use viewbag.datasource” 
Could you please confirm, you are facing following issue.  If you double click the card, dialog form dropdown popup list was not shown.  Please refer to the following screenshot. 
 
 
Please let us know if we have misunderstood the above issue.  If so, provide more details (like your code or share screenshot) regarding your issue so that we can check and provide an appropriate solution.               
 
Regards, 
Buvana S. 


DE Dennis October 16, 2017 06:20 AM UTC

i would like to use the web api adopter in my sample. And you are correct in your assumption that the dropdown(s) list entries are not shown/loaded.


BS Buvana Sathasivam Syncfusion Team October 20, 2017 05:26 PM UTC

Hi Dennis, 
  
Thanks for your update. 
  
Query #1: “i would like to use the web api adopter in my sample” 
  
We have created Kanban sample using web api adaptor.  Web API batch editing is used to request to add, remove and change are handled together at a time rather than passing the request separately for each operation.  In our controller contains post, put and delete methods which will return as JSON data. The dataManager will make requests to this action based on route name.  
  
Please refer the below UG documentation for routing operations. 
  
  
Please refer to the following code. 
  
Insert.cshtml 
  
  
@(Html.EJ().Kanban("Kanban") 
       .DataSource(data => data.URL("/api/Employee").BatchURL("/api/batch").UpdateURL("/put").RemoveURL("/delete").InsertURL("/post").Adaptor(AdaptorType.WebApiAdaptor)) 
      …………. 
) 
  
  
EmployeeController.cs 
  
public class EmployeeController : ApiController 
    { 
        static readonly IEmployeeRepository repository = new EmployeeRepository(); 
        // GET api/<controller> 
        [Route("get")] 
        // GET api/values  
        public async Task<object> Get()   
        { 
            await Task.Delay(1000); 
  
            var queryString = HttpContext.Current.Request.QueryString; 
            var data = repository.GetAll().ToList(); // Get all Kanban card 
            return new { Items = data, Count = data.Count() }; 
        } 
        
  
        public Employee GetEmployee(int id) 
        { 
            Employee emp = repository.Get(id); 
            if (emp == null) 
            { 
               throw new HttpResponseException(HttpStatusCode.NotFound); 
            } 
            return emp; 
        } 
  
        [Route("post")] 
        public async Task<IHttpActionResult> Post([FromBody] Employee emp) 
        {     // Triggered when insert new card 
  
            if (emp == null) 
            { 
                return BadRequest(ModelState); 
            } 
            emp = repository.Add(emp); 
            return Content(HttpStatusCode.OK, emp); 
        } 
  
        [Route("put")] 
        public async Task<IHttpActionResult> Put([FromBody] Employee emp) 
        {    //Triggered when update card 
  
            await Task.Delay(1000); 
            if (emp == null) 
            { 
                return BadRequest(ModelState); 
            } 
            else  
            { 
  
                if (!repository.Update(emp)) 
                { 
                    throw new HttpResponseException(HttpStatusCode.NotFound); 
                } 
                return Content(HttpStatusCode.OK, emp); 
            } 
             
        } 
  
        [Route("delete/{id}")] 
        public async Task<IHttpActionResult> Delete(int id) 
        {     // Triggered when delete card 
  
            Employee emp = repository.Get(id); 
            await Task.Delay(1000); 
            if (emp == null) 
            { 
                return NotFound(); 
            } 
            else 
            { 
                repository.Remove(id); 
                return StatusCode(HttpStatusCode.OK); 
            } 
        } 
    } 
  
  
  
  
Query #2: “i would like to use the web api adopter in my sample.  And you are correct in your assumption that the dropdown(s) list entries are not shown/loaded.” 
  
We were able to reproduce the problem and have logged defect report regarding this. A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates  
  
  
Regards, 
Buvana S. 
  


Loader.
Up arrow icon