Here I am formatting a couple of columns, but I have to repeat the field names (MyDate,MyDate2) inside the template in order to get the data.
$("#grid").kendoGrid({
dataSource: {
data: data
},
columns: [
{ field: "MyDate",
title: "My Date",
template: "#=kendo.toString(kendo.parseDate(new Date(MyDate)), 'dd/MM/yyyy HH:mm:ss')#" },
{ field: "MyDate2",
title: "My Date 2",
template: "#=kendo.toString(kendo.parseDate(new Date(MyDate2)), 'dd/MM/yyyy HH:mm:ss')#" }
]
});
I want to be able to define the template elsewhere:
var dateTemplate =
"#=kendo.toString(kendo.parseDate(new Date(?)), 'dd/MM/yyyy HH:mm:ss')#"
$("#grid").kendoGrid({
dataSource: {
data: data
},
columns: [
{ field: "MyDate",
title: "My Date",
template: dateTemplate },
{ field: "MyDate2",
title: "My Date 2",
template: dateTemplate }
]
});
So that I do not need to repeat the column's field name and can reuse templates.
What can I replace ? with in order to make this work?
Related
I have a kendo grid which is filled with some JSON data,
in the filter window in the grid, you can select a condition Type and then fill the condition value text box and then filter the grid based on your selection.
now I have a column that is filled with just four or five different value.
I want to make the condition value field of the filter section to become a drop-down list and instead of writing those values to select them, I want to choose them from the list. ( I mean in the filter section of the grid column, not in the column itself.)
I read an article which was like what I wanted, but it had added those values in the code,
I should notify you that those fields are not the same each time, so I can't write those value in the filter by hard coding.
even something like this one is very similar to what I wanted ( Filter Condition Created For 'City' Field ), but it's using a different source for getting the condition drop-down values, not grid column itself.
in addition, I can't use JSON data, I must use the information from the kendo grid.
thanks in advance.
I found the solution to my problem at last...
after binding the grid to the data source, by setting a loop on the data source of the grid, I take data of one column of the grid and push it to an array, then I set the filter on that column to the array.
<script type="text/javascript">
var arrayName = [];
$(function () {
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/products",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
},
parameterMap: function (options) {
return kendo.stringify(options);
}
},
schema: {
data: "Data",
total: "Total",
model: {
fields: {
"Id": { type: "number" },
"Name": { type: "string" },
"IsAvailable": { type: "boolean" },
"Price": { type: "number" }
}
}
},
error: function (e) {
alert(e.errorThrown);
},
sort: { field: "Id", dir: "desc" },
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
productsDataSource.read();
$("#report-grid").kendoGrid({
dataSource: productsDataSource,
dataBound:
function (e) {
var data = $("#report-grid").data("kendoGrid").dataSource._data;
for (i = 0; i < data.length; i++) {
arrayName.push(data[i].Name);
}
},
autoBind: false,
scrollable: false,
pageable: true,
sortable: true,
filterable: { extra: false },
reorderable: true,
columnMenu: true,
columns: [
{ field: "Id", title: "No", width: "130px" },
{ field: "Name", title: "ProductName", filterable: { ui: SystemFilter } },
{
field: "IsAvailable", title: "Available",
template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
},
{ field: "Price", title: "Price", format: "{0:c}" }
]
});
function SystemFilter(element) {
element.kendoDropDownList({
dataSource: arrayName,
optionLabel: "--Select Name--"
})
};
});
One way that I like to do this is to create a list of my values and add that list to ViewData, which then gets passed to the View.
public IEnumerable<ModelName> GetTypes()
{
//Get data from the table you store your values in.
return dbContext.TypesTable.OrderBy(f => f.Name);
}
public ActionResult YourView()
{
IEnumerable<ModelName> types = GetTypes();
ViewData["MyTypes"] = types;
return View();
}
Then in your grid add a ForeignKey column and set it to look at the ViewData you set earlier.
#(Html.Kendo().Grid<ViewModelName>()
.Name("GridName")
.Columns(columns =>
{
columns.ForeignKey(c => c.RecipientType, (System.Collections.IEnumerable)ViewData["MyTypes"], "TypeId", "Name");
})
)
This column will now display the Name of your value for the current records. Then when you go to edit or add a record, this field will display as a dropdown with all of the possible values.
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#\")'
How to get Kendo Grid to sort by a specific field if using k-data-source?
Here is my HTML:
Here is my Controller:
getBusinessUnits();
function getBusinessUnits() {
operatorService.getBusinessUnits()
.success(function (data) {
$scope.businessUnits = data;
});
};
$scope.gridOptions = {
batch: false,
reorderable: true,
sortable: true,
editable: "inline",
columns: [
{ template: '<i class="fa fa-chevron-circle-up" style="cursor:pointer" ng-click="MoveUp(#=OperatorBusinessUnitID#)"></i> <i class="fa fa-chevron-circle-down" style="cursor:pointer"></i>', title: "List Order" },
{ field: "OperatorBusinessUnitID", title: "Business Unit ID" },
{ field: "vchDescription", title: "Business Unit Name" },
{ field: "vchOperatorSystemID", title: "Operator System ID"},
{
command: [
{ name: "edit", text: " " },
{ name: "destroy", text: " " },
], title: "Action"
}
]
};
The data returned by the service from the SQL database is returned by the SQL stored procedure in the order that I need it. However, the grid automatically defaults to sorting it my the ID column. Is there any way to tell it which field to sort by default if I am not "creating" a datasource object in my Angular Controller?
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