This is a migrated thread and some comments may be shown as answers.

Populating a grid via jsonp

5 Answers 141 Views
Grid
This is a migrated thread and some comments may be shown as answers.
JAS J
Top achievements
Rank 1
JAS J asked on 06 Mar 2012, 04:26 AM
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

5 Answers, 1 is accepted

Sort by
0
JAS J
Top achievements
Rank 1
answered on 07 Mar 2012, 07:39 AM
Anyone?

thanks!
Jas
0
Manoj Kapoor
Top achievements
Rank 2
answered on 07 Mar 2012, 09:20 AM
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?
0
JAS J
Top achievements
Rank 1
answered on 07 Mar 2012, 11:52 PM
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
0
Accepted
Manoj Kapoor
Top achievements
Rank 2
answered on 09 Mar 2012, 08:59 AM

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

0
Surabhi
Top achievements
Rank 1
answered on 24 Aug 2012, 10:01 PM
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                             }                         ]     }); }

Tags
Grid
Asked by
JAS J
Top achievements
Rank 1
Answers by
JAS J
Top achievements
Rank 1
Manoj Kapoor
Top achievements
Rank 2
Surabhi
Top achievements
Rank 1
Share this question
or