SharePoint Framework + React - Use Multiple Choice Drop Down

Hi All,

I am using SPFx + React + Office Fabric UI. I have a custom list in SharePoint and column as Choice - Multiple Selection.

Provided multiple choice control to user so have added Dro Down and provided property as 'MultiSelect'. I can select values and selected values are coming in place holder. But I am not able to Save these values to the Choice column.

Can someone help me how can I Save and also set values to this control?

Thanks,

Sanjay

Suppose multi choice column name is Category and list name is Employee

To insert value into SharePoint using rest api

const data: any = {
__metadata: { type: SP.Data.EmployeeListItem },
Category: {
results: ['Consultant', 'Developer', 'Tester']
}

Now pass the data in json like this

$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
type: "POST",
contentType: "application/json;odata=verbose",
data: JSON.stringify(data),
headers: {
"Accept": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"Content-Type":"application/json;odata=verbose",
"X-HTTP-Method": "POST"
},
success: function (data) {
success(data); // Returns the newly created list item information
},
error: function (data) {
failure(data);
}
});

To set value in multiselect

Let say categoryArray have all the value.

pass the array to multiselect dom

(keydown.enter)="$event.preventDefault()"
resetFilterOnHide="true"
[options]="categoryArray" defaultLabel="All"
(onChange)="pi.filter($event.value, col.field, 'in')"
>

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Arvind Kushwaha6y ago
Suppose multi choice column name is Category and list name is Employee

To insert value into SharePoint using rest api
const data: any = {
      __metadata: { type: SP.Data.EmployeeListItem },
      Category: {
        results: ['Consultant', 'Developer', 'Tester']
      }
Now pass the data in json like this
$.ajax({
       url: url + "/_api/web/lists/getbytitle('" + listname + "')/items",
       type: "POST",
       contentType: "application/json;odata=verbose",
       data: JSON.stringify(data),
       headers: {
           "Accept": "application/json;odata=verbose",
           "X-RequestDigest": $("#__REQUESTDIGEST").val(),
           "Content-Type":"application/json;odata=verbose",
           "X-HTTP-Method": "POST"
       },
       success: function (data) {
           success(data); // Returns the newly created list item information
       },
       error: function (data) {
           failure(data);
       }
   });
To set value in multiselect
Let say categoryArray have all the value.

pass the array to multiselect dom
                   (keydown.enter)="$event.preventDefault()"
                   resetFilterOnHide="true"
                   [options]="categoryArray" defaultLabel="All"
                   (onChange)="pi.filter($event.value, col.field, 'in')"
                   >