I am trying to change the title of the kendo grid.
However when i do the below on change event the filtering doesn't work for that column.
I have a sample code here to replicate the issue in jsfiddle: http://jsfiddle.net/nLn5b/4/
$("#change").on("click", function() {
$("#grid th[data-field=FirstName]").html("<a tabindex='-1' class='k-grid-filter' href='#'><span class='k-icon k-filter'></span></a>MiddleName")
})
var grid = $("#grid").kendoGrid({
dataSource: {
data : createRandomData(10),
pageSize: 5,
schema : {
model: {
fields: {
Id : { type: 'number' },
FirstName: { type: 'string' },
LastName : { type: 'string' },
City : { type: 'string' }
}
}
}
},
editable : false,
pageable : true,
filterable: true,
columns : [
{ field: "FirstName", width: 90, title: "First Name" },
{ field: "LastName", width: 90, title: "Last Name" },
{ field: "City", width: 100 }
]
}).data("kendoGrid");
Thanks for any help.
Why do you want to change the title in runtime instead of while creating it? Anyhow, you can do it using:
$("#change").on("click", function() {
$("#grid th[data-field=FirstName]").contents().last().replaceWith("MiddleName");
});
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/nLn5b/5/
I believe it is more clear this way:
$("#grid th[data-field=FirstName]").html("MiddleName");
Related
I have data and showing in kendo grid with group. Every group (Invoice No - VGBEL ) has a groupFooterTemplate but Quantity (LFIMG) column always 0,00. I need sum of Quantity every footer. Where is my mistake ? I searched on the internet but didnt find solution. I know there is a little mistake but I didnt find it.
This my JS code.
var kendoResource = getKendoResourceOptions();
options.columns[0].groupFooterTemplate = 'Sipariş Toplamı:';
options.columns[8].groupFooterTemplate = '#: data.LFIMG ? kendo.format("{0:C2}",data.LFIMG.sum): 0,00 #';
$("#grid").kendoGrid({
toolbar: [{ name: "excel", text: kendoResource.toolbar.messages.excel }],
excel: {
fileName: "DeliveryList.xlsx",
allPages: true,
filterable: true
},
groupable: kendoResource.groupable,
scrollable: true,
sortable: true,
pageable: kendoResource.pageable,
columns: options.columns
});
self.filterClick = function () {
showLoading();
mbisPost('Reports.Summary', "/api/TermoTeknikReportApi/DeliveryList", ko.toJS(self.filters), function (result) {
if (result && result.length > 0) {
self.showNoDataToDisplay(false);
var dataSource = new kendo.data.DataSource({
data: result,
pageSize: 100,
group: {
field: "VGBEL",
},
aggregate: [
{ field: "LFIMG", aggregate: "sum" }
]
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
// element for which the tooltip is shown
grid.thead.kendoTooltip({
filter: "th",
content: function (e) {
var target = e.target;
return $(target).text();
}
});
}
else {
self.showNoDataToDisplay(true);
}
}).error(function () { hideLoading(); }).done(function () { hideLoading(); });
}
Screenshot of webpage
I changed dataSource code. put the "aggregates" properties into the group
var dataSource = new kendo.data.DataSource({
data: result,
pageSize: 100,
group: {
field: "VGBEL",
aggregates: [ { field: "LFIMG", aggregate: "sum" },{ field: "LFIMG_M", aggregate: "sum" }] // this line
},
aggregate: [
{ field: "LFIMG", aggregate: "sum" },{ field: "LFIMG_M", aggregate: "sum" }
]
});
I wish to create a grid that each row has grid inside it.
Both grids need to be editable and I managed to do so. However, when I try to add a new row to the outer grid, all the data inside it gone.
You can find the demo here: http://dojo.telerik.com/UqURE
Can you please help with this issue?
Thanks!
var outerDataSource= new kendo.data.DataSource({
schema: {
model: {
field1: { type: "string", validation: { required: true } },
field2: { type: "boolean", validation: { required: true } },
field3: { type: "string", validation: { required: true } }
}
}
});
$("#outerGrid").kendoGrid({
dataSource: outerDataSource,
detailInit: onExpansion,
toolbar: ["create"],
columns: [
{ field: "field1", title: "field1" },
{ field: "field2", title: "field2" },
{ field: "field3", title: "field3" },
{ command: ["destroy"], title: " " }],
editable: true
});
function onExpansion(e) {
var insideDataSource= new kendo.data.DataSource({
schema: {
model: {
in1: { type: "string", validation: { required: true } },
in2: { type: "string", validation: { required: true } }
}
},
data: [{
in1: "Click to edit",
in2: "Click to edit"
}]
});
var headers = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: insideDataSource,
width: 90,
toolbar: ["create"],
editable: true,
columns: [
{ field: "in1" },
{ field: "in2" },
{ command: ["destroy"], title: " " }]
});
};
Answer from Telerik:
Please note that operations like paging, sorting, filtering and
editing cause the Grid to rebind and reevaluate all templates inside
it (including the details). That why in order to preserve the child
Grid data between rebinds you should either save it to remove service
(link to documentation here) or add it as navigation property
collection to the parent Grid model (demo is available here).
http://www.telerik.com/forums/hirarchialy-editable-grids
I am trying to make a cell in a jqxGrid editable depending on the value of another column in the row (with the name Editable).
{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
editable: function (index, datafield, value, defaultvalue, column, rowdata) {
return rowdata.Editable;
}
},
This does not work. The cell is always editable regardless of the value of rowdata.Editable.
Replacing return rowData.Editable; with return false; does not work either.
I am using jqWidgets 3.9.0 in combination with JQuery 1.7.1.
Can anybody explain why this does not work and how to get it to work?
I got this to work by doing the following:
Replacing the url in the data source with localdata which references a local array called "data".
This array is filled using the original source url.
var data = [{}];
var source =
{
datatype: "json",
datafields: [
{ name: 'Id', type: 'number' },
{ name: 'Name', type: 'string' },
{ name: 'Percentage', type: 'string' },
{ name: 'Editable', type: 'bool' }
],
localdata: data
}
Using the cellbeginedit property instead of the editable property when defining the columns in the jqxGrid:
var dataAdapter = new $.jqx.dataAdapter(source);
$("#myGrid").jqxGrid(
{
width: 800,
source: dataAdapter,
editable: true,
editmode: 'click',
selectionmode: 'singlecell',
columns: [
{ text: "Id", datafield: "Id", columntype: 'textbox', editable: false, hidden: true },
{ text: "Name", datafield: "Name", columntype: 'textbox', width: 400, editable: false },
{ text: "Percentage", datafield: "Percentage", columntype: 'numberinput', width: 100, cellsformat: 'p2',
cellbeginedit: function (row) {
return data[row].Editable;
}
},
]
});
I was using the cellclick to do this kind of control.
$("#jqxGrid").on('cellclick', function (event) {
var args = event.args;
var datafield = event.args.datafield;
var rowIndex = args.rowindex;
var data = $('#jqxGrid').jqxGrid('getrowdata', rowIndex);
if(datafield == 'assign'){
if(data.assign){
$('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', true);
}else{
$('#jqxGrid').jqxGrid('setcolumnproperty', 'datafield', 'editable', false);
}
}
});
I am trying to add a kendo checkbox column. I have done this successfully in another grid. However, when I tried to do the same thing in another grid, I am getting a "IsSimple is undefined" error, where IsSimple is a simple boolean model field.
Model for my kendo data source:
schema: {
data: function (data) { //specify the array that contains the data
console.log("DATA RETURN TEST");
console.log(data);
return data || [];
},
model: {
id: "Id",
fields: {
Id: { editable: false,
nullable: false,
type: "number"
},
DesignatorName: { type: "string" },
TXFreq: { type: "string" },
RXFreq: { type: "string" },
IsSpecial: { type: "bool" },
IsCommand: { type: "bool" },
}
}
Here is my column definition for my kendoGrid.
$("#DesignatorFreqGrid").kendoGrid({
dataSource: DesignatorDS,
columns: [
{ field: "DesignatorName", title: "Frequency", format: "{0:c}", width: "120px" },
{ field: "TXFreq", editor: TXFreqEditor, title: "TX Frequency", format: "{0:c}", width: "120px" },
{ field: "RXFreq", editor: TXFreqEditor, title: "RX Frequency", format: "{0:c}", width: "120px" },
{ field: "IsSpecial", template: '<input type="checkbox" #= IsSpecial ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Special", format: "{0:c}", width: "120px" },
{ field: "IsCommand", template: '<input type="checkbox" #= IsCommand ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Command", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
Here is my JSON object:
"other fields........DesignatorName: "11"
EQUIPMENT: ObjectId: 2
IsCommand: true
IsSpecial: true
RXFreq: "55"
TXFreq: "22"
As you can see, IsSpecial is defined. The binding works when I load data into the grid. The checkboxes are indeed checked. But if I try to add a new record with the "Add New Record" button in the grid, I will get the error "Uncaught ReferenceError: IsSpecial is not defined".
If I change the binding to this.IsSpecial, I don't get the error anymore, and can add a new row to my database, but then the binding won't work and the boxes aren't checked when loading the grid,
It seems like it should work, and I do not know where else to look. Any ideas? Thanks.
You need to use boolean, instead of bool.
IsSpecial: { type: "boolean" },
IsCommand: { type: "boolean" }
$('#usersGrid').kendoGrid({
columns: [
{ field: "UserName", title: "Display name", width: "140px" },
{ field: "Unit", title: "Unit", width: "140px" },
{ field: "Email", title: "E-mail", width: "140px" },
{ field: "Indienst", title: "Indienst", width: "140px" },
{ field: "Uitdienst", title: "Uitdienst", width: "140px" },
{ field: "Roles", title: "Roles" },
{ command: { text: "edit", click: openEdit } }
],
editable: {
update: true,
create: true
},
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Administration/GetUserList",
dataType: "json",
data: {
indienst: function () {
return indienst;
}
},
success: function (data) {
$("#usersGrid").data('kendoGrid').dataSource.data(data);
}
});
},
update: function (options) {
alert('not firing');
}
}
},
schema: {
model: {
id: "UserId",
fields: {
UserId: { editable: false, type: "int" },
UserName: { type: "string" },
Unit: { editable: false, type: "string" },
Email: { type: "string" },
Indienst: { type: "string" },
Uitdienst: { type: "string" },
Roles: { editable: false, type: "string" }
}
}
}
});
This is my kendo UI grid. It's reading fine, but the problem is that it wont fire the datasource.transport.update call when I change a grid cell inline. Why won't it?
I've made sure I specified an id column and that the transport CRUD functions are all of the same type (functions here, not urls), but I've tried to have it work with urls as well. Only transport.read will fire...
when I check the console logs there are no errors given.
So I want to edit it inline. Click on a cell on the grid, and change the value, when u leave focus of the cell I want dataSource.transport.update() to run, or any function at all.
http://jsfiddle.net/8tzgc/135/
Edit:
After doing some research on the docs I've found out about the change() event. By checking what kind of change event it is we can figure out if its an update event and run the function we want ourselves. Here's my updated jsfiddle:
http://jsfiddle.net/8tzgc/140/
If anyone figures out a way that does not require calling the update function yourself, then I'm all ears.
To edit inline, you can just leverage the example from the telerik demo site.
Change your command column to:
{ command: ["edit", "destroy"], title: " ", width: "160px" }
And change your editable specification to "inline":
editable: "inline",
I have edited your fiddle with the solution: http://jsfiddle.net/8tzgc/136/
In order to fully flesh this out, you would have to provide implementation for the associated methods from the command, such as update, create, etc... You can see those examples in the telerik demo.
If you would like to do cell-click editing with custom editors (dropdowns, etc), here is another telerik example.
There is also this example of batch editing.
try to change
command: { text: "edit", click: openEdit }
to
command: ["edit"]
If you are using editable:popup then try the following:
command: [
{ name: "view", template: "<a class='k-button k-button-icontext selectDiscountPercentage' title='Discount Percentage' ><i class='k-icon k-i-view'></i></a>", text: "", },
{ name: "edit", text: "" },
{ name: "destroy", text: " "}
], title: " ", width: "160px"
The trick here is to give empty space(" ") to the text key inside command array