I trying to use kendoui external file manager.
http://www.kendoui.com/forums/kendo-ui-web/general-discussions/why-not-make-image-browser-in-editor-as-separate-controle.aspx#0Hdg62t7dEql6QiANReisg
<div id="imgBrowser"></div>
$("#imgBrowser").kendoImageBrowser({
transport: {
read: "/service/ImageBrowser/Read",
destroy: {
url: "/service/ImageBrowser/Destroy",
type: "POST"
},
create: {
url: "/service/ImageBrowser/Create",
type: "POST"
},
thumbnailUrl: "/service/ImageBrowser/Thumbnail",
uploadUrl: "/service/ImageBrowser/Upload",
imageUrl: "/service/ImageBrowser/Image?path={0}"
}
});
And have following error: http://22.uco.co.il/filebrouser.png
Some one try it?
http://jsfiddle.net/wcze9/85/
One problem you could be having is that according to the documentation, by default, the Read action of the ImageBrowser expects data with a ContentType of "application/x-www-form-urlencoded". If you are returning JSON from the server, it will not be interpreted correctly by the ImageBrowser. Use the example in the documentation to change the contentType expected from the Read action to "application/json":
<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
imageBrowser: {
transport: {
read: {
/* omitted for brevity */
contentType: "application/json"
}
}
}
});
</script>
Related
I am using a Kendo dropdownlist to display data made from a remote service call.
First, here is the definition in the HTML template:
<select
kendo-drop-down-list
k-options="dropdownOptions"
k-ng-delay="dropdownOptions">
</select>
Next, here is the code to populate the dropdown from an AngularJS controller:
var myUrl = '(url of REST service)';
$scope.dropdownOptions = {
dataSource: {
transport: {
read: {
url: myUrl,
dataType: 'json',
type: 'POST',
contentType: "application/json;charset=ISO-8859-1"
},
parameterMap: function (data, type) {
const req = {
"PARAMS": $scope.params
};
return JSON.stringify(req);
}
}
},
dataTextField: 'DESCRIPTION',
dataValueField: 'VALUE',
schema: {
type: "json",
data: "resultData",
model: {
id: "VALUE",
fields: {
"VALUE":{field: "VALUE", type: "string"},
"DESCRIPTION":{field: "DESCRIPTION", type: "string"}
}
}
}
};
(Note: the REST service requires data to be provided as a JSON object via POST, hence the type and parameterMap).
I have confirmed that the data to populate the dropdown is being returned from the REST service as an array under the key "resultData":
{
"resultData":[{"DESCRIPTION":"Whatever","VALUE":"VALUE1"},...]
}
Can anyone help me?
Update
I am also seeing "e.slice is not a function" in my dev console.
Edit
Added id field to model, no effect.
The problem was that schema should have been a child of dataSource. Once I fixed that, the data began to display.
Is it possible to change the dafault methos POST that a store snync() request uses.
I have tried the following but it did not work. I would like to change the method from POST to PUT.
I am aware I can write a custom Ajax request but is there a way to do this with the store sync() functionallity?
store.sync({
method: 'PUT',
scope:this,
callback: function(batch, options){
},
success : function(batch, options) {
},
failure : function(batch, options) {
}
});
}
I have also tried this kind of approach without success:
store.getProxy().method = 'PUT';
In the proxy config for your store, you can configure the api to make specific request methods for each type of action.
For example:
proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'POST',
destroy: 'POST'
},
batchActions: false,
api: {
create: 'foo/sample.json',
read: 'bar/sampleB.json',
update: 'test/test.json',
destroy: 'admin/testa.json'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
}
EDIT
The code above gets generated from Sencha Architect, but if you are not using Architect you could define the api actions on your REST proxy like this:
proxy: {
type: 'rest',
api: {
create: {url: 'foo/sample.json', method: 'POST'},
read: {url: 'bar/sampleB.json', method: 'GET'},
update: {'test/test.json', method: 'PUT'},
destroy: {'admin/testa.json', method: 'POST'}
}
}
It can Read the remote database, it can Create new items locally, but they don't actually save to the remote database. This is what adds a new item:
function addNewItem(){
dataSource.add({id:"0", petName:"Dusty", petSpecies:"Dog", petGender:"M"});
dataSource.sync();
}
$('#addPet').bind('click', addNewItem);
This ajax POST call in that function instead of the dataSource stuff adds to my database perfectly:
var object = { id:"0", petName:"Dusty", petSpecies:"Dog", petGender:"M" };
$.ajax({
type: "POST",
url: 'website/petData',
headers: { "Authorization" : "Bearer ${AccessToken}" },
contentType: "application/json",
data: JSON.stringify(object)
})
Here is my datasource code. What do I need to change? I've tried doing sooooo many different things but no luck yet.
var dataSource = new kendo.data.DataSource({
type: "everlive",
transport: {
typeName: 'petData',
read: {
url: "website/petData",
dataType: "jsonp"
},
create: {
url: 'website/petData',
dataType: "jsonp"
}
},
group: "petSpecies",
schema: {
model: {
id: "id",
fields: {
id: { type: "number"},
petName: { type: "text" },
petSpecies: { type: "text" },
petGender: { type: "text" }
}
}
}
});
So thanks to giltnerj0 and Brett's comments, I was able to google the right words, and discovered that all I needed to do was change create's dataType:jsonp to json. I'm getting some POST errors now, but it's POSTing finally and saving things to my database.
create: {
url: 'website/petData',
dataType: "json"
}
Im experiencing a rather annoying bug (?) in Kendo UI Datasource.
My Update method on my transport is not getting called when I pass a custom function, but it does work if I just give it the URL.
This works:
...
transport: {
update: { url: "/My/Action" }
}
...
This does not
...
transport: {
update: function(options) {
var params = JSON.stringify({
pageId: pageId,
pageItem: options.data
});
alert("Update");
$.ajax({
url: "/My/Action",
data:params,
success:function(result) {
options.success($.isArray(result) ? result : [result]);
}
});
}
}
...
The function is not getting invoked, but an ajax request is made to the current page URL, and the model data is being posted, which is rather odd. Sounds like a bug to me.
The only reason I have a need for this, is because Kendo can't figure out that my update action returns only a single element, and not an array - so, since I dont want to bend my API just to satisfy Kendo, I though I'd do it the other way around.
Have anyone experienced this, and can point me in the right direction?
I also tried using the schema.parse, but that didn't get invoked when the Update method was being called.
I use myDs.sync() to sync my datasource.
Works as expected with the demo from the documentation:
var dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax( {
url: "http://demos.kendoui.com/service/products",
dataType: "jsonp",
success: function(result) {
options.success(result);
}
});
},
update: function(options) {
alert(1);
// make JSONP request to http://demos.kendoui.com/service/products/update
$.ajax( {
url: "http://demos.kendoui.com/service/products/update",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
// send the updated data items as the "models" service parameter encoded in JSON
data: {
models: kendo.stringify(options.data.models)
},
success: function(result) {
// notify the data source that the request succeeded
options.success(result);
},
error: function(result) {
// notify the data source that the request failed
options.error(result);
}
});
}
},
batch: true,
schema: {
model: { id: "ProductID" }
}
});
dataSource.fetch(function() {
var product = dataSource.at(0);
product.set("UnitPrice", product.UnitPrice + 1);
dataSource.sync();
});
Here is a live demo: http://jsbin.com/omomes/1/edit
I'm using KendoUI to create charts from a remote datasource which is JSON file.
When I assign the url parameter(inside datasource object) a remote path ,pointing to the JSON the chart doesn't appear .
Say Like,
var myVar="some remote url";
dataSource: {
transport: {
read: {
url: myVar,
dataType: "json"
}
}
}
On the other hand if I directly specify the url as:
url: "http://myserver-name/somefile.json"
I can see the chart being displayed.
I cannot figure out what I'm doing wrong.
It should work! Check the following running on jsfiddle.
var url = "http://demos.kendoui.com/service/Products";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: url,
dataType: "jsonp"
}
},
pageSize: 4,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: "ProductName"
}
}
}
});
$("#kendogrid").kendoGrid({
dataSource: dataSource,
columns: [
{
field: "ProductID",
title: "ID"},
{
field: "ProductName",
title: "Name"}
]
});
And this is the HTML:
<div id="kendogrid"></div>
It defines an external URL and sets it to a variable ( url) and then uses the resulting DataSource.
Check for differences or post a code as complete as possible in jsfiddle or jsbin.
well , your solution worked for me but in different way.I was getting the url value from a .cs file and storing inside an javascript variable.
var URL="<%=myCSvariable%>";
But this alone doesnt works...:(
I had to modifiy the URL variable value as,
var completeURL="\"" + URL + "\"";
and then create dataSource object as,
var mydataSource = new kendo.data.DataSource({
transport: {
read: {
url: URL, // this is the tricky part. Using 'completeURL' here doesnt creates my chart , instead 'URL' works just fine.
dataType: "json"
}
}
});
I know its STRANGE but that's how it worked for me..
Anyways, Thanks a ton..:)