albumid is not defind using kedogrid

Question

I am working with kendogrid

I am trying to fill data in kendogrid and i search lot of solution link on google I spend more and more hours but not find solution I am tried need help

please see my what I tried till now:

I am tried and tried but not find solution

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(new  
            //{  
            //    hey = "bye",  
            //    num = 5  
            //}, JsonRequestBehavior.AllowGet);  
  
            return Json(json, JsonRequestBehavior.AllowGet);  
  
        }  

Index.cshtml

@{  
    ViewBag.Title = "Home Page";  
}  
  
<div class="jumbotron">  
    <label></label>  
  
</div>  
  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.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 () {  
        debugger  
        //var gridDataSource = new kendo.data.DataSource({  
        //    //  data: [{ "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 url = '@Url.Action("getAlbum", "Home")';  
        var dataSource = new kendo.data.DataSource({  
            transport: {  
                read: {  
                    url: url,  
                    type: 'GET',  
                    dataType: "json"  
                    //data: {  
                    //    //tags: "nature",  
                    //    format: "json"  
                    //},  
                    //dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests  
                    //jsonp: "jsoncallback",  
                    //contentType: 'application/json;charset=utf8',  
                }  
            },  
            serverPaging: true,  
            error: function (e) {  
                debugger  
                // Handle data operation error.  
                alert("Status: " + e.status + "; Error message: " + e.errorThrown);  
                console.log("Error " + e);  
            },  
            pageSize: 10,  
            schema: {  
                //data: "Table",  
                //total: "album",  
                model: {  
                    id: albumid,  
                    fields: {  
                        albumid: { editable: false },  
                        album_art: { type: "string" },  
                        genre: { type: "string" },  
                        title: { type: "string" },  
                        artist: { type: "string" },  
                        price: { type: "number" },  
                    }  
                }  
            },  
        });  
        debugger  
        $('#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 },  
                  
            ],  
        });  
        console.log(dataSource);  
        debugger  
  
          
    });  
</script>  

I put a debugger each and every place but not able to fill kendogrid data

see my json response from controller side image

see my postgrey database image

see error of image

please see image of error

I want to fill the data in kendogrid

need help

Answer 1

The error is telling you the code does not define an "albumid" var. As far As I can tell you never declared an albumid or assign albumid as value. Clicking on the error should take you to the line of code that caused the error.

 model: {  
     id: albumid,  

Keep in mind, this is not a kendo grid support forum. Kendo grid support is a better place to get help with the 3rd party library. Anyway, I think the schema should be

     model: {  
         id: "albumid",  

Answer 2

@AgaveJoe still get same an error I tried and tried but not able to solve an error can you help more