Populating a grid via jsonp

[JAS J]

Hi I am making a cross domain call to get some json data and using that to populate a grid control. In order to do that, fist, i am creatinga  datasource like so:

var dataSource = new kendo.data.DataSource({

    transport: {

        read: {

            url: 'http://' + hostAddress + '/Customer.svc/getcustomersbyname?axid=999&name=',

           dataType: "jsonp"

        }

    },

    pageSize: 5

});

Then I populate the data grid:

$("#customergrid").kendoGrid({

        dataSource: dataSource,

        scrollable: true,

        sortable: true,

        pageable: true,

        selectable: "row",

 

        columns: [

            {

                field: "Name",

                title: "Name"

            },

            {

                field: "Id",

                title: "Id"

            },

            {

                field: "AxId",

                title: "AxId"

            }

        ]

    });

When I run it, I do see the data coming back but i get a crash in kendo.grid.min.js with the error: Microsoft JScript runtime error: DOM
 Exception: NOT_FOUND_ERR (8)

Do I need to define a schema or something?

btw, where it crashes is at:  

b.table[0].replaceChild(h,b.tbody[0])

line 11, col 22102 in kendo.grid.min.js 


thanks,
Jas

[JAS J]

Anyone?

thanks!
Jas

[Manoj Kapoor]

This could be an issue, if the scripts file arent loaded in the correct order on your page. Can you post the whole .aspx or html file you have for the same?

[JAS J]

If I dont use the datasource and I give it an array, it works fine.

Not sure if it is order of includes issue. Do you think?

thanks,
Jas

[Manoj Kapoor]

If it’s working fine with array list then for sure the issue shouldn’t be associated to script sequence..

The approach you are trying never worked for me as well, instead below snippet shows what I implemented to move on. Assigning values from WFC call directly to Kendo Data Source has some issues, referring the attached snap shot if you have a look at WCFWrapper.JPG you will find an "d" tag within which the data is embedded. To handle this issue, I made the below mentioned changes:

$.ajax({

type:"GET",

url:"http://localhost:59431/myWCF.svc/GetList?format=json",

data: "",

dataType: "json",

success: function (data) {

var grid = $("#KendoWebDataGrid3").data("kendoGrid");grid.dataSource.data(data.d);}

 });

Instead of using the datasource directly using an Ajax call & onSuccess of it, assigning the retrieved data to Grid. I am currently working on using the data source to achieve the same, will keep you posted on the same.

Thanks & Regards,
Manoj Kapoor

[Surabhi]

I am getting the same error "Microsoft JScript runtime error: DOM Exception: NOT_FOUND_ERR (8)"

Script and styles loaded on layout page: How do i fix it. I am using async=false.

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>  
   <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript">
</script>     <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">
</script>     <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript">
</script>     <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>  
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>       <link rel="stylesheet" href="@Url.Content("~/Content/styles/kendo.common.min.css")" />      <link rel="stylesheet" href="@Url.Content("~/Content/styles//kendo.default.min.css")" />      <script src="@Url.Content("~/Scripts/js/kendo.web.min.js")" type="text/javascript"></script>      <script src="@Url.Content("~/Scripts/js/kendo.aspnetmvc.min.js")" type="text/javascript"></script>      <script src="@Url.Content("~/Scripts/js/kendo.all.min.js")" type="text/javascript"></script>


VBHTML code:

function LoadAvailablePropertyList() {   
  var selectedIds = {};       
 var url = '/ECFProperty/getAvailablePropertyList';  
      $("#AvailPropertyList").kendoGrid({     
    dataSource: {         
    Type: "json",         
    transport: {          
       read: {            
         url: url,           
          async: false,       
              data: {         
                energychampion: $("#EnergyChampion").val(),    
                     countrycode: $("#countrycode").val(),   
                      statecode: $("#statecode").val(),      
                   city: $("#city").val(),                 
        campus: $("#campus").val(),                     
    region: $("#OwnersRegion").val()                    
 }                 }             },        
     schema: {                data:"data", 
               total:"recordcount"              },      
       pageSize: 5,             serverPaging: true,     
        serverFiltering: true,             serverSorting: true         },  
       height: 250,         filterable: true,         sortable: true,     
    pageable: true,         selectable: "multiple, row",         columns: [    
                         {                                 Field: "propertyid",                                 title: "@LocalizedText.lblProperty",                                 width: 100,                                 template: "<input type='checkbox' id='SelectProperty'>#=propertyid#</input>"                             },                             {                                 field: "propertyid",                                 title: "@LocalizedText.lblProperty",                                 filterable: false,                                 width: 100                             }, {                                 field: "propertyname",                                 title: "@LocalizedText.lblPropertyName"                             }, {                                 field: "propertyaddress",                                 title: "@LocalizedText.lblPropertyAddress"                             }, {                                 field: "city",                                 title: "@LocalizedText.lblCity",                                 filterable: false                             }                             , {                                 field: "statecode",                                 title: "@LocalizedText.lblState",                                 filterable: false,                                 width: 100                             }                             , {                                 field: "countrycode",                                 title: "@LocalizedText.lblCountry",                                 filterable: false,                                 width: 100                             }                         ]     }); }