title: Angular kendoGrid datatem pass null to backend
body: <p>I'm trying to implement <code>add</code> feature in my project. 
  I did some research, but to no avail. </p>
  
  <p>I did these steps:</p>
  
  <ol>
  <li>I made a <code>component.html</code> with kendoGrid</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;base href="/"&gt;
  &lt;br /&gt;
  &lt;div class="form-group"&gt;
    &lt;label&gt;List of books&lt;/label&gt;
  &lt;/div&gt;
  &lt;!--&lt;ng-template #readOnlyTemplate let-books&gt;--&gt;
  &lt;kendo-grid [data]="books"
              [height]="420"
              (edit)="editHandler($event)" (cancel)="cancelHandler($event)"
              (save)="saveHandler($event)" (remove)="removeHandler($event)"
              (add)="addHandler($event)"
              [navigable]="true"
              (dataStateChange)="onStateChange($event)"
              [kendoGridReactiveEditing]="createFormGroup"&gt;
    &lt;ng-template kendoGridToolbarTemplate&gt;
      &lt;button kendoGridAddCommand type="button"&gt;Add new&lt;/button&gt;
    &lt;/ng-template&gt;
    &lt;kendo-grid-column field="genreID" title="Genre" width="70"&gt;
      &lt;ng-template kendoGridEditTemplate let-dataItem="books"&gt;
        &lt;input [(ngModel)]="books.genreID" kendoGridFocusable name="genreID" class="k-textbox" type="number" required /&gt;
      &lt;/ng-template&gt;
    &lt;/kendo-grid-column&gt;
    &lt;kendo-grid-column field="bookName" title="Name" width="120"&gt;
      &lt;ng-template kendoGridEditTemplate let-dataItem="books"&gt;
        &lt;input [(ngModel)]="books.bookName" kendoGridFocusable name="bookName" class="k-textbox" required /&gt;
      &lt;/ng-template&gt;
    &lt;/kendo-grid-column&gt;
    &lt;kendo-grid-column field="yearOfPublish" title="Year"&gt;
      &lt;ng-template kendoGridEditTemplate let-dataItem="books"&gt;
        &lt;input [(ngModel)]="books.yearOfPublish" kendoGridFocusable name="yearOfPublish" class="k-textbox" type="number" min="876" max="2018" required /&gt;
      &lt;/ng-template&gt;
    &lt;/kendo-grid-column&gt;
    &lt;kendo-grid-command-column title="Action" width="220"&gt;
      &lt;ng-template kendoGridCellTemplate let-isNew="isNew"&gt;
        &lt;button kendoGridEditCommand type="button" [primary]="true"&gt;Edit&lt;/button&gt;
        &lt;button kendoGridRemoveCommand type="button"&gt;Remove&lt;/button&gt;
        &lt;button kendoGridSaveCommand type="button"&gt;
          {{ isNew ? 'Save' : 'Update' }}
        &lt;/button&gt;
        &lt;button kendoGridCancelCommand type="button"&gt;{{ isNew ? 'Discard changes' : 'Cancel' }}&lt;/button&gt;
      &lt;/ng-template&gt;
    &lt;/kendo-grid-command-column&gt;
  
  &lt;/kendo-grid&gt;
  
  &lt;br /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>I made a <code>component.ts</code> with <code>add</code> logic</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class BookListComponent implements OnInit {
  
    public books: Book[] = [];
  
    private editedRowIndex: number;
    private book: Book;
  
    public formGroup: FormGroup;
  
    public gridState: State = {
      sort: [],
      skip: 0,
      take: 10
    };
  
    constructor(private dataService: DataBookService, private formBuilder: FormBuilder) {
      this.createFormGroup = this.createFormGroup.bind(this);
    }
  
    ngOnInit() {
      this.load();
    }
  
    public onStateChange(state: State) {
      this.gridState = state;
      debugger;
  
      this.load();
    }
  
    load() {
      this.dataService.getBooks().subscribe(data =&gt; {
        this.books = data;
      });
      console.log("Startup entity must be here");
  
    }
  
    addHandler({ sender}) {
      sender.addRow(this.createFormGroup(new Book()))
    }
  
    public saveHandler({ sender, rowIndex, dataItem, isNew }) {
      if (isNew) {
  
        dataItem = this.formGroup.value;
  
        this.dataService.save(dataItem, isNew);
       
        sender.closeRow(rowIndex);
      }
      if (!isNew) {
        this.dataService.updateBook(dataItem);
          
        sender.closeRow(rowIndex);
      }
  
    }
  
    public createFormGroup(args: any): any {
      const item = args.isNew ? new Book() : args.dataItem;
      //debugger;
      this.formGroup = this.formBuilder.group({ 
        //'BookID': item.bookID,
        'bookName': [item.bookName, Validators.required],
        'genreID': item.genreID,
        'yearOfPublish': [item.yearOfPublish, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])]
      });
  
      return this.formGroup;
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>Send results of component work to the service, which sends it to ASP.NET Core Controller:</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class DataBookService extends BehaviorSubject&lt;any[]&gt; {
    private url = 'http://localhost:49403/api/Book';
  
    private data: any[] = [];
  
    constructor(private http: HttpClient) {
      super([]);
    }
  
    getBooks(): Observable&lt;Book[]&gt; {
      var result = this.http.get&lt;Book[]&gt;(this.url + '/getAll');
      return result;
    }
    getBook&lt;Book&gt;(id: number) {
      return this.http.get(this.url + '/get' + id);
    }
    createBook&lt;Book&gt;(book: Book): Observable&lt;Book&gt; {
      return this.http.post&lt;Book&gt;(this.url + "/create", book).toPromise();
    }
    public save(data: Book, isNew?: boolean) {
  
      if (isNew) {
        this.createBook(data);
      }
      if (!isNew) {
        this.updateBook(data);
        console.log("updated");
      }
      this.reset();
    }
    private reset() {
      this.data = [];
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that I have an empty <code>dataItem</code> from <code>component.html</code> and I have no idea why?
  <a href="https://i.stack.imgur.com/3rW0T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3rW0T.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>As i'm using a reactiveEditing forms and trying to create a form when i press 'Add', createFormGroup(args) funct says that</p>
  
  <p><strong>Type 'FormGroup' is not assignable to type 'Book'.
  Property 'bookID' is missing in type 'FormGroup'.</strong></p>
  
  <p>Why could it be?</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>I found that info from my inputs contains in _currentView in core.js, here is a scrinshot
  <a href="https://i.stack.imgur.com/HuD6r.png" rel="nofollow noreferrer">enter image description here</a></p>