Multiple kendo controls included in the same page are not rendering themselves.
I am trying to include a Panel Bar within a Splitter panel.
But, with the below code only the Splitter renders and the Kendo panel bar is not seen.
If i move the KendoPanelBar code ahead, then the PanelBar is seen and not the splitter.
Please suggest ..
<script type="text/javascript">
$(document).ready(function () {
$("#splitter").kendoSplitter({
panes: [
{ collapsible: true, min: "100px", max: "100px" },
{ collapsible: true}],
orientation: "horizontal"
});
$("#panelBar").kendoPanelBar();
});
</script>
var
myDS = new kendo.data.DataSource({
type: "odata",
transport: {
read: { url: "http://localhost:2000/Ajax/Lists/PassageDataService.svc/Passages/"
//, dataType: "json"
}},
schema: {
data: "d.results", model: {id: "SeqId", fields: myObject}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
sort: { field: "SeqId" }
});
When i Try to add objet to my data source with
myDS.add(myObject);
the object is added (I can see it on firebug), all goes fine but when i look at the page the new object is not on the kenod grid and firebug show an error "d.d is not defined"
If i use Json instead of odata, add object works fine but the rest is broken (pagging filtering etc with dataservice).
Anyone has every tried to add row on buton click event to kendo grid using odata and dataservice?
thanks,
Laurent
var grid = $("#grid2").kendoGrid({
dataSource: {
transport: {
read: {
url:"getList.asp",
dataType: "json" ,
data : {
'entity': 'goal',
'termStartStart' : '2011/04/01',
'empCd' : 'sato',
PG : 1
}
},
update: {
url: "update.asp",
dataType: "json" ,
type : 'POST',
data : {
entity : 'goal',
's_termStartStart' : '2011/04/01',
's_empCd' : 'sato',
's_PG' : 1
}
}
},
schema : {
data : function(data){
var new_data = [];
return new_data;
},
model: {
id: "reportId",
fields: {
reportId : {type : 'number', editable : false},
empName: { editable: false },
termStart: { editable: false },
volume: {
type: "number",
validation: {
max : { value : 1000, message : "目標訪問数は1000以内にしてください"}
}
}
}
}
}
},
height: 380,
sortable: true,
editable: true,
toolbar: [
{ name: "save", text: "保存する" },
{ name: "cancel", text: "キャンセル" },
{ name : "年度", template : ' <input
id
=
"input"
/>' }
],
columns: [ {
field: "empName",
width: 90,
title: "社員"
} , {
field: "termStart",
width: 40,
title: "月"
} , {
field: "volume",
width: 35,
title: "目標訪問数",
format: "{0:d}"
}
]
});
dataSource: {
transport: {
read: {
url:"getList.asp",
dataType: "json" ,
data : {
'entity': 'XXX'
}
},
update: {
url: "update.asp",
type : 'POST',
data : {
entity : 'XXX'
}
}
},
schema : {
data : function(data){
var new_data = [];
/* make data for grid from remote data */
return new_data;
},
model: {
id: "id",
fields: {
amp_name: { editable: false },
termStart: { editable: false },
volume: {
type: "number",
validation: {
max : { value : 1000, message : "XXX"}
}
}
}
},
toolbar: [
{ name: "save", text: "save" },
{ name: "cancel", text: "cancel" }
],
columns: [ {
field: "empName",
width: 90,
title: "社員"
} , {
field: "termStart",
width: 40,
title: "month"
} , {
field: "volume",
width: 35,
title: "target",
format: "{0:d}"
}
]
$(
"#datePicker"
).kendoDatePicker(
{
change:
function
() {
$(
"#CampaignModel_RequiredSendDate"
).val(kendo.toString(
this
.value(),
'd'
));
}
});