Columns Data is hidden after refresh DataSource Datagrid

[alonekjco]

I tried to change the dataSource like the following code

In View, I received the data by injecting the context:

@inject oto.Core.Services.Interfaces.ITakServices _takService

var ListAllPersonel = _takService.GetAllSV_Personel_Details(); 

var ListPersonel= ListAllPersonel.Where(s => s.ContractId== 2);


<ejs-grid id="GridPresonel" dataSource="@ListAllPersonel" >            

<e-grid-filterSettings type="Excel"></e-grid-filterSettings>
<e-grid-columns>

<e-grid-column visible="false" field="PersonelId" headerText="PersonelId" textAlign="Right" width="0"></e-grid-column>                

<e-grid-column field="PersonelName" headerText="PersonelName" textAlign="Right" width="85"></e-grid-column>               

<e-grid-column field="ContractId" headerText="ContractId" textAlign="Right" width="165"></e-grid-column>               

<e-grid-column field="ContractTitle" headerText="ContractTitle" textAlign="Right" width="165"></e-grid-column>            

</e-grid-columns> 

</ejs-grid>

<button onclick="AfterBtnClick()">Refresh Data Grid</button>


<script>  

  function AfterBtnClick() {
        var ListPersonelFiltered = @Html.Raw(Json.Serialize(@ListPersonel));
        var SelectGridePersonel = document.getElementById("GridPresonel").ej2_instances[0];
        SelectGridePersonel.dataSource = ListPersonelFiltered
        SelectGridePersonel.refresh();
    }
</script>




After changing the datasource and refreshing by JavaScript, the number of rows created in the grid is correct but no data is displayed.

In the image below, you can see that 2 rows have been created, but the column data is empty

[Balaji Sekar]

Hi Alonekjco, 

Thanks for contacting the Syncfusion support. 

We checked the attached sample code and you have bound the Grid dataSource dynamically so we suspect that mismatch of grid defined column’s field and dynamically bound grid dataSource value. 

Please share the curretViewData of dynamically bound grid’s dataSource it will help to validate further. 

var SelectGridePersonel = document.getElementById("GridPresonel").ej2_instances[0]; 

console.log(SelectGridePersonel.getCurrentViewRecords()); // Share this code return value 

Regards, 

Balaji Sekar. 

[alonekjco]

The result of log

before DataSource refresh

After DataSource refresh

[alonekjco]

thanks for your guide. The problem was solved

The problem was with this code snippet

        var ListPersonelFiltered = @Html.Raw(Json.Serialize(@ListPersonel));



The problem was solved with the following change

  var ListPersonelFiltered = @Html.Raw(JsonConvert.SerializeObject(@ListPersonel));

[Balaji Sekar]

Hi Alonekjco, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Balaji Sekar.