not able to display fetch value from database in devextreme dxDataGrid

Question

i am new to devextreme dxDataGrid i am fetching value form database using json my var objdata storing data in json string format and i am passing var objdata as datasource in dxDataGrid but i am getting bad request error in dxDataGrid below is image of json string in my var objdata any help will be appreciated

   $(document).ready(function() {
     fetchrecord();
   });

   function fetchrecord() { // calling fetch function
     $.ajax({
       type: "POST",
       url: "Default.aspx/fetchemp",
       data: '{}',
       contentType: "application/json;charset=utf-8",
       dataType: "json",
       success: OnSuccess,
       error: OnErrorCall
     });

     function OnSuccess(response) {
       var objdata = (response.d); // storing data in json string format
       $("#gridContainer").dxDataGrid({
         allowColumnReordering: true,
         allowColumnResizing: true,
         columnChooser: {
           enabled: true
         },
         columnFixing: {
           enabled: true
         },
         filterRow: {
           visible: true,
           applyFilter: "auto"
         },
         searchPanel: {
           visible: true,
           width: 240,
           placeholder: "Search..."
         },
         dataSource: objdata,
         columns: ["ID", "Name", "Gender", "Pincode", "City"]

       });



     }

     function OnErrorCall(response) {
       alert("error occur");
     }


   }

<div class="demo-container">
  <div id="gridContainer"></div>
</div>

Answer 1

The data that comes with the names on your side are not the same because you have made a typing mistake.

You have to do it this way.

columns:["Id", "name", "gender", "pincode", "City"]

or

     columns: [
     { dataField:'Id',    caption: 'ID'},
     { dataField:'name',   caption: 'Name'},
     { dataField:'gender',caption: 'Gender'},
     { dataField:'pincode',caption: 'Pincode'},
     { dataField:'City'}],