and this is onlne code: http://jsfiddle.net/shahr0oz/K4X3T/19/ ​
I have a simple class that has a class as one of it's properties. I am trying to use the grid to both display the properties and allow in-line editing. If I don't use default values and I try to edit I get "Microsoft JScript runtime error: Syntax error, unrecognized expression: [data-container-for=Person.PersonId].
If I do use default values I get "Cannot serialize objects of type Person" when I load the page.
Help would be greatly appreciated since I haven't been able to find any information.
-Kerry
Here's the code
class User
{
int UserId;
string LoginName;
Person person;
}
class Person
{
int PersonId;
string FirstName;
string LastName;
string Email;
}
<%
= Html.Kendo().Grid<UserDto>()
.Name("UserListGrid")
.DataSource(ds => ds.Ajax()
.Update(update => update.Action("AjaxSaveUser", "User"))
.Destroy(destroy => destroy.Action("AjaxDeleteUser", "User"))
.Create(create => create.Action("AjaxInsertUser", "User"))
.Read(read => read.Action("List", "User"))
.Model(model => model.Id(m => m.UserId))
.Model(model => model.Field(m => m.UserId).Editable(false))
.Events(e => e.Error("grid_OnError"))
)
.Columns(col =>
{
col.Bound(us => us.UserId).Title("ID");
col.Command(us => us.Edit());
col.Bound(us => us.LoginName).Title("Login");
col.Bound(us => us.Person.PersonId).Hidden();
col.Bound(us => us.Person.LastName).Title("Last Name");
col.Bound(us => us.Person.FirstName).Title("First Name");
col.Bound(us => us.Person.Email).Title("Email");
col.Command(us => us.Destroy());
})
.ToolBar(commands => commands.Create().Text("Add User"))
.Editable(edit => edit.Mode(GridEditMode.InLine))
%>
Hello,
I'm trying to tweak my combo box for optimum performance but what I'm trying to do is either not possible or I do not know how to do it properly.
What I want to happen is this :
1. When my page loads I want it to load only the selected item. I'm setting my dataSource to autoBind false and creating an input with a single option which is the selectedValue that I return back from the server. Then on the open I'm selecting that initial selected value out of the returned results. The idea behind this is I want to display selectedValue but do not want load rest of results unless user accesses the dropdown.
2. When typing in the comboBox I want each request to be sent back to the server. Currently it seems the way I have it setup that initially grabs the data from the server but then it does not callback to server as I change my typed value but instead limits value based on values already returned. The purpose behind this is my comboBox may return hundreds, if not thousands of records and I do not want it loading the whole set.
$('body').ready(function () { var jqWidget = $("#myWidget"); var selectedValue = 1; var remoteDataSource = { transport: { read: { dataType : "jsonp", url : "http://localhost:8080/detail/000/q", data : { retrieveValues : "true", widgetName : "manufacturingLocation" }, autoBind : false, autoSync : true }, serverFiltering: true } }; var selectDropdownFunction = function( e ) { selectInitialValue( jqWidget, selectedValue ); }; jqWidget.kendoComboBox( { dataSource : remoteDataSource, autoBind : false, dataTextField: "value", dataValueField: "id", open: selectDropdownFunction, filter: "contains", suggest: true, index: 0, delay: 800 } ); }); function selectInitialValue( jqWidget, selectedValue ) { jqWidget.data('kendoComboBox').value(selectedValue); }
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>