and this is onlne code: http://jsfiddle.net/shahr0oz/K4X3T/19/
or
I have a dropdownlist in my view i want in my view.I want when change my dropdownlist,a java script template bind dropdownlist.i write this but dont work plead help me.
var roles=[{
code:1,
roleName: "Admin",
access: [
{ id: 1, description: "create", selected: true},
{id: 2, description: "delete", selected: false},
{ id: 3, description: "update", selected: false}
]
} ,{
code:2,
roleName: "user",
access: [
{ id: 1, description: "create", selected: true},
{id: 2, description: "delete", selected: true},
{ id: 3, description: "update", selected: false}
]
}];
var viewModel = kendo.observable({
Roles:roles,
role:"Admin",
accessRole:null
});
kendo.bind($("#example"), viewModel);
<
div
id
=
"example"
>
Current Role :<
span
data-bind
=
"text: role"
></
span
>
<
br
>
<
select
type
=
"text"
id
=
"RoleName"
data-bind
=
"source: Roles, value:role"
data-text-field
=
"roleName"
>
<
select
/>
<
ul
data-template
=
"row-template"
data-bind
=
"source: accessRole.access"
></
ul
>
</
div
>
<
script
id
=
"row-template"
type
=
"text/x-kendo-template"
>
<
li
>
<
input
type
=
"checkbox"
data-bind
=
"checked: selected"
/>
<
label
data-bind
=
"text: description"
/>
</
li
>
</
script
>
and this is onlne code: http://jsfiddle.net/shahr0oz/K4X3T/19/
var
ServiceBaseUrl =
"http://localhost/WebSiteTestTelerik/ServiceTelerikTest.svc/GetEmployeeData"
;
dataSourceTest =
new
kendo.data.DataSource({
//read the data from webservice
transport: {
read: {
url: ServiceBaseUrl,
type:
"GET"
,
dataType:
"jsonp"
,
contentType:
'application/json'
,
complete:
function
(data) {
if
(data.success && data.code) eval(data.code);
if
(data.success) {
alert( data.responseText );
res =JSON.stringify( data.responseText);
}
else
alert(
"ERROR:"
+ data.message);
}
},
parameterMap:
function
(data, operation) {
// debugger;
if
(operation !==
"read"
) {
return
JSON.stringify({ datas: data.models });
}
},
schema: {
model: {
id:
"_EmployeeID"
,
fields: {
_EmployeeID: { type:
"string"
, hidden:
true
,editable:
false
},
_Adress:{type:
"string"
},
_City :{type:
"string"
},
_Country: {type:
"string"
},
_Extension:{type:
"string"
},
_FirstName:{type:
"string"
},
_HomePhone :{type:
"string"
},
_LastName:{type:
"string"
},
_Notes: { type:
"string"
, hidden:
true
},
_PostalCode: {type:
"string"
},
_Region:{type:
"string"
},
_Title :{type:
"string"
},
_TitleOfCourtesy: { type:
"string"
},
_BirthDate:{type :
"date"
},
_HireDate: {type:
"date"
}
},
//fields
},
//model
},
//schema
},
});
$(document).ready(
function
() {
$(
"#TestGrid"
).kendoGrid({
dataSource: dataSourceTest,
pageable:
true
,
scrollable:
false
,
navigatable:
true
,
columns: [
{ field:
"_FirstName"
, title:
"FirstName"
},
{ field:
"_LastName"
, title:
"LastName"
},
{ field:
"_Adress"
, title:
"Address"
},
{ field:
"_City"
, title:
"City"
},
{ field:
"_Country"
, title:
"Country"
},
{ field:
"_Extension"
, title:
"Extension"
},
{ field:
"_HomePhone"
, title:
"HomePhone"
},
{ field:
"_Notes"
, title:
"Notes"
, hidden:
true
},
{ field:
"_PostalCode"
, title:
"PostalCode"
},
{ field:
"_Region"
, title:
"Region"
},
{ field:
"_Title"
, title:
"Title"
},
{ field:
"_TitleOfCourtesy"
, title:
"TitleOfCourtesy"
},
{ field:
"_BirthDate"
, title:
"Birth Date"
, template:
'#= kendo.toString(_BirthDate,"dd/MM/yyyy , hh:mm:ss ")#'
},
{ field:
"_HireDate"
, title:
"Hire Date"
, template:
'#= kendo.toString(_HireDate,"dd/MM/yyyy") #'
} hh:mm:ss => adding
this
will format te time
],
pageable: {
refresh:
true
,
pageSizes:
true
},
filterable:
true
,
columnMenu:
true
,
sortable:
true
,
dataBound:
function
(e) {
displayFilterResults();
},
});
});
[OperationContract]
[WebInvoke(Method =
"GET"
, UriTemplate =
"/GetEmployeeData"
, ResponseFormat = WebMessageFormat.Json)]
public
IEnumerable<EmployeeTest> GetEmployeeData()
{
dbContext =
new
EntitiesModel();
using
(EntitiesModel dbcontext =
new
EntitiesModel())
{
var Emp = (from p
in
dbcontext.Employees
select
new
EmployeeTest
{
_Adress = p.Address,
_City = p.City,
_Country = p.Country,
_EmployeeID = (p.EmployeeID).ToString(),
_Extension = p.Extension,
_FirstName = p.FirstName,
_HomePhone = p.HomePhone,
_LastName = p.LastName,
_Notes = p.Notes,
_PostalCode = p.PostalCode,
_Region = p.Region,
_Title = p.Title,
_TitleOfCourtesy = p.TitleOfCourtesy,
// _HireDate=p.HireDate,
// _BirthDate=p.BirthDate
}).ToList();
//JavaScriptSerializer Ser = new JavaScriptSerializer();
//Ser.Serialize(Emp);
return
Emp;
}
}
<
system.web.extensions
>
<
scripting
>
<
webServices
>
<
jsonSerialization
maxJsonLength
=
"2147483647"
/>
</
webServices
>
</
scripting
>
</
system.web.extensions
>
<
system.serviceModel
>
<
behaviors
>
<
endpointBehaviors
>
<
behavior
name
=
"webHttpBehavior"
>
<
dataContractSerializer
maxItemsInObjectGraph
=
"10000000"
/>
<
webHttp
/>
</
behavior
>
</
endpointBehaviors
>
<
serviceBehaviors
>
<
behavior
name
=
""
>
<
serviceMetadata
httpGetEnabled
=
"true"
/>
<
serviceDebug
includeExceptionDetailInFaults
=
"true"
/>
</
behavior
>
</
serviceBehaviors
>
</
behaviors
>
<
bindings
>
<!-- for passing data with jsonp-->
<
webHttpBinding
>
<
binding
name
=
"webHttpBindingWithJsonP"
crossDomainScriptAccessEnabled
=
"true"
maxBufferSize
=
"2147483644"
maxReceivedMessageSize
=
"2147483644"
transferMode
=
"Buffered"
>
<
readerQuotas
maxStringContentLength
=
"2147483644"
/>
</
binding
>
</
webHttpBinding
>
</
bindings
>
<!--<
behaviors
>
<
serviceBehaviors
>
<
behavior
name
=
"ServiceAspNetAjaxBehavior"
>
<
serviceMetadata
httpGetEnabled
=
"true"
/>
<
serviceDebug
includeExceptionDetailInFaults
=
"true"
/>
</
behavior
>
</
serviceBehaviors
>
<
endpointBehaviors
>
<
behavior
name
=
"ServiceAspNetAjaxBehavior"
/>
</
endpointBehaviors
>
</
behaviors
>-->
<
serviceHostingEnvironment
aspNetCompatibilityEnabled
=
"true"
multipleSiteBindingsEnabled
=
"true"
/>
<
services
>
<!-- for passing data with jsonp-->
<
service
name
=
"TestTelerikWCF.ServiceTelerikTest"
>
<
endpoint
address
=
""
bindingConfiguration
=
"webHttpBindingWithJsonP"
binding
=
"webHttpBinding"
contract
=
"TestTelerikWCF.ServiceTelerikTest"
behaviorConfiguration
=
"webHttpBehavior"
/>
</
service
>
</
services
>
<
standardEndpoints
>
<
webScriptEndpoint
>
<
standardEndpoint
name
=
""
crossDomainScriptAccessEnabled
=
"true"
/>
</
webScriptEndpoint
>
</
standardEndpoints
>
</
system.serviceModel
>
<
system.webServer
>
<
modules
runAllManagedModulesForAllRequests
=
"true"
/>
</
system.webServer
>
<!DOCTYPE html>
<
html
>
<
head
>
<
link
href
=
"styles/kendo.common.css"
rel
=
"stylesheet"
/>
<
link
href
=
"styles/kendo.default.css"
rel
=
"stylesheet"
/>
<!--<link href="styles/kendo.silver.css" rel="stylesheet" />-->
<
title
></
title
>
<
script
src
=
"jquery-1.8.2.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
<
script
src
=
"KendoGridjs.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"TestGrid"
></
div
>
</
body
>
</
html
>
$(document).ready(function () {
var dataSource = kendo.data.DataSource({
transport: {
read: {
url: '@Url.Action("GetAll", "Company")',
dataType:"json"
},
schema: {
data: "Companies",
total: "TotalCount",
model: {
id: 'CompanyID',
fields: {
CompanyID:{
type: 'number',
nullable: true,
editable:false
},
Name:{
type: 'string'
},
Rif:{
type: 'string'
},
Telephone:{
type: 'string'
},
FisicalAddress:{
type: 'string'
}
}
}
},
pageSize: 1
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 250,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: false,
numeric: true
},
columns: [ { field: "CompanyID", title: "#", width: 150 },
{ field: "Name", title: "Name", width: 150 },
{ field: "Rif", width: 150 },
{ field: "Telephone", title: "Telephone"},
{ field: "FisicalAddress", width: 300 }]
});
});
and this is my code in server side:public JsonResult GetAll(
{
var companies = _companyService.GetAll().Select(c => new { c.CompanyID, c.Name, c.Rif, c.Telephone, c.FiscalAddress});
return Json(new { Companies = companies, TotalCount = companies.Count()},JsonRequestBehavior.AllowGet);
}
Error description in file kendo.web.min.js or kendo.data.min.js
Microsoft JScript runtime error: Object doesn't support property or method '_observe'
Any idea what may be happening? Thank you for help
....
editable: { mode: "popup", template: kendo.template($("#popup_editor").html()) },
height: 450, filterable: true, sortable: true, pageable: true,
toolbar: [{text: "Add data", name: "create"}],
columns: [
{ field: "name",title: "Name", filterable: true },
{ field: "dtcreate",title: "Date create", filterable: true },
{ command: [{text:"Edit", name:"edit"}, {text:"Delete",name:"destroy"}], title: " ", width: "160px" }
]
<
script
id
=
"popup_editor"
type
=
"text/x-kendo-template"
>
<
div
class
=
"k-edit-label"
><
label
for
=
"name"
>Name</
label
></
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"name"
data-bind
=
"value:name"
>
<
div
class
=
"k-edit-label"
><
label
for
=
"publish"
>Publish</
label
></
div
>
<
input
type
=
"text"
class
=
"k-input k-textbox"
name
=
"publish"
data-bind
=
"value:publish"
>
<
div
class
=
"k-edit-label"
><
label
for
=
"dtcreate"
>Date Create</
label
></
div
>
<
input
type
=
"text"
name
=
"dtcreate"
data-type
=
"date"
data-bind
=
"value:dtcreate"
data-role
=
"datepicker"
/>
</
script
>