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"
}
]
}
Related
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#\")'
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
I have tried to create a new empty record without creating a model.
Accidentally I tried to run this:
new new storeComp.model()
and it actually works!
anyone know any solution for this or an answer to how is it working ?
Thanks!
Shalev
Stores that are not configured with a model will create an anonymous one implicitly. This is explained in the docs for the implicitModel private property (the store needs to know that because if it uses an implicit model, it must destroy it when it is itself destroyed).
In the end that means that you can safely expect any store to be backed with a model.
I faced the same problem for an associative store. For that i have used below JSON format to load project store. So automatically empty record is created in associative (project-resources) Store.
Store:
Ext.define('App.store.Projects', {
extend : 'Ext.data.Store',
model : 'App.model.Project'
});
Models:
Ext.define("App.model.Project", {
extend: 'Ext.data.Model',
idProperty : 'id',
uses : ['App.model.ProjectResource'],
fields: [
{ type: 'auto', name: 'id'},
{ type: 'number', name: 'customerid'},
{ type: 'string', name: 'projectcode'}
],
associations: [
{type: 'hasMany', model: 'App.model.ProjectResource', name: 'Resources', storeConfig: { remoteFilter: true }}
]
});
Ext.define("App.model.ProjectResource", {
extend: 'Ext.data.Model',
idProperty : 'id',
fields: [
{ type: 'number', name: 'id'},
{ type: 'string', name: 'name'},
{ type: 'number', name: 'projectid'},
{ type: 'auto', name: 'resourceid'}
],
associations : [
{type : 'belongsTo', model: 'App.model.Project'}
]
});
JSON Format:
[
{
"id": "105",
"customerid": "105",
"projectcode": "ALN01",
"Resources": {}
}
]
Loading store with empty object (like "Resources": {}) will create empty model.
I have a Kendo UI grid with a popup editable property. I would like to make my dropdown columns wider when I'm add/edit mode, but I cannot seem to change the widths. I can indeed change the widths in the grid itself but not in edit mode.
Does it have to do with some kind of Edit Template ? I can't find the documentation for it.
thanks.
Bob
Here's my sample grid :
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [{
field: "PositionId",
},
{
field: "Portfolio",
editor: portfolioDropDownEditor, template: "#=Portfolio#"
},
{
field: "Instrument",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument#",
},
{
field: "NumOfContracts",
},
{
field: "BuySell",
editor: buySellDropDownEditor, template: "#=BuySell#"
},
{
command: [
{
name: "edit",
click: function (e) {
}
},
"destroy"
]
},
],
sortable: true,
editable: "popup",
});
You can wire up edit event to set dropdown options:
name: "edit",
click: function (e) {
if (!e.model.isNew()) {
var dropdown = e.container.find("input[name=Portfolio]").data("kendoDropDownList");
dropdown.list.width(500);
}
}