reading ASP.NET MVC json result in kendo Grid

Question

i am using ASP.NET MVC5 and intended to read json data from controller to view in razor page using kendo grid. I am using trial version for time being so i don't have access to kendo server scripting and helper classes... i have jsonResult in controller and i want ajax to call this function from view--> javascript to read and print data...

model class

[Table("FeeZone")]
public class FeeZone
{
    public FeeZone()
    {

    }

    [Key]
    public int FeeZoneID { get; set; }


    [Required]
    public string FeeZoneDescription { get; set; }

    [StringLength(50, ErrorMessage = "Description Max Length is 50")]
    [Required]
    public string CurrencyLabel { get; set; }

    [StringLength(10, ErrorMessage = "Description Max Length is 10")]
    [Required]
    public string CurrencySymbol { get; set; }

    [StringLength(50, ErrorMessage = "Description Max Length is 50")]
    [Required]
    public string CurrencyCode { get; set; }
}

Controller class

    public ActionResult FreeZone()
    {
        var query_result = Q_UOF.GetAllFeeZone();

        return View(query_result.ToList());

    }

    public JsonResult GetAllFreeZone()
    {
        var allFreeZone = Q_UOF.GetAllFeeZone().ToList();

        return Json(allFreeZone, JsonRequestBehavior.AllowGet);
    }

razor -- view page

model IEnumerable<DatabaseLayer.TableMappings.FeeZone>

@{
      ViewBag.Title = "FreeZone";
      Layout = "~/Views/Shared/_Layout_Master.cshtml";
 }


  <script type="text/javascript">

  $(document).ready(function () {

    //load ALl freeZone from JSON Method
    var RemoteJsonData = new kendo.data.DataSource(
        {
            transport:
                {
                    read: {
                        type: "Get",
                        dataType: "json",
                        url: "Qualification/GetAllFreeZone"
                    },
                    pageSize: 4
                }
        })

    //View all FreeZone data in Kendo Grid
    $("#FreeZone_ViewAll_Grid").kendoGrid({
        columns: [
            { title: "FeeZoneID" },
            { title: "FeeZoneDescription" },
            { title: "CurrencyLabel" },
            { title: "CurrencySymbol" },
            { title: "CurrencyCode" }
        ],

        dataSource: RemoteJsonData


    });
})

</script>


<div id="FreeZone_ViewAll_Grid"></div>

Answer 1

$.ajax({
            url: '@Url.Action("GetAllFreeZone", "Qualification")',
            type: 'POST',
            dataType: "json",
            success: function (result) {
                var Freezone=result.Freezone;
                var dataSource = new kendo.data.DataSource({
                    data:Freezone
                });
                $('#FreeZone_ViewAll_Grid').data('kendoGrid').dataSource.data(Freezone);
            },
            async: false
        });

Controller function

    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult GetAllFreeZone([DataSourceRequest] DataSourceRequest request)
    {
         var allFreeZone = Q_UOF.GetAllFeeZone().ToList();
         return Json(allFreeZone.ToDataSourceResult(request));
    }