I'm trying to write a group header template in Kendo Grid with title and button .
I have something like this:
group: { field: "ManagerName" }
},
columns: [
{ field: "Id", title: "Id" },
{ field: "ClientName", title: "Klient" },
{ field: "EngagementName", title: "Sprawa" },
{ field: "SubprojectName", title: "Podsprawa" },
{ field: "ManagerName", title: "Manager", groupHeaderTemplate: "#= value # <button class='rounded-button rounded-button-blue' type='button' onclick='confirmGroup()'>#Resources.Lang.confirmGroup</button>" },
{ field: "ManagerId", title: "ManagerId", hidden: true },
{ field: "LocationName", title: "Lokalizacja" },
{ field: "Signatures", title: "Ostatnia sygnatura" },
{ field: "LogicalState", title: "Stan" }
]
And I would like to call functions confirmGroup with parameter Manager Id.
Unfortunettly something like:
onclick='confirmGroup(#=ManagerId#)'
Doesn't work.
I was looking for solution but didn't find anything.
Could anyone tell me how to call this method, please?
Surround your parameter with escaped " and passing data.ManagerId will do the trick.
onclick='confirmGroup(\"#=data.ManagerId#\")'
Related
The Navigator tool comes with the ability to display custom tables, defined through the frontend-config.js file. The quickstart example contains such a file that defines a custom list of contracts.
Is it also possible to display a custom list of templates?
To add a custom list of templates, add a custom view with source.type=="templates".
Here is an example of a custom view that would list all tempaltes that have "Iou:Iou" in their template ID:
iouTemplates: {
type: "table-view",
title: "Iou Templates",
source: {
type: "templates",
filter: [
{
field: "id",
value: "Iou:Iou",
}
],
search: "",
sort: [
{
field: "id",
direction: "ASCENDING"
}
]
},
columns: [
{
key: "id",
title: "Template ID",
createCell: ({rowData}) => ({
type: "text",
value: rowData.id
}),
sortable: true,
width: 80,
weight: 0,
alignment: "left"
}
]
}
I want to show to users subset of columns and allow them to add extra columns if needed. I am struggling to load only subset of columns on load. Please find the code below I have done.
<kendo-grid k-options="vm.mainGridOptions"
k-columns="vm.mainGridColumns"
k-sortable="true"
k-filterable="{mode: 'row'}"
k-column-menu="true"
k-serverFiltering="false"
k-pageSize="10"
k-pageable="{ pageSizes: [5, 10, 25, 50, 100] }"> </kendo-grid>
Controller code
var mainGridDataSource = new kendo.data.DataSource({
transport: { read: mainGridReadEventHandler, cache: true },
serverFiltering: false,
page: 1,
pageSize: 10,
schema: {
data: 'data',
total: 'total',
model: {
fields: {
customerName: { type: "string" },
serviceAccountStatus: { type: "string" },
customerNumber: { type: "string" },
serviceType: { type: "string" },
utilityAccountNumber: { type: "string" },
serviceAddress: { type: "string" },
billingAccountNumber: { type: "string" },
utility: { type: "string" },
phoneNumber: { type: "string" },
email: { type: "string" }
}
}
}
});
vm.mainGridColumns = [
{
field: "customerName",
title: "Name",
template:
"<a ui-sref='resiservice.account-search.customer-details({ customerId:${customerId}, serviceAccountId:${serviceAccountId} })'>${customerName}</a>"
},
{
field: "serviceAccountStatus",
title: "Status"
},
{
field: "customerNumber",
title: "NAP Customer #"
},
{
field: "serviceType",
title: "Commodity"
},
{
field: "utilityAccountNumber",
title: "Utility/Account #"
},
{
field: "serviceAddress",
title: "Service Address"
},
{
field: "billingAccountNumber",
title: "NAP Account #"
},
{
field: "utility",
title: "Utility"
},
{
field: "phoneNumber",
title: "Phone #"
},
{
field: "email",
title: "Email Address"
}
];
Currently columns list coming like this first time
And i want to achive like this
Use columns.hidden property to hide a column, i.e.
{
field: "utility",
title: "Utility",
hidden: true
},
{
field: "phoneNumber",
title: "Phone #",
hidden: true
},
{
field: "email",
title: "Email Address",
hidden: true
}
For example:
http://dojo.telerik.com/EzuFO
The column is still visible on the list of columns in menu.
I have a kendo grid, defined as such:
$("#auditGrid").kendoGrid({
height: 650,
width: 650,
sortable: true,
filterable: true,
resizable: true,
columns: [
{ field: "ChangeTypeDescription", title: "Change Type" },
{ field: "LevelDescription", title: "Level" },
{ field: "Site.ShortName", title: "Site", width: "100px", },
{ field: "TimeStampLocal", title: "Date", type: "date", format: "{0: yyyy-MM-dd HH:mm:ss}" }
]
});
However, the column labelled "Site" does not display anything, even when I know there should be something there. Setting the field as "Site" instead of "Site.ShortName" shows a value of [object Object], but whenever I try to display ShortName off of Site, it shows an empty column. All other columns display properly.
Does anyone have any insight as to why this is happening?
The datasource schema, in case you need to see it:
schema: {
model: {
fields: {
ChangeTypeDescription: { type: "string" },
LevelDescription: { type: "string" },
Site: { type: "string" },
TimeStampLocal: { type: "date" }
}
}
},
You needs to use the template functionality for achieving it, just change the column description of the field Site as follows
{ field: 'Site', title: 'Site', template: '#= Site.ShortName# '}
I have JSON with structure like this:
"id":1,
"user_role":"ADMIN",
"state":"ACTIVE",
"address":{
"street":"test 59",
"city":"City test",
"post_number":"25050"
},
How I should to pass values of address.street into column using setting in fields and model?
Many thanks for any advice.
If you want to show all values in a single column do what #RobinGiltner suggests.
If you want to show each member of address in a different column you can do:
var grid = $("#grid").kendoGrid({
dataSource: data,
editable: true,
columns : [
{ field: "id", title: "#" },
{ field: "user_role", title: "Role" },
{ field: "address.street", title: "Street" },
{ field: "address.city", title: "City" },
{ field: "address.post_number", title: "Post#" }
]
}).data("kendoGrid");
i.e.: use address.street as name of the field. This would allow you even to edit the field as in the example: http://jsfiddle.net/OnaBai/L6LwW/
#OnaBai Good and intuitive answer. Sadly Kendo doesn't always work to well with nested properties this way. For example formating doesn't work. Here is an example using data source shema to access nested properties. This way you can use formatting but you have to specify a schema model.
var grid = $("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
user_role: { type: "string" },
address_street: { from: "address.street" },
address_city: { from: "address.city" },
address_post_number: {
type: "number",
from: "address.post_number"
}
}
}
}
},
columns: [{
field: "id",
title: "#"
}, {
field: "user_role",
title: "Role"
}, {
field: "address_street",
title: "Street"
}, {
field: "address_city",
title: "City"
}, {
field: "address_post_number",
title: "Post#",
format: "{0:0#######}"
}]
}).data("kendoGrid");
Jsfiddle: http://jsfiddle.net/wtj6mtz2
See also this Telerik example for accessing nested properties.
You could use a template on the grid column definition to display whichever pieces of the address you wanted.
{ field: 'address', title: 'Address', template: '#= address.street# #= address.city#, #= address.post_number# ' },
See documentation for kendo column template. http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.template
See sample at http://jsbin.com/gizab/1/edit
Is there is any way to create widgets in kendo grid cell template? here is the sample code.
columns: [{
field: "Name",
title: "Contact Name",
width: 100
},
{
field: "Cost",
title: "Cost",
template: "<input value='#: Cost #'> </input>",// input must be an numerical up down.
}]
I want to create a numerical up down for cost column.
here is the demo
Use the "editor" property in your field definition. You have to specify a function that will append the widget to the row/bound cell.
Here's an example where I put a drop downlist in each of the rows of a grid:
$('#grdUsers').kendoGrid({
scrollable: true,
sortable: true,
filterable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{ field: "Id", title: "Id", hidden: true },
{ field: "Username", title: "UserName" },
{ field: "FirstName", title: "First Name" },
{ field: "LastName", title: "Last Name" },
{ field: "Email", title: "Email" },
{ field: "Team", title: "Team", editor: teamEdit, template: "#=Team ? Team.Name : 'Select Team'#" },
{ command: { text: "Save", click: saveEmployee }, width: '85px' },
{ command: { text: "Delete", click: deleteEmployee }, width: '85px' }
],
editable: true,
toolbar: [{ name: "create-user", text: "New Employee" }]
});
function teamEdit(container, options) {
$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: {
Name: "Select Team",
Id: ""
},
dataTextField: "Name",
dataValueField: "Id",
dataSource: model.getAllTeams()
});
}
You can define kendo numeric textbox binding in template. Also define databound function where explictly call kendo.bind method.
I have updated your fiddle as below:
template: "<input value='#=Cost#' data-bind='value:Cost' type='number' data-role='numerictextbox' />"
Updated fiddle
<kendo-grid-column title="Billed" field="billed" class="text-center" id="">
<ng-template kendoGridCellTemplate let-dataItem="dataItem">
<input type="text" width="10px" value="45">
<a class="anchor_pointer">{{dataItem.billed }}</a>
</ng-template>
</kendo-grid-column>