I have the following code:
var mdl = #Html.Raw(Json.Encode(Model.FacilityList));
var ds = new kendo.data.TreeListDataSource({
data: mdl,
schema: {
model: {
id: "ClientOrganizationId",
fields: {
parentId: { field: "ParentOrganizationId", nullable: true },
ClientOrganizationId: { field: "ClientOrganizationId", type: "number" },
Name: { field: "Name"},
Street: { field: "Street" },
City: { field: "City" },
State: { field: "State" },
ZipCode: { field: "Zipcode" }
},
expanded: true
}
}});
$("#treelist").kendoTreeList({
dataSource: ds,
selectable: true,
columns: [
{ field: "Name", title: "Organization Name"},
{ field: "Contracted", title: "Contracted"},
{ field: "ClientOrganizationId", title: "Id"},
{ field: "Street", title: "Street"},
{ field: "City", title: "City" },
{ field: "State", title: "State" },
{ field: "ZipCode", title: "ZipCode"}]});
How would I add another column that contains an actionlink to the "Home" controller's "Update" action passing the ClientOrganizationId as a parameter?
I want the Update action to be something like this
public ActionResult Update(int Id)
{
}
You use a column template; basically something like:
{
field: "ClientOrganizationId",
title: "Id link",
template: "<a href='/Home/Update/#= ClientOrganizationId #'>" +
"link me to id: #= ClientOrganizationId # </a>"
},
I.e. fill in whatever is needed to call the Update action while writing the id value with
#= ClientOrganizationId #
(I don't remember the link semantics offhand, so the href part may be very wrong)
Related
Using kendo grid edit event I want to disable field name and id during Edit mode. I manage to disable id by following this example here. But went I try to disable name seem it not working, any thought how to do this?
WORKING DEMO IN DOJO
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"name": { type: "string" }
}
}
}
},
editable: "inline",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew()) {
var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
numeric.enable(false);
//var x = e.container.find("input[name=name]").data("kendoTextBox");
//x.enable(false);
//$("input[name=name]").prop("disabled", true).addClass("k-state-disabled");
//$("input[name=name]").editable = false;
}
}
});
by using editable function i created this
function isEditable(e){
var dataSource = $("#grid").data("kendoGrid").dataSource;
return (e.id == null || e.id == '');
}
and add this into the grid > column
columns: [
{ field: "id", editable: isEditable },
{ field: "name", editable: isEditable },
{ field: "age" },
{ command: "edit" }
],
Full working demo is here
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
}
}
}
Does anyone know how to showing page sizes drop down list and refresh button on the footer kendo grid MVVM likes this
Here is my view code:
<div id="customer-grid"
data-role="grid"
data-sortable="true"
data-selectable="true"
data-pageable="true"
data-pagesizes="[5, 10, 20]"
data-columns='[
{ field: "CustomerID", title: "ID", width: "75px" },
{ field: "CompanyName", title: "Company"},
{ field: "ContactName", title: "Contact" },
{ field: "ContactTitle", title: "Title" },
{ field: "Address" },
{ field: "City" },
{ field: "Region" },
{ field: "PostalCode" },
{ field: "Country" },
{ field: "Phone" },
{ field: "Fax" } ]'
data-bind="source: customerSource">
</div>
and here is my data source code:
var customerSource = new kendo.data.DataSource({
transport: {
read: {
async: false,
url: crudServiceBaseUrl,
dataType: "json"
}
},
serverPaging: true,
pageSize: 10,
schema: {
model: customerModel,
data: "data",
total: "count"
},
});
Thanks in advance.
You should define data-pageable as:
data-pageable="{ refresh: true, pageSizes: [5, 10, 20] }"
Please, note that the array of page sizes is defined in data-pageable and not in data-pagesizes.
So your grid definition would be:
<div id="customer-grid"
data-role="grid"
data-sortable="true"
data-selectable="true"
data-pageable="{ refresh: true, pageSizes: [5, 10, 20] }"
data-columns='[
{ field: "CustomerID", title: "ID", width: "75px" },
{ field: "CompanyName", title: "Company"},
{ field: "ContactName", title: "Contact" },
{ field: "ContactTitle", title: "Title" },
{ field: "Address" },
{ field: "City" },
{ field: "Region" },
{ field: "PostalCode" },
{ field: "Country" },
{ field: "Phone" },
{ field: "Fax" } ]'
data-bind="source: customerSource">
</div>
Check it here : http://jsfiddle.net/9zL6J/
need help about adding a new recort in a kendo grid.
I have a grid with a foreign key field. The grid is populated by a json data with subobject, returned from a webmethod. it looks like this:
[
{
"classe_iva": {
"id_classe_iva": 5,
"desc_classe_iva": "Esente",
"note_classe_iva": null
},
"id_iva": 37,
"desc_iva": "bbb",
"codice_iva": "bbb",
"imposta": 2,
"indetr": 2,
"id_classe_iva": 5,
"note": "dddddfsf",
"predefinito": false,
"id_company": 4
},
{
"classe_iva": {
"id_classe_iva": 6,
"desc_classe_iva": "Escluso",
"note_classe_iva": null
},
"id_iva": 52,
"desc_iva": "o",
"codice_iva": "jj",
"imposta": 1,
"indetr": 1,
"id_classe_iva": 6,
"note": "l",
"predefinito": false,
"id_company": 4
}
]
and this is the schema.model used in the kendo datasource:
model = {
id: "id_iva",
fields: {
id_iva: { type: "string", editable: false },
desc_iva: { type: "string" },
codice_iva: { type: "string" },
imposta: { type: "number" },
indetr: { type: "number" },
id_classe_iva: {type: "string"},
note: { type: "string" },
predefinito: { type: "boolean" },
id_company: { type: "number" }
}
}
.. and below is shown the grid columns format:
toolbar = [{
name: "create",
text: "Aggiungi nuova aliquota IVA"
}];
columns = [
{ field: "desc_iva", title: "Descrizione", width: 45 },
{ field: "codice_iva", title: "Codice", width: 45 },
{ field: "imposta", title: "Imposta", width: 45 },
{ field: "indetr", title: "Indetr", width: 45 },
{ field: "classe_iva.desc_classe_iva", title: "Classe IVA", width: 200, editor: categoryDropDownEditor, template: "#= classe_iva ? classe_iva.desc_classe_iva : 1 #", defaultValue: { id_classe_iva: 1, desc_classe_iva: "Acq. Intra-UE" } },
{ field: "note", title: "Note", width: 45 },
{
command: [{
name: "destroy",
text: "Elimina",
confirmation: "Sei sicuro di voler eliminare questa voce?"
} ,
{
name: "edit",
text: {
edit: "Modifica",
update: "Aggiorna",
cancel: "Cancella"
}
}
]
}
];
Theese settings works fine when i edit a row, and the grid shows the right content into the combobox field.
The problem is when i click on the "add new record" button, because when it tries to add a new row, it doesn't find the subobjects field "classe_iva".
if i change the column.field into this
{ field: "id_classe_iva", title: "Classe IVA", width: 200, editor: categoryDropDownEditor, template: "#= id_classe_iva ? id_classe_iva : 1 #", defaultValue: { id_classe_iva: 1, desc_classe_iva: "Acq. Intra-UE" } },
{ field: "note", title: "Note", width: 45 }
the add button works fine, but when the grid is loaded, the column id_classe_iva doesn't shows me the classe_iva.desc_classe_iva field...
how can i fix the issue??^?
thanks in advance.
to fix this issue, i used a workaround:
the error was thrown because, in the declaration of the field.template there where a not declared variable (classe_iva):
{ field: "id_classe_iva", title: "Classe IVA", width: 200, editor: categoryDropDownEditor, template: "#= classe_iva ? classe_iva.desc_classe_iva : 1 #", defaultValue: { id_classe_iva: 1, desc_classe_iva: "Acq. Intra-UE" } },
then, i declared a global variable
var classe_iva;
in this way, when i add a new record, the code doesn't throw any errors, and by the ternary if, the default value is set.
hope it will help someone.
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/