I'm a newb in KendoUI and I'm trying to bind object like this:
var dataSource = new kendo.data.DataSource({
data: {
a:"A",
b:{
c:"C",
d:"D"
}
},
schema:{
model:{
fields:{
a: "string"
b: ???
}
}
}
})
to the kendo Grid. It's alright with "a" property, but I have no idea how to bind (and is it even possible) the content of "b".
Should I declare "b" as a separate DataSource?
I have googled a lot, but it seems, like I can't to formulate my problem correct...so, can anybody help with that?
This kind of binding is possible in kendo grid. you will be using something like the one given below
var dataSource = new kendo.data.DataSource({
data: {
a:"A",
b:{
c:"C",
d:"D"
}
},
schema:{
model:{
fields:{
a: "string"
'b.c': "string",
'b.d':"string"
}
}
}
})
This kind of binding works fine for me. Do check this out. If you are working with ASP.Net MVC, the posted JSON data is model bound perfectly too.
Related
I am unable to get the built-in search for Kendo DropDownList to use the templated text instead of the raw text from the dataSource. I want to strip off the leading slash from the dataSource name for display, value, and search purposes.
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [ "/Apples", "/Oranges" ],
// None of these templates appear to fix the search text.
// Kendo is using the dataSource item to search instead of the template output.
// I want to be able to search using 'a' (for Apples) or 'o' (for Oranges).
// If I use '/' then it cycles through the items which proves to me that the search is not using templated text.
template: function(t) { return t.name.slice(1); },
valueTemplate: function(t) { return t.name.slice(1); },
optionLabelTemplate : function (t) { return t.name.slice(1); },
});
</script>
Here is a non-working sample in Kendo's UI tester:
http://dojo.telerik.com/#Jeremy/UvOFo
I cannot easily alter the dataSource on the server side.
If it's not possible to change how the search works then maybe there is a way to alter the dataSource after it's been loaded into the client from the server?
I'm not sure if this will help you at all, but I was able to force it to work. The control allows for you to subscribe to the filtering event on init. From here, you can set the value of the filter before it is submitted.
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: ["/Apples", "/Oranges"],
template: function(t) { return t.slice(1); },
valueTemplate: function(t) { return t.slice(1); },
optionLabelTemplate : function (t) { return t.slice(0); },
filter: "startswith",
filtering: function(e) {
e.filter.value = '/'+e.filter.value;
}
});
</script>
I'm trying to attach a local dataSource to Kendo Scrollview widget, but I'm having difficulty getting it to work.
The scrollView initializes properly, but unable to read from the dataSource.
<div id="scrollView" data-role="scrollview"></div>
var localArray = [{
name: "John"
}, {
name: "Doe"
}, ];
$("#scrollView").kendoMobileScrollView({
dataSource: localArray,
template: $("#kendo-template").html(),
contentHeight: 115
});
However, if I use the setDataSource method, it works just fine:
<div id="scrollView" data-role="scrollview" data-template="kendo-template"></div>
$("#accountCardScroller").data("kendoMobileScrollView").setDataSource(localArray);
What am I doing wrong? How do I force the scrollView widget to fetch from the dataSource?
That sort of sounds like a bug to me. Maybe try this instead, which will turn the array into a DataSource first:
var localArray = new kendo.data.DataSource({
data: [{
name: "John"
}, {
name: "Doe"
}]
});
in telerik extenstion to pass additional data to ajax request I used
function onDataBinding(e)
{
e.data = {argument : 4};
}
where e was div cointainer with data object inside,
How can I do this using kendo ? I tried the same but for Kendo e arqument is sth totally different.
Finally i got the answer my own and it is :
$('#grid').data('kendoGrid').dataSource.read({name:value})
Sorry for the terrible late at the party, but i've got some special cake that you may find tasty:
function readData()
{
return {
anagId: selectedItem.ID
};
}
$("#grid").kendoGrid({
dataSource: {
type: "ajax",
transport: {
read: {"url":"#Url.Action("RecordRead", "Tools")","data":readData}
}
[ rest of the grid configuration]
I came across this code by inspecting the code generated by Kendo Asp.Net MVC helpers.
I don't know if this is a further implementation that didn't exist at the age of the post, but this way looks really the most flexible compared to the other answers that i saw. HTH
Try this:
Add this to your grid read function or any CRUD operation:
.Read(read => read.Action("ReadCompanyService", "Admin").Data("CompanyServiceFilter"))
Add javascript:
function CompanyServiceFilter()
{
return {
company: $("#ServiceCompany").val()
}
}
In your controller:
public ActionResult ReadCompanyService([DataSourceRequest]DataSourceRequest request, string company)
{
var gridList = repository.GetCompanyServiceRateList(company);
return Json(gridList.ToDataSourceResult(request));
}
Please note, only string type data is allowed to be passed on read, create, update and delete operations.
If you want to pass some param to ajax request, you can use parameterMap configuration on your grid.
This will get passed on to your Ajax request.
parameterMap: function (options, operation) {
if (operation === "read") {
var selectedID = $("#SomeElement").val();
return {ID: selectedID }
}
return kendo.stringify(options.models) ;
}
Try this:
.Read(read => read.Action("Controller", "Action")
.Data(#<text>
function() {
return {
searchModel: DataFunctionName(),
userName: '#=UserName#'
}
}
</text>)
)
JS function
function DataFunctionName() {
var searchModel = {
Active: $("#activityMonitorIsActive").data('kendoDropDownList').value(),
Login: $("#activityMonitorUsers").data('kendoComboBox').value()
};
return searchModel;
}
I am attempting to develop a Mobile app using Kendo Mobile's MVVM and JayData Data Access Library. I have run into an issue that I have worked on for about a week now with no luck. I am looking for a simple example consisting of Kendo two way binding using a model that is created by JayData's (asKendoDataSource) having an inverseProperty navigation property. I am not sure that JayData kendo.js Module supports models containing inverseProperty and in the process of testing, even after getting the data to save with the relationship, retrieval of the same record does not pull the relational data back into the viewmodel.
Can anyone provided a simple example of Saving and Retrieving such a model using the webSql provider?
Any help is greatly appreciated.
JayData Models (simplified):
//Expense Category Model
$data.Entity.extend('data.types.ExpenseCategory', {
Id: { type: 'Edm.Guid', key: true },
CategoryName: { type: 'string', required: true, minLength: 3, maxLength: 26 },
Expenses: { type: Array, elementType: "data.types.Expense", inverseProperty: "Category" }
});
//Expense Model
$data.Entity.extend('data.types.Expense', {
Id: { type: 'Edm.Guid', key: true },
ExpenseDescription: { type: 'string', required: true },
Category: { type: "data.types.ExpenseCategory", inverseProperty: "Expenses" }
});
// Entity Context
$data.EntityContext.extend('data.types.DbContext',
{
ExpenseCategories: { type: $data.EntitySet, elementType: data.types.ExpenseCategory },
Expenses: { type: $data.EntitySet, elementType: data.types.Expense },
});
// Database Context
data.context = new data.types.DbContext({ name: 'sqLite', databaseName: 'cDb' });
Kendo Viewmodel (simplified):
views.expenseCategoryPicker = kendo.observable({
app: null,
categories: db.context.ExpenseCategories.asKendoDataSource(),
expense: null,
itemClick: function(sender) {
var expense = views.expenseCategoryPicker.expense;
expense.set('Category', sender.data);
...add/update logic
expense.sync();
},
loadExpense: function(dataItem) {
views.expenseCategoryPicker.set('expense', undefined);
views.expenseCategoryPicker.set('expense', dataItem);
},
});
EDIT
I figured out why the data won't save and a work around. There is a bug in JayData's kendo.js module when using the Kendo MMVM binding and inverseProperty relationships. They(JayData) simply don't support their own Attach method when an object relationship is being set through their Kendo module. Therefor when you call Kendo's SET on the model passing in the related Object the Entity state on the Object being passed in is set to 20 (New) and JayData tries to create a new record and in my case failing due to primary key conflict. The Attach method sets the Entity state to unmodified.
I know there is probably a more elegant way to fix this in JayData's code, but for me simply adding the following line right before I use the Kendo set method to set the object relationship allows the record to be saved without error.
itemClick: function(sender) {
var expense = views.expenseCategoryPicker.expense;
//manually set the state so SQL won't try to create a new record
sender.data.innerInstance()._entityState = 10;
expense.set('Category', sender.data);
...
Subsequent reads require the Include('model') method to load the relational data as mentioned by Robesz (THANK YOU)
It would be nice to see JayData fix the data save issue in their Kendo module.
JayData doesn't load the related entities by default, you have to use the include() operator:
data.context.Expenses.include('Category').toArray(...)
The parameter of the include should be the name of the navigation property.
Super easy concept !...
At some point, my editable grid, (and detail grids), must be set to read only... so i would like to do something like:
var grid = $("#grid").data("kendoGrid");
grid.options.editable = false;
Of course this doesn't work as it would be too simple...
Thanks for any help !
I would propose you having two grids: one read-only and one read-write but only one is visible. Both share the DataSource definition, so they are always in sync. When you want to change from one to the other, you hide the visible and display the other.
Example: I create two grids, exactly the same definition and just differ in that one is hidden and one is visible, one is editable and one is not. Since both share the same DataSource it actually works perfect because changing page in one changes in the other, editing one, updates the other.
Something like:
1- A CSS definition used for toggling visibility:
.ob-hide {
display : none;
}
2- A DataSource definition:
var ds = new kendo.data.DataSource({
transport : {
read : {
url: ...
},
update : {
url: ...
},
create : {
url: ...
},
destroy : {
url: ...
}
},
pageSize: 10,
schema : {
model: {
id : ...,
fields: {
id : { type: '...' },
...
}
}
}
});
Next the two grids:
$("#grid-editable").kendoGrid({
editable: "inline",
dataSource : ds,
...
}
$("#grid-not-editable").kendoGrid({
editable: false,
dataSource: ds,
...
});
$("#grid-editable").addClass("ob-hide");
And finally the function for switching modes:
function gridEditable() {
$("#grid-editable").removeClass("ob-hide");
$("#grid-not-editable").addClass("ob-hide");
});
function gridNotEditable() {
$("#grid-editable").addClass("ob-hide");
$("#grid-not-editable").removeClass("ob-hide");
});
See it running here: http://jsfiddle.net/OnaBai/bCEJR/2/
I've worked on a better style, by adding the disabled="disabled" on the elements needed. Using angular JS with kendo, worked like a charm, as by setting the grid to disabled doesn't allow the user to edit it. Try it, might work without angular as well!