1. Home
  2. Forum
  3. Angular
  4. Kanban + Angular Service

Kanban + Angular Service

ello,
Right now I've got an Angular 5 service to perform CRUD operations:

@Injectable()
export class BookService {
    url = "api/books";
    constructor(private http:Http) { }
    getBooksWithObservable(): Observable<Book[]> {
        return this.http.get(this.url)
		   .map(this.extractData)
		   .catch(this.handleErrorObservable);
    }
    addBookWithObservable(book:Book): Observable<Book> {
	let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        return this.http.post(this.url, book, options)
                   .map(this.extractData)
                   .catch(this.handleErrorObservable);
    }	
    private extractData(res: Response) {
	let body = res.json();
        return body || {};
    }
    private handleErrorObservable (error: Response | any) {
	console.error(error.message || error);
	return Observable.throw(error.message || error);
    }
}

Then, in the controller, I declared a variable called kanbanData (JS Object) and use that as data source.
For displaying items this works fine, but I need to capture the "add item" to call the service.
Should I create a customAdaptor and then call the service form there? Do you guys have an example?

Thanks!

2 Replies
GC Guillermo Colmenero July 1, 2018 07:03 PM UTC

I try this to check if I could capture the insertion, but did't work:

        this.customAdaptor =  new ej.Adaptor(this.kanbanData).extend({
            insert: function (dataObj, data) {
                console.log("insert:" + data);
                return dataObj.dataSource.json.push(data);
            },
            // reused process query from json adaptor
            processQuery: ej.JsonAdaptor.prototype.processQuery
        });

        this.dataManager = new ej.DataManager(
            {
                dataSource: this.kanbanData,
                adaptor: this.customAdaptor,
            }
        );

kanbanData is the JSON that contains the data for the widget.

BS Buvana Sathasivam Syncfusion Team July 6, 2018 05:38 PM UTC

Hi Guillermo, 

Thanks for your patience. 

You can trigger post method when add/delete/update data on database using customAdaptor in the following sample level solution.  We have prepared Kanban sample using angular with webAPI services.  Custom adaptor used to customize adaptors in DataManager.  It is useful to write own adaptor.  In Web API, BatchRequest function is called when performing update/delete/add data in the database.  You have to specify the Batch request function type as ‘Post’ and then send ‘Post’ request to the controller. 

You can also use dataManager with adaptor for initial rendering of load data. 

WebApiConfig file specifies the routeTemplate in the following way:    
   
  routeTemplate: "api/{controller}/{id}"    
   
 
Please refer to the below code. 
Kanban.component.html 
 
<ej-kanban [dataSource]="kanbanData"  …>  // Render Kanban control 
</ej-kanban> 
 
Kanban.component.ts 
 
constructor() { 
         
         let customAdaptor = new ej.WebApiAdaptor().extend({  // Extend web API adaptor 
           batchRequest: function (dm, changes, e, query) { // Automatically called when update/add/delete operation performed in Kanban control 
                var response = {  // Specified response variable 
                    changed: changes.changed, 
                    added: changes.added, 
                    deleted: changes.deleted, 
                    action: "batch", 
                    table: e.url, 
                    key: e.key 
                }; 
                if (query) 
                    this.addParams({ dm: dm, query: query, params: query._params }); 
                return {  
                    type: "POST", // Send Post request to the controller 
                    url:  dm.dataSource.url, // send url (api/Employee) into post request 
                    contentType: "application/json; charset=utf-8", 
                    dataType: "json", 
                    data: JSON.stringify(response) // Response variable was passed to controller 
                }; 
            }   
  });  
     let datamanager = new ej.DataManager({ 
            url:"http://localhost:63187/api/Employee", // Here, Kanban is a controller name and don’t specify crudURL 
            crossDomain: true, 
            adaptor: new customAdaptor()   // Specified custom adaptor 
         });  
        this.kanbanData = datamanager;   
    } 
 
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() // Call when load Kanban 
        { 
            await Task.Delay(1000); 
 
            var queryString = HttpContext.Current.Request.QueryString; 
            var data = repository.GetAll().ToList(); 
            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] DetailData emp) // Call when update, add and delete operation performed    
     
(Here, passed data variables(emp) and class type(DetailData) specified in same parameters. Otherwise this post was not called)     
 
        { 
            …………… // You can perform database operation  
            return Content(HttpStatusCode.OK, emp); 
        } 
 
 
public class DetailData    // Here specified vaiables on batchRequest post data variables    
        { 
            public List<Employee> Added { get; set; } 
            public List<Employee> Changed { get; set; } 
            public List<Employee> Deleted { get; set; } 
            public string action { get; set; } 
            public string table { get; set; } 
            public string key { get; set; } 
        } 

Refer to the following WEB API Sample and run the below sample on the following steps. 
  1. Open command prompt and navigate to this sample project and navigate to angular seed folder and type ‘npm install’.
  2. Restore the packages in the MVC app and the run the app
  3. Now, run the project and navigate URL as http://localhost:63187/angular2-seeds/#/kanban
 

Regards, 
Buvana S 

 


Loader.
Up arrow icon