Kendo grid refresh does not update the values

See more:

Javascript

jQuery

MVC5

Kendo-UI

I have got two kendo grid in a page called region and Search band. Where the region grid has the list of all the region names listed and the search band has the region names listed in a drop down along with few other fields.

When ever we add a new region in the region grid the region name should display in the drop down list under the search band. But this happens only if we refresh the page after we add a new region. But I do not want to refresh only the search band grid to refresh automatically each time we add a region so that the newly added region name is displayed in the drop down without refreshing the whole page.

We have got a refresh button at the end of each grid. The newly added region name does not display in the drop down even if I manually refresh the search band grid by clicking on the button. It works as expected to display the newly added region name to display in the search band drop down only if I refresh the whole page(which we don't want).

The jquery used till to refresh the search band grid is

function grid_onSave(data) {
       data.preventDefault();
       var validator = $('#RegionList').kendoValidator().data('kendoValidator');
       if (validator.validate()) {
           var dataItem = {
               RegionId: data.model.RegionId,
               Name: data.model.Name
           };
           if (dataItem.RegionId == "") {
               addRegion(dataItem);
           }
           else {
               editRegion(dataItem);
           }
       }
       //window.location.reload();
       $('#SearchBandList').data('kendoGrid').dataSource.read();
       $('#SearchBandList').data('kendoGrid').refresh();
    }

Can anyone help on how to fix this issue.

What I have tried:

I tried using the above jquery which doesn't seems to work.