c# - KendoGrid not populating but it should be -

i have kendogrid in view , reason, not populating , have no idea why, things show should, isn't wanting to, maybe missing something?

this order of events...

$(document).ready(function () {     getcataloginfo(); })  function getcataloginfo() {     $.ajax({         type: "get",         url: urlparams.getthecatalog,         datatype: "json",         contenttype: "application/json; charset=utf-8",         success: function (data, textstatus, jqxhr) {             thecataloggrid(data);         }     }) } 

here grid

function thecataloggrid(catalogdata) {     $("#cataloggrid").kendogrid({         datasource: {             catalogdata         },         columns: [{             field: "globalgroupid",             title: "globalgroupid",             hidden: true         },         {             field: "globalgroupname",             title: "groupname"         }],         scrollable: true,         sortable: true,         pageable: false,         selectable: "row",         height: 275     }) } 

my controller looks this

public jsonresult getcatalog() {     list<gridcatalog> lst = new list<gridcatalog>();         _catalog = catalogobjectfactory.getcatalog("c:\\programdata\\advanceware\\catalogdlls", "cabparts", "2015.09.28-22.14.15");         //  comment out debugging catalog reference catalogsproject         if (_catalog != null)         {             _globalgroupoptions = new globalgroupoptions(_catalog);             var query = ggo in _globalgroupoptions                         select new                         {                             globalgroupid = ggo.globalgroup.globalgroupid,                             globalgrouplevel = ggo.globalgroup.level,                             globalgroupname = ggo.globalgroup.globalgroupname,                             isrequired = (ggo.globalgroup.required == 0) ? "" : "!",                             optionname = ggo.currentglobaloption == null ? "" : (ggo.isvalid ? ggo.currentglobaloption.optionname : ""),                             currentoptionid = ggo.currentglobaloption == null ? 0 : ggo.currentglobaloption.optionid,                             invalidoption = ggo.currentglobaloption == null ? "" : (ggo.isvalid ? "" : ggo.currentglobaloption.optionname)                         };         foreach(var item in query)         {             lst.add(new gridcatalog             {                 globalgroupid = item.globalgroupid,                 globalgroupname = item.globalgroupname             });         }     }     return json(lst, jsonrequestbehavior.allowget); } 

here data class

public class gridcatalog {     public int globalgroupid { get; set; }     public string globalgroupname { get; set; }     public int globalgrouplevel { get; set; }     public string isrequired { get; set; }     public string optionname { get; set; }     public int currentoptionid { get; set; }     public string invalidoption { get; set; } } 

the data present in lst variable, have double checked while stepping through controller , when use developer tools in google chrome, , here pic of data watch in chrome

here code in view

<div id="cataloggrid">  </div> 

the data there reason grid doesn't want populate

i think problem in datasource, try this:

datasource: {     type: "json",     data: catalogdata, }