issue with kendogrid using postgresql

I am sending json data but not able to fill json data in kendoUI and postgre

I am trying to populate the kendo grid with the JSON data received from the controller but failing

issue with kendogrid not able to fill the data in kendogrid

I am send the json data but not fill in kendogrid

I am trying to populate this kendo grid but I am running into some issues.

HomeController.cs

        public ActionResult Index()
        {
            return View();
        }

        //read data from database
        [HttpGet]
        public ActionResult getAlbum()
        {
            DataSet ds = new DataSet();
            string queryString = "SELECT albumid,album_art, genre,title, artist,price FROM public.adalbum;";

            NpgsqlCommand command = new NpgsqlCommand(queryString, conn);

            command.Connection = conn;
            using (NpgsqlDataAdapter sda = new NpgsqlDataAdapter(command))
            {
                sda.Fill(ds);
            }
            List<Album> album = new List<Album>();

            var result = new { album = ds };
            string json = JsonConvert.SerializeObject(result, Formatting.Indented,new JsonSerializerSettings {
                ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                            });
            //return Json(result, "Album", JsonRequestBehavior.AllowGet);
            //return Json(ds, JsonRequestBehavior.AllowGet);
            //return result;
            //var jsonSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();

            //List<Album> lstDept = album.Select(d => new Album()
            //{
            //    albumid = d.albumid,
            //    album_art = d.album_art,
            //    genre = d.album_art,
            //    title = d.title,
            //    artist = d.artist,
            //    price = d.price
            //}).ToList();

            //string json = jsonSerializer.Serialize(lstDept);

            return Json(json);

        }

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <label></label>
</div>

<div id="maingrid"></div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-main.min.css">
<script src="https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.grid.js" type="module">
</script>
<script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        //var gridDataSource = new kendo.data.DataSource({
        //    //  data: [{ 开发者_StackOverflow"album_art": "asd", "genre": "asdasd", "artist": "asdasd", "title": "asdasd", "price": 0}],
        //    transport: {
        //        read: {
        //            url: "/Home/getAlbum",
        //            type: "GET",
        //            data: {
        //                tags: "nature",
        //                format: "json"
        //            },
        //            dataType: "jsonp",
        //            jsonp: "jsoncallback",
        //        }
        //    },
        //});
        //dataSource: gridDataSource,
        var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Home/getAlbum",
                    type: 'GET',
                    data: {
                        //tags: "nature",
                        format: "json"
                    },
                    dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
                    jsonp: "jsoncallback",
                    contentType: 'application/json',
                }
            },
            pageSize: 10,
            batch: false,
            schema: {
                data: "Table",
                model: {
                    id:"albumid",
                    fields: {
                        albumid: { editable: false, nullable: true },
                        album_art: { type: "string" },
                        genre: { type: "string" },
                        title: { type: "string" },
                        artist: { type: "string" },
                        price: { type: "number" },
                    }
                }
            },
        });
        console.log(dataSource);
        $('#maingrid').kendoGrid({
            dataSource: dataSource,
            toolbar: ("<a href=@Url.Action("CreateAlbum", "Home")>Create Album</a>"),
            //sortable: true,
            pageable: true,
            editable: "inline",
            columns: [
                { field: "albumid", title: "Album ID", width: 50 },
                { field: "album_art", title: "Album Art", width: 50 },
                { field: "genre", title: "Genre", width: 50 },
                { field: "title", title: "Title", width: 50 },
                { field: "artist", title: "Artist", width: 50 },
                { field: "price", title: "Price", width: 50 }
            ],
        });

    });
</script>

my jsn response from controller side

{
  "album": {
    "Table": [
      {
        "albumid": 1,
        "album_art": "Screenshot (2).png",
        "genre": "Rock",
        "title": "test",
        "artist": "A KB",
        "price": null
      },
      {
        "albumid": 2,
        "album_art": "Screenshot (1).png",
        "genre": "Rock",
        "title": "test",
        "artist": "Numbi",
        "price": 2000.0
      }
    ]
  }
}

need help I tried but not able to fill the data