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
Related
Grid popup mvvm binding seems fail when I add a new row and to set value of model attribute in edit eventHandler(model.set("port","udp")) but the select input doesn't change value and from debugger console it shows that event.model's value of property keep unchanged.
But after i manually selecting the port,I try to model.set("port","tcp"),it works!
I am confused of the timing of the binding mechanism of the value field of input element and kendo model binding...
Html part as below:
<div class="k-block k-shadow">
<table style="width:100%;">
<tr><td><button class="btn-add" id="ButtonNew" type="button" onclick="addSetting()">New</button></td></tr></table>
</div>
<div class="k-block k-shadow">
<div id="logForwardingGrid"></div>
</div>
javascript as below:
var dataSource = new kendo.data.DataSource({
data:{"items":[{"seq":8,"ip":"10.0.0.99","port":36,"protocol":"udp","enable":false}]},
schema: {
data: "items",
model: {
id: "seq",
fields: {
seq: { type: "int", editable: false, validation: { required: false} },
port: { type: "int",editable: true, validation: { required: true} },
protocol: { type: "string",editable: true, validation: { required: true} },
enable: { type: "boolean", validation: { required: true} },
}
}
},
});
$("#logForwardingGrid").kendoGrid({
dataSource: dataSource,
columns: [{
field: "seq",
hiddenEdit: true,
hidden: true
}, {
field: "ip",
title: "IP",
}, {
field: "port",
title: "Port",
}, {
field: "protocol",
title: "Protocol",
editor: protocalEditor
}],
editable: {
mode:"popup",
},
edit: function(e) {
if (e.model.isNew()) {
//fail !! e.model's value of property("protocol") keep unchanged
e.model.set("protocol","udp")
console.log(e.model)
}
}
});
function protocalEditor(container,options){
var data = [{ text: "udp", value: "udp" },{ text: "tcp", value: "tcp" }]
$('<input id="protocol" name="protocol" required data-bind="value:'+ options.field +'"/>')
.appendTo(container).kendoDropDownList({
dataSource:data,
dataTextField: "text",
dataValueField: "value",
});
}
function addSetting(){
$("#logForwardingGrid").data("kendoGrid").addRow();
}
Try supplying a defaultValue for the field in your model declaration:
var dataSource = new kendo.data.DataSource({
data:{"items": [{"seq":8,"ip":"10.0.0.99","port":36,"protocol":"udp","enable":false}]},
schema: {
data: "items",
model: {
id: "seq",
fields: {
seq: { type: "int", editable: false, validation: { required: false} },
port: { type: "int",editable: true, validation: { required: true} },
protocol: { type: "string",editable: true, validation: { required: true}, defaultValue: "tcp" },
enable: { type: "boolean", validation: { required: true} },
}
}
},
});
I don't know why, but that seems to fix the problem. See dojo for working example.
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
}
}
}
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/
I am developing an Asp.net MVC3 application with Entity Framework. I am using Knockoutjs for bindings and KendoUI for the UI part of the view. I was able to implement most of the KendoUi widgets but now I need to use KendoUI grid control which takes its data from SQL server. As far as I understood the grid widget works with XML or JSON.
So I have a db context:
public DbSet<FranchiseInfoDto> Franchises { get; set; }
I have saved some data in the tables in the local Sql server and retrieve it from the controller and serialize it to Json so I can bind it somehow to the grid widjet in the view:
private OmegaDB db = new OmegaDB();
//
// GET: /Franchise/
public JsonNetResult Index()
{
JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented };
var franchises = db.Franchises.ToList();
jsonNetResult.Data = franchises;
return jsonNetResult;
}
The serialized json data is in this format :
[{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
I read the documentation about the KendoUI Grid and was able to bind it to some local data like this:
var menus = [{ ParentId: 0, Title: "Deposit", Type: "link", Link: "http://www.abv.bg" }, { ParentId: 2, Title: "Cash", Type: "link", Link: "http://www.facebook.com"}];
var dataSource = new kendo.data.DataSource({
data: menus,
schema: {
model: {
fields: {
ParentId: { editable: true },
Title: { editable: true },
Type: { editable: true },
Link: { editable: true }
}
}
}
});
$("#grid").kendoGrid({
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "ParentId",
title: "Id",
width: 50
},
{
field: "Title",
title: "Label",
width: 100
},
{
field: "Type",
title: "Type",
width: 100
},
{
field: "Link",
title: "Link"
}
],
dataSource: dataSource,
editable: true,
groupable: true,
scrollable: true,
sortable: true,
pageable: true
});
But when I tried to bind it to the Index controller returning Json I did not succeed. I tried something like this:
dataSource: {
type: "odata",
transport: {
read: "Franchise/Index" // this is my controller action //where I serialize the data coming from the local sql server to json
}
I am rather new to programming and I am not sure whether this approach is correct. Any suggestions with examples based on my sample code will be greatly appreciated. Thank You!
I managed to populate the grid with the serialized data to json from the database. Here is the controller code returning json data:
public ActionResult SampleData()
{
JsonNetResult jsonNetResult = new JsonNetResult { Formatting = Formatting.Indented };
var f1 = new FranchiseInfoSampleData();
f1.ParentId = 0;
f1.Title = "Deposit";
f1.Type = "functionality";
f1.Link = "http://www.abv.bg";
var f2 = new FranchiseInfoSampleData();
f2.ParentId = 1;
f2.Title = "Cash Out";
f2.Type = "link";
f2.Link = "www.abv.bg";
List<FranchiseInfoSampleData> sampleData = new List<FranchiseInfoSampleData>();
sampleData.Add(f1);
sampleData.Add(f2);
jsonNetResult.Data = sampleData;
return jsonNetResult;
}
And here is the Kendo Grid code:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "Home/SampleData",
dataType: "json"
}
},
schema: {
model: {
fields: {
ParentId: { editable: true },
Title: { type: "string", editable: true },
Type: { type: "string", editable: true },
Link: { type: "string", editable: true }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "ParentId",
filterable: false
},
{
field: "Title",
width: 100
}, {
field: "Type",
width: 200
}, {
field: "Link"
}
]
});
});