CODEWITHSUNDEEP
angulardevexpressdevextremedevextreme-angular
FullStack
FullStack

Reputation: 187

devexpress datagrid does not pass all columns in update

I have a CustomStore like below:

this.dataSource = new CustomStore({
  key: "id",
  load: ()=>this.sendRequest("GET"),
  insert: (values) => this.sendRequest("POST",JSON.stringify(values)),
  update: (key, values) => this.sendRequest("PUT", {
    id: key,
    values: values
   }),
});

and alow implementation of SendRequest is like this :

  sendRequest(method: string = "GET", data: any = {}): any {

let result;
switch(method) {
    case "GET":
        result = this.mService.get();
        break;
    case "POST":
        result = this.mService.create(data);
        break;
    case "PUT":
      debugger;
      let manu: IManu = { id: data.id, name: data.values.name,description:data.values.description };
      result = this.mService.update(manufacture);
          break;
        
}

return result
    .toPromise()
    .then((data: any) => {
        return method === "GET" ? {data:data.items,totalCount: data.items.length} : data;
    })
    .catch(e => {
        throw e && e.error && e.error.Message;
    });

}

and html tamplate is :

    <div class="content-block">
  <dx-data-grid class="dx-card wide-card" [dataSource]="dataSource" [remoteOperations]="true" [showBorders]="false" [focusedRowEnabled]="true"
                [focusedRowIndex]="0" [columnAutoWidth]="true" [columnHidingEnabled]="true"
                (onSaving)="logEvent('Saving')">

    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager [showPageSizeSelector]="true" [showInfo]="true"></dxo-pager>
    <dxo-filter-row [visible]="true"></dxo-filter-row>
    <dxo-selection mode="multiple"   [deferred]="true"></dxo-selection>

    <dxo-editing mode="popup" [allowUpdating]="true" [allowDeleting]="true" [allowAdding]="true" >
      <dxo-popup title="Manu" [showTitle]="true" [width]="600" [height]="450">
      </dxo-popup>
      <dxo-form>
        <dxi-item itemType="group" [colCount]="2" [colSpan]="2">
          <dxi-item dataField="name" [colSpan]="2"></dxi-item>

          <dxi-item dataField="description" [colSpan]="2" editorType="dxTextArea" ></dxi-item>
        </dxi-item>
      </dxo-form>
    </dxo-editing>

    <dxi-column dataField="name" [width]="250" caption="Name" [hidingPriority]="2" >
      <dxi-validation-rule type="required"></dxi-validation-rule>
    </dxi-column>
    <dxi-column dataField="description" caption="Description" [hidingPriority]="1" >
      
    </dxi-column>
  </dx-data-grid>
</div>

The problem is that, when I want to edit a row, in the popup I change just Description and in sendRequest method, I just get description in values and there is no name, and this cause a problem for me, because I should send both of them.

Upvotes: 0

Views: 5441

Answers (3)

nonesuch
nonesuch

Reputation: 196

You can also do the following:

.OnRowUpdating(@<text>function(e) { e.newData = Object.assign({}, e.oldData, e.newData);}</text>)

This will ensure that even fields that aren't changed are passed through on the update.

Upvotes: 1

Ishan Anuradha
Ishan Anuradha

Reputation: 51

Had the same issue, to solve that, you can use onEditorPreparing(e) event and get value of current row and store in a public variable.

e.row.data has the current row values.

In my case i used stored public variable values inside onSaving(e) event override e.changes.

Hope anyone having this will able to solve it in this way.

Upvotes: 1

Andrew Rands
Andrew Rands

Reputation: 154

I've run into the same problem. My solution (workaround?) is to use PATCH instead of PUT.

Here's the update handler:

  update: (key, values) => {

        let patch = "[";

        var props = Object.getOwnPropertyNames(values);
        props.forEach(x => {
            var property = `{ op: 'replace', path: '/${x}', value: '${values[x]}' }`;
            patch += property;
        });

        patch += "]";

        return fetch(`orders/${encodeURIComponent(key)}`, {
            method: "PATCH",
            body: patch,
            headers: {
                'Content-Type': 'application/json-patch+json'
            }}).then(handleErrors);        
    },

Then the body is

[
  {
    "op":"replace",
    "path":"/description",
    "value": "new value"
  }
]

Upvotes: 2

Related Questions