I want to enable editing only for Address field for the below code:
$("#grid").kendoGrid({
columns: [{
field: "name",// create a column bound to the "name" field
title: "Name",// set its title to "Name"
},
{
field: "age",// create a column bound to the "age" field
title: "Age" ,// set its title to "Age"
},
{
field: "doj",
title: "DOJ",
},
{
field: "address",
title: "ADDRESS",
},
{ command: [{ name: "destroy", text: "Remove" }, { name: "edit", text: "edit" }] }],
editable: "popup",
sortable:true,
dataSource: [{ name: "Jane", age: 30, address: "Bangalore", }, { name: "John", age: 33, address: "Hyderabad" }]
});
Define editable: false & nullable: true to column of database schema.
dataSource = new kendo.data.DataSource({
..
schema: {
model: {
id: "YourID",
fields: {
YourID: { editable: false, nullable: true },
address: { editable: false, nullable: true },
..
..
}
}
}
..
})
You have to set editable: false to the columns.
model: {
fields: {
ProductID: {
editable: false
}
}
}
Related
I want to get just editing row validating field value with another field on the.
Bu it doesn't work.
fields: [
{ name: "id", type: "text", align: "center", width: 10, editing: false, title:"ID"},
{ name: "total", type: "number", align: "center", width: 30, editing: false, title:"Total"},
{ name: "correct", type: "number", align: "center", width: 30,
validate: {validator: function(value, item) {
return value <= item.total;}, message: "Correct should be smaller or equal than Total"}
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]
can you help?
I found some way like this:
var editing_row_field2;
....
onItemEditing: function(args) {
editing_row_field2= args.item.field2; },
fields: [{ name: "field2", type: "number"},
{ name: "field1", type: "number",
validate: { validator: function(value, item) {
return editing_row_field2 >= value; },
message: "FIELD1 should be smaller or equal than FIELD2." }
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]
You can access other fields in current row using item argument from validator function
fields: [{ name: "field2", type: "number"},
{ name: "field1", type: "number",
validate: { validator: function(value, item) {
return item.field2 >= value; },
message: "FIELD1 should be smaller or equal than FIELD2." }
},
{ type: "control", modeSwitchButton: false, editButton: true, deleteButton: false }]
dataSource: {
pageSize: 5,
serverPaging: false,
serverSorting: false,
schema: {
model: {
id: "EmploymentHistoryId",
fields: {
EmployerName: { validation: { required: true } },
JobTitle: { validation: { required: true } },
PrimaryPlaceOfPractice: { validation: { required: true } },
StartDate: { validation: { required: true } },
EndDate: { validation: { required: true } },
}
}
}
},
sortable: true,
pageable: true,
toolbar: ["create"],
editable: "popup",
autoSync: true,
columns: [
{
field: "EmployerName",
title: "Name of Employer"
},{
field: "JobTitle",
title: "Job Title"
},{
field: "PrimaryPlaceOfPractice",
title: "Primary Place Of Practice"
},
{
field: "StartDate",
title: "Start Date",
template: "#= kendo.toString(kendo.parseDate(StartDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
}, {
field: "EndDate",
title: "End Date",
template: "#= kendo.toString(kendo.parseDate(EndDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
},{
command: ["destroy", "edit"],
title: "Action"
}
]
here by "PrimaryPlaceOfPractice" db return 1 or 0. But what I want to do is I want to show "Yes" in Grid if it returns 1 and "No" if 0. How can I do this. Is there a way to handle conditions. Is there a way to show a different value instead of a retrieved value from database.
/* ... */
columns: [
/* ... */
},{
field: "PrimaryPlaceOfPractice",
title: "Primary Place Of Practice",
template: "#=PrimaryPlaceOfPractice == 1 ? 'Yes' : 'No'#"
},{
/* ... */
]
/* ... */
I am displaying Grid and using detailTemplate to expandRow. But when expand the row, I want to pass the row ID and get datasource and display another grid.
I think detailTemplate won't work in this case. How can I do this ?
Here is my Code
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: [
{ id: "1", name: "Andrew", age: "30" },
{ id: "2", name: "Robert", age: "29" },
{ id: "3", name: "Frank", age: "35" }
],
autoSync: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true, type: "number" },
name: { editable: false },
age: {
validation: { min: 0, required: true },
editable: true,
nullable: true,
type: "number"
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
editable: "inline",
columns: [
{ field: "name",title: "Name" },
{ field: "age", title: "Age", width: "180px"},
{ command: ["edit"] }
],
detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>"
});
});
Did you checked this demo from Kendo UI ?
http://demos.telerik.com/kendo-ui/grid/detailtemplate
Similar to your scenario, detail grid is created in detailInit function and data for detail grid is filtered for the current employee using e.data.EmployeeID
I tried the following to add the placeholder attribute to the input field using the following code,
dataSource: {
...
schema: {
data: "storeEmployeeData",
total: "storeEmployeeDataCount",
model: {
id: "ID",
fields: {
Id: { type: "number", editable: false, nullable: true },
FirstName: { type: "string", nullable: true, editable: true, validation: { required: false } },
MiddleName: { type: "string", nullable: true, editable: true, validation: { required: false } },
LastName: { type: "string", nullable: true, editable: true, validation: { required: false } },
**Email: { type: "string", nullable: true, editable: true, placeholder: "(optional)", validation: { email: true, required: false } }
}
}
},
...
}
Also tried the following,
columns: [
{ field: "FirstName", title: "First Name", type: "string", width: "150px" },
{ field: "MiddleName", title: "Middle Name", type: "string", width: "150px" },
{ field: "LastName", title: "Last Name", type: "string", width: "150px" },
{ field: "Email", title: "Email", type: "string", width: "250px", sortable: false, placeholder: "(optional)" },
{ command: ["edit", "destroy"], title: " ", width: "200px" }
],
None of them yielded the result I was looking for i.e., having placeholder attribute placeholder="(optional)" added to the input field.
This is part of HTML5, if this feature already exists in Kendo UI Grid is it also compatible with IE 7 and IE 8 ?
Am I missing something? Any help is appreciated!
There is no placeholder option in the Kendo UI Model documentation; therefore, it is not supported directly. Reference: http://docs.kendoui.com/api/framework/model#configuration-Example. Maybe you meant to use defaultValue?
Alternatively, you could use the attributes option for the Kendo UI Grid configuration. Reference: http://docs.kendoui.com/api/web/grid#configuration-columns.attributes.
The placeholder attribute is only supported in IE 10 and above.
Update: (due to comments)
To give you an example, in order to add the placeholder attribute to the input element, you could use the editor option on the column.
columns: [
{ field: "Email", title: "Email", width: 250, sortable: false,
editor: function (container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.attr("placeholder", "(optional)");
input.appendTo(container);
}
}
]
If your looking for a place holder for when there are no records then,
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
noRecords: true,
dataSource: []
});
</script>
or
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
pageable: true,
noRecords: {
template: "No data available on current page. Current page is: #=this.dataSource.page()#"
},
dataSource: {
data: [{name: "John", age: 29}],
page: 2,
pageSize: 10
}
});
</script>
I have this grid
$("#address-grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "operations/get_sales_reps_addresses.php?salesRepsId=" + salesRepsId,
type: "GET"
},
update: {
url: "operations/edit_address.php?salesRepsId=" + salesRepsId,
type: "POST",
complete: function (e) {
$("#address-grid").data("kendoGrid").dataSource.read();
}
},
destroy: {
url: "operations/delete_address.php",
type: "POST",
complete: function (e) {
$("address-grid").data("kendoGrid").dataSource.read();
}
},
create: {
url: "operations/add_address.php?salesRepsId=" + salesRepsId,
type: "POST",
complete: function (e) {
$("#address-grid").data("kendoGrid").dataSource.read();
}
},
},
schema: {
data: "data",
total: "data.length", //total amount of records
model: {
id: "SalesRepId",
fields: {
AddressType: {
defaultValue: {
AddressTypeid: 1,
AddressTypeName: "Work"
}
},
Country: {
defaultValue: {
CountryId: 38,
CountryName: "Canada"
}
},
State: {
defaultValue: {
StateId: 4223,
StateName: "British Colombia"
}
},
City: {
defaultValue: {
CityId: 59450,
CityName: "Vancouver"
}
},
PostalCode: {
type: "string"
},
AddressText: {
type: "string"
},
IsMainAddress: {
type: "boolean"
},
AddressId: {
type: "integer"
}
}
}
},
pageSize: 3,
},
ignoreCase: true,
height: 250,
filterable: true,
sortable: true,
pageable: true,
reorderable: false,
groupable: false,
batch: true,
navigatable: true,
toolbar: ["create", "save", "cancel"],
editable: true,
columns: [{
field: "AddressType",
title: "Type",
editor: AddressTypeDropDownEditor,
template: "#=AddressType.AddressTypeName#",
}, {
field: "Country",
title: "Country",
editor: CountryDropDownEditor,
template: "#=Country.CountryName#",
}, {
field: "State",
title: "State",
editor: StateDropDownEditor,
template: "#=State.StateName#",
}, {
field: "City",
title: "City",
editor: CityTypeDropDownEditor,
template: "#=City.CityName#",
}, {
field: "PostalCode",
title: "Postal Code",
}, {
field: "AddressText",
title: "Address",
}, {
field: "IsMainAddress",
title: "Main?",
width: 65,
template: function (e) {
if (e.IsMainAddress == true) {
return '<img align="center" src ="images/check-icon.png" />';
} else {
return '';
}
}
// hidden: true
}, {
command: "destroy",
title: " ",
width: 90
},
]
});
The problem is when I try to filter by Country or State or City I got an error
TypeError: "".toLowerCase is not a function
I tried to change the type of Country to string, I use comobox, so the values were undefined. I also tried to change the type to Object, the values displayed correctly but I couldn't filter. I got the same error( toLowerCase)
How can I fix this ??
My grid is very similar this example
and here is the jsFiddle . I've just added the filter. and I still get previous error
I want to filter on the Category, any help ??
This is how you filter a dataSource Kendo dataSource , filter
So get the dataSource of your grid,
var gridDatasource = $("#address-grid").data('kendoGrid').dataSource;
and filter it like this example.
gridDatasource.filter({ ... });
If you provide a working jsFiddle, you may get a more specific answer.
Specific answer:
You added the filter, so for Category it didn't work because as I said, it is an observable, not a filed you can filter as a string.
So you must specify better your filter for this column, like this:
field: "Category",
title: "Category",
width: "160px",
editor: categoryDropDownEditor,
template: "#=Category.CategoryName#",
filterable: {
extra: false,
field:"Category.CategoryName",
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
}
see this jsFiddle -- > http://jsfiddle.net/blackjim/Sbb5Z/463/