I have a grid looks like this:
<div id="grid" data-bind="kendoGrid: {
data: dataSource,
groupable: false,
scrollable: true,
pageable: { pageSize: 10 },
sortable: {
mode: 'multiple',
allowUnsort: true},
toolbar: [{ name:'create', text:'' }],
...
</div>
How can I change the text of the 'Update' and 'Cancel' button?
Thanks for any idea.
Do you have a command column in your Grid with an Edit and Delete button? If so, you should define there the text for update and cancel. Something like:
toolbar: [
{ name:'create', text : 'Crear' }
],
columns : [
{
command: [
{
name: "edit",
text: { edit: "Editar", update: "Actualizar", cancel: "Cancelar"}
},
{ name: "destroy", text: "Borrar" }
]
},
...
]
Check it here: http://jsfiddle.net/OnaBai/kqNRy/
If not, you can do the trick of defining it as before and then configuring this column as hidden:
toolbar: [
{ name:'create', text : 'Crear' }
],
columns : [
{
command: [
{
name: "edit",
text: { edit: "Editar", update: "Actualizar", cancel: "Cancelar"}
}
],
hidden: true
},
...
]
Check it here: http://jsfiddle.net/OnaBai/kqNRy/1/
Related
I am using KTDatatable. it works like a charm in desktop view. but when I view the table on the mobile screen, only first two-column is being shown. Code:
<div class="kt-datatable"></div>
<script>
function listing(){
$('.kt-datatable').KTDatatable({
translate: {
records: {
processing: '{{"Please wait"|__}}...',
noRecords: '{{"No records found"|__}}'
},
toolbar: {
pagination: {
items: {
default: {
first: '{{"First"|__}}',
prev: '{{"Previous"|__}}',
next: '{{"Next"|__}}',
last: '{{"Last"|__}}',
more: '{{"More pages"|__}}',
input: '{{"Page number"|__}}',
select: '{{"Select page size"|__}}'
},
info: "{{"Displaying"|__}} {{ '{{' }}start{{ '}}' }} - {{ '{{' }}end{{ '}}' }} {{"of"|__}} {{total}} {{"records"|__}}"
}
}
}
},
// layout definition
layout: {
scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
},
// column sorting
sortable: true,
pagination: true,
search: {
input: $('#generalSearch'),
delay: 400,
},
data: {
type: 'remote',
source: {
read: {
url: '{{url("api/dashboardpayments")}}'
},
},
pageSize: 10, // display 20 records per page
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
// columns definition
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100
},
{
field: "amount",
title: "{{'Amount'|__}}",
sortable: false,
width: 'auto',
},
{
field: "trxId",
title: "{{'trxId'|__}}",
sortable: false,
width: 'auto'
},
{
field: "for",
title: "{{'Service'|__}}",
sortable: false,
width: 'auto'
},
{
field: "created_at_date",
title: "{{'Date'|__}}",
sortable: false,
width: 'auto',
},
{
field: "Actions",
width: 100,
title: "{{'Actions'|__}}",
sortable: false,
overflow: 'visible',
template: function (data) {
var output = '' +
'<div class="btn-group btn-group">'+
'<a href="javascript:;" data-id='+data.id+' class="btn btn-brand btn-sm btn-icon confirmPayment" data-skin="dark" data-toggle="kt-tooltip" data-placement="top" title="{{"OK"|__}}"><i class="fa fa-check"></i></button>';
'</div>';
return output;
},
}
]
});
$('body').tooltip({selector: '[data-toggle="kt-tooltip"]'});
}
</script>
I am trying a lot of possible ways of custom CSS. But no luck. Any idea?
To make this work you can add the following:
rows: {
autoHide: false
},
AND
// layout definition
layout: {
scroll: true, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
header: true,
},
I just put autoHide:false in a column definition. i.e:
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100,
autoHide: false
}
]
I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO
I have a requirement in which I have to show two dropdown list in the Filterable cell of kendo grid. These two dropdown lists would filter two different columns in the kendo grid.
One thought I had is having template which would be some kendo container like some panel probably, and then add two dropdowns to that container.
Is this even possible? If yes how to achieve this?
Here is my kendo grid definition.
ctrl.mainGridOptions = {
dataSource: ctrl.gridDataSource,
columns: [
{
title: 'Col1-Col2',
field: 'Col1',
width: 200,
template: kendo.template($("#col1").html()),
filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
},
{
field: 'Col3',
width: 150,
title: 'Col3',
template: kendo.template($("#col3").html()),
filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
}
]
}
Here is a mockup of what I want to achieve.
There are a few different parts to this.
First, if you want to have multiple filter controls for different pieces of data, you should define a column for each one. Then, put a template on the first column to have it display the data for two columns. Use the attributes option to set a colspan=2. Then, use the attributes option on the second columns to set style="display:none".
The second part is getting the dropdowns. I generally prefer to use the values option to accomplish this. The code below uses this for the OrderID column. The other alternative was the approach you were on, which is to use the cell template. The code below uses this on the ShipName column.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "string" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns: [
{
field: "OrderID",
width: 150,
attributes: {
colspan: 2
},
values: [
{text: "10248", value: "one"},
{text:"10249", value: "two"}
],
template: '#:OrderID# (#:ShipName#)',
filterable: {
cell: {
operator: "eq",
showOperators: false
}
}
},
{
attributes: {
style: "display:none"
},
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
template: function(args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "ShipName",
dataValueField: "ShipName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
}
}
},
{
field: "Freight",
width: 255,
filterable: false
}]
});
});
</script>
</div>
Runnable Demo
Kendo Grid filterable cell with custom options column wise and by using this solution it also overwrites general filters settings in case specific column requirement. ASP.NET MVC C#.
columns.Bound(c => c.columnName)
.Format("{0}%")
.Filterable(ftb => ftb
.Cell(cell => cell.ShowOperators(true))
.Extra(false)
.Operators(op => op
.ForNumber(fn => fn
.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)
)
)
.Title("Column Name");
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 am very much new to kendo grid, so please consider my question and help me.
i have a coldfusion page which has an array variable that contains all the user records retrieved from database.
now i have a function, for pagination.
i want to enable server side paging in this, but actually have no idea on how to do this.
please help.
$(document).ready(function(){
$("#data_table3").kendoGrid({
dataSource: {
pageSize: 10
},
pageable: {
refresh: true,
pageSizes: true
},
columns: [ {
field: "UserName",
width: 90,
title: "User Name"
} ,
{
field: "FirstName",
width: 90,
title: "First Name"
}
],
height: 460,
sortable: true
});
$("#data_table").show();
});
Hi try like this ,
$("#appointmentsGrid").kendoGrid({
columns: [
{ field: "MemberFirstName", title: "Member<br/>First Name" },
{ field: "MemberLastName", title: "Member<br/>Last Name" }
],
dataSource: new kendo.data.DataSource({
serverPaging: true,
serverSorting: true,
transport: {
read: {
url: "/Content/GetCustomerNameWithId",
data: additionalData
}
},
pageSize: 10,
schema: { data: "data", total: "total" }
}),
pageable: true,
sortable : true
});