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>
Related
function BindGrid(dData) {
$("#grid").kendoGrid({
dataSource:
{
data: dData,
schema: {
data: "Data",
total: "Total"
},
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
filterable: {
ui: function (element) {
element.kendoDatePicker({
format: "MMM dd, yyyy",
parseFormats: ["dd-MMMM-yyyy"]
});
}
},
sortable: true,
pageable: {
pageSize: 100,
pageSizes: [100, 200, 300, 400],
//messages: {
// itemsPerPage: "Products",
// display: "{0}-{1} from {2} Products",
// empty: "No data",
// allPages: "Show All"
//}
},
sortable: {
allowUnsort: false
},
columns: [
{ field: "Person", title: "#Html.LanguageLabel("Product.Person")", width: "180px" },
{ field: "DownloadedDate", title: "#Html.LanguageLabel("Product.DownloadedDate")", type: "date", width: "100px", template: "#= kendo.toString(kendo.parseDate(DownloadedDate), 'MMM dd, yyyy') #" },
{ field: "DownloadedTime", title: "#Html.LanguageLabel("Product.DownloadedTime")", width: "100px" },
{ field: "Company", title: "#Html.LanguageLabel("Product.Company")", width: "180px" },
{ field: "StateName", title: "#Html.LanguageLabel("State")", width: "150px" },
{ field: "PhoneNumber", title: "#Html.LanguageLabel("Product.PhoneNumber")", width: "120px" },
{ field: "EmailId", title: "#Html.LanguageLabel("Product.Email")", width: "250px" },
],
});
}
There is a known issue with Kendo Grid in which the date filtering does not ignore the timestamp (i.e. hours/minutes/seconds) and does not match the month/day/year only.
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'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 reviewed other answers to this question but none solve this problem. When using popup editor on the kendoGrid, cancel removes the row completely.
here's the code:
addWindow.element.find("#InventoryChecks").kendoGrid({
dataSource: {
data: checkCallDetail.InventoryChecks,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
BillOfLading: { type: "string" },
ReportedPieces: { type: "number" },
ReportedWeight: { type: "number" }
}
}
},
aggregate: [
{ field: "ReportedPieces", aggregate:"sum" },
{ field: "ReportedWeight", aggregate: "sum" }]
},
height: 200,
scrollable: true,
toolbar: ["create"],
columns: [
{ field: "BillOfLading", title: "BOL", width: "100px", footerTemplate: "Total: " },
{ field: "ReportedPieces", title: "Quantity", width: "70px", footerTemplate: " #= sum # " },
{ field: "ReportedWeight", title: "Weight", width: "70px", footerTemplate: " #= sum # " },
{ command: ["edit"], title: " "}
],
editable: {
mode: "popup",
}
})
Any suggestions?