[delebashParticipant]

One more question, it does run fine on my own server but it I add a debugger statement after var model = new GridModel(); it fails.

$(document).ready(function () {

var url = “beverages.txt”;

var GridModel = function () {
this.items = ko.observableArray();
var me = this;
$.ajax({
datatype: ‘json’,
url: “beverages.txt”
}).done(function (data) {
var jsonData = $.parseJSON(data);
me.items(jsonData);
});
};

var model = new GridModel();
debugger;
// prepare the data
var source =
{
datatype: “observablearray”,
datafields: [
{ name: ‘name’ },
{ name: ‘type’ },
{ name: ‘calories’, type: ‘int’ },
{ name: ‘totalfat’ },
{ name: ‘protein’ },
],
id: ‘id’,
localdata: model.items
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#grid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: ‘classic’,
columns: [
{ text: ‘Name’, datafield: ‘name’, width: 250 },
{ text: ‘Beverage Type’, datafield: ‘type’, width: 250 },
{ text: ‘Calories’, datafield: ‘calories’, width: 180 },
{ text: ‘Total Fat’, datafield: ‘totalfat’, width: 120 },
{ text: ‘Protein’, datafield: ‘protein’, minwidth: 120 }
]
});

ko.applyBindings(model);
});

[delebashParticipant]

Thanks, yep wasn’t thinking about CORS just because I was loading a text file versus calling a .asp or php page but its the same result. Thanks for catching that.

[delebashParticipant]

+1 vote for MVVM popup editing example with dataAdapter and remote data

[delebashParticipant]

I figured it out, just found Examples with nested Json in http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm

var data = [{ “empName”: “test”, “age”: “67”, “department”: { “id”: “1234”, “name”: “Sales” }, “author”: “ravi”}];

// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ’empName’ },
{ name: ‘age’ },
{ name: ‘id’, map: ‘department>id’ },
{ name: ‘name’, map: ‘department>name’ },
{ name: ‘author’ }
]

[delebashParticipant]

Peter,

Thanks for your help the grid is loading now. The problem was a cross-origin policy conflict with wkanda data since it is only
outputting in json and not jsonp so we created a wrapper call to output it using json bypassing cross-origin policy. Thanks again for
all your help.

Dan

[delebashParticipant]

Thanks Peter,

I don’t have access to changing the rest data as it is provided by wakanda server which is supposed to output valid jason. I have also tried jasonp but I still get an error call not made with jasonp. Again sorry for the trouble, I am working with wakanda as well to see if they can help. I have tried just a straight jquery ajax rest request and still getting errors. I just don’t know enough about jquery rest to troubleshoot the problem. Thanks again for taking your time to help, greatly appreciated!!

[delebashParticipant]

Thanks again for helping, I have been hacking away at it but still unable to get the data returned the rest service is
working at http://ageektech.no-ip.org:8081/rest/People

I have the events trapped but none of them show any data being returned or any error msg besides “error” I am at
a loss as to what to check for troubleshooting.

Thanks again,
Dan

$(document).ready(function () {
//var theme = getTheme();
// prepare the data
var source = {
datatype: "json",
root: "__ENTITIES",
id: "ID",
datafields: [
{
name: 'firstName'},
{
name: 'lastName'}
],
url: "http://127.0.0.1:8081/rest/People"

};

var dataAdapter = new $.jqx.dataAdapter(source,
{
loadComplete: function () {
alert("loadcomplete")
var length = dataAdapter.records.length;
},
beforeSend: function (jqXHR, settings) {
alert("before send")
debugger;
},
loadError: function (jqXHR, status, error) {
debugger;
alert("load error")
}
}
);

$("#jqxgrid").jqxGrid({
width: 370,
source: dataAdapter,
columnsresize: true,
columns: [
{
text: 'First Name',
datafield: 'firstName',
width: 200},
{
text: 'Last Name',
datafield: 'lastName',
width: 170}
]
});
});

[delebashParticipant]

Thank you very much for the example but I still am not getting data for some reason. The only difference I see is that
I am using url: “http://127.0.0.1:8081/rest/People” and also not using data: since I no parameters are required for this
request. Is there a debugger event I can trap to see if the request is going out and what exact data is being returned? I really appreciate you taking the time to help. Thanks, very much!

In this example the Grid is bound to a Remote Data.

$(document).ready(function () {
//var theme = getTheme();
// prepare the data
var source = {
datatype: "json",
root: "__ENTITIES",
id: "ID",
datafields: [
{
name: 'firstName'},
{
name: 'lastName'}
],
url: "http://127.0.0.1:8081/rest/People"

};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid").jqxGrid({
width: 370,
source: dataAdapter,
columnsresize: true,
columns: [
{
text: 'First Name',
datafield: 'firstName',
width: 200},
{
text: 'Last Name',
datafield: 'lastName',
width: 170}
]
});
});

[delebashParticipant]

Thanks I’ve tried that and still not getting data, not sure what else to look at. jsonlint shows __Entities as the outer container and the __Key as the first field in each record but still not getting it to work. Thanks.

[delebashParticipant]

Thanks for the quick reply aadding selectionmode: ‘singlecell’, did the trick
So in your example even if you have editable = true and you click the add button you
will not be able to edit the new row unless you also have the selectmode set.

Thank you,

Dan

[Author]

Posts