Related
I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).
I have set the popup window's title in editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
and the Add button in the toolbar:
toolbar: [{name: 'create'}]
Notably, I've tried this to no avail:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.
I've looked all over the internet and Telerik and found nothing. Am I missing something?
EDIT: Someone asked for the entirety of my grid code:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
To change the title you should use edit function of the grid like this:
$("#grid").kendoGrid({
dataSource: {...},
height: 550,
toolbar: ["create"],
columns: [
{
field: "",
title: '',
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
},
{
command: [
{ name: "edit", text: 'Edit' },
],
title: 'tools',
width: "200px",
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
}
],
editable: {
mode: "popup",
template: $("#template").html(),
},
edit: function(e) {
if (e.model.isNew()) {
e.container.kendoWindow("title", "Createee");
} else {
e.container.kendoWindow("title", "Updateee");
}
}
});
And for using the template, see this answer : Kendo UI Grid popup
Edit:
According to kendo : Kendo Forum , isNew
The isNew method returns true or false depending on the id value of that model.
If the id is still set to the default value then it will assume it is a New Model.
So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
And here are two Samples: ( Sample 1 , Sample 2 )
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
ExtJS 5
I am using ExtJs 5 Grid. I have a button, when i click on it, age column will be hidden by using below line.
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
I am using listener - beforecellclick just to get the index of clicked column. But when i click on last column (last column = next to hidden column) it still show original index of column. Hidden column still getting their position in grid.
In CSS - If we use visibility: hidden then it hides the component or tag but still take space in web page but if use display: none, it hides as well as it doesn't take space in web page.
I want hidden column should not take space while getting indexing of current clicked column. (Without using CSS).
Can anyone help me to sort this out.
Ext.onReady(function () {
var studentStore = new Ext.data.JsonStore({
autoLoad: true,
pageSize: 10,
fields: ['Name', 'Age', 'Fee'],
data: {
items: [
{ "Name": 'Puneet', "Age": '25', "Fee": '1000' },
{ "Name": 'Ankit', "Age": '23', "Fee": '2000' },
{ "Name": 'Rahul', "Age": '24', "Fee": '3000' }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
var window = new Ext.Window({
id: 'grdWindow',
width: 400,
title: 'Grid Samples',
items: [
{
xtype: 'panel',
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'hide age column',
handler: function () {
Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false);
}
},
{
xtype: 'grid',
id: 'grdSample',
height: 300,
selModel: Ext.create('Ext.selection.CheckboxModel',
{
}),
store: studentStore,
columns: [
{
header: 'Name',
dataIndex: 'Name',
},
{
header: 'Age',
dataIndex: 'Age',
},
{
header: 'Fee',
dataIndex: 'Fee'
}
],
listeners:{
beforecellclick: function (el, td, cellIndex, record, tr, rowIndex, e, eOpts) {
debugger;
}
},
dockedItems:
[
{
xtype: 'pagingtoolbar',
store:studentStore,
dock:'bottom',
displayInfo:true
}
]
}
]
}
]
});
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{text: "Name", flex : 1, dataIndex: 'Name'},
{text: "Age", flex : 1, dataIndex: 'Age', id : 'colAge'},
{text: "Fee", flex : 1, dataIndex: 'Fee'}
],
listeners : {
'cellclick' : function (me, td, cellIndex, record, tr, rowIndex, e, eOpts ) {
me.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex)}} // here you get the correct value :)
});
Here is working Fiddle : http://jsfiddle.net/Xpe9V/1623/
Perhaps an overkill, but you could create an array of your columns
var columns= [{dataIndex: 'Name', header: 'Name'}, { dataIndex:'Age', header:
'Age' }, { dataIndex:'Fee', header: 'Fee'}]
2) then remove a column from array by index using javascript splice method
and reconfigure your grid
myGrid.reconfigure(myStore, columns);
below i have a kendoUI grid that fetches data from a server. The user can then edit two columns in the grid. I have a separate button that will post the data back to the server and i do not use the kendo grid's UPDATE transport for this. The problem i am having is that if i fetch the data from the grid, it does not reflect the user inputs. For example, to get to the underlying data for the grid i do the following:
products= $("#Grid").data("kendoGrid").dataSource.data()
But when i iterate over products and check the NewPrice or Comment property, it's always blank. Here is how the grid's data source is defined:
dataSource: {
transport: {
read: function (options) {
$.ajax({
url: "/Portal/API/GetProductPrices?id=" + pId,
dataType: "json",
success: function (data) {
localModel.userId = data.userId;
localModel.products = data.Products;
return options.success(model.products);
},
});
}
},
},
scrollable: false,
selectable: true,
schema: {
model: {
id: 'Id',
fields: {
Item: { type: 'string', editable: false },
Price: { type: 'number', editable: false },
NewPrice: { type: 'number', editable: true },
Comment: { type: 'string', editable: true, validation: { required: true } },
}
}
},
columns: [
{ field: "Price", title:"Price"},
{
field: "NewPrice", title: "<span class='editMode'>Proposed Value</span>", format: "{0:p}", attributes: { style: "text-align:center;" }, headerAttributes: { style: "text-align:center;" }, width: "50px",
template: "#=NewValueTemplate(data)#",
},
{ field: "Comment", title: "<span class='editMode viewWorkflowMode'>Notes</span>", width: "210px", template: "#=NotesTemplate(data)#" },
]
Any advice in resolving would be appreciated
You haven't specified the editing type that you are using.
Which type are you using: inline, batch or popup ?
Is only this the datasource ? I see no update function.
I suggest you take a look at the three demos.
Batch
Inline
Popup
The worst thing is that you haven't specified the value of the property editable.
By default it is false, that means the kendoGrid is not editable, even if you have specified editable: true over your model fields.
Shortcut to "Editable" configuration
update #2 :
As already said here
If the data source is bound to a remote service (via the transport option) the data method will return the service response.
So, when you use dataSource.data() method on your grid, if you haven't updated correctly your datasource, you should receive all "old" data. (I found strange that you get blank value over those properties, maybe a cache problem)
As I already said, your dataSource doens't provide no update function.
Here you are an example about the configuration of the update function in kendo dataSource, with request to remote service.
Suggest you to look on both examples:
Example - specify update as a string and Example - specify update as a function
Please implement the logic from the following example:
var _roleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, title: "Software Engineer" },
{ id: 2, title: "Quality Assurance Engineer" },
{ id: 3, title: "Team Lead" },
{ id: 4, title: "Manager" }
]
});
var _peopleDataSource = new kendo.data.DataSource({
data: [
{ id: 1, name: "John", roleId: 1, roleTitle: "Software Engineer" },
{ id: 2, name: "Dave", roleId: 2, roleTitle: "Quality Assurance Engineer" },
{ id: 3, name: "Aaron", roleId: 3, roleTitle: "Team Lead" },
{ id: 4, name: "Russell", roleId: 4, roleTitle: "Manager" }
]
});
var _grid = $("#grid").kendoGrid({
dataSource: _peopleDataSource,
columns: [
{
field: "name",
title: "Name"
},{
field: "roleTitle",
title: "Role",
editor: function(container, options) {
$("<input data-bind='value:roleTitle' />")
.attr("id", "ddl_roleTitle")
.appendTo(container)
.kendoDropDownList({
dataSource: _roleDataSource,
dataTextField: "title",
dataValueField: "title",
template: "<span data-id='${data.id}'>${data.title}</span>",
select: function(e) {
var id = e.item.find("span").attr("data-id");
var person =_grid.dataItem($(e.sender.element).closest("tr"));
person.roleId = id;
setTimeout(function() {
$("#log")
.prepend($("<div/>")
.text(
JSON.stringify(_grid.dataSource.data().toJSON())
).append("<br/><br/>")
);
});
}
});
}
}
],
editable: true
}).data("kendoGrid");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="grid"></div>
<br/>
<div id="log"></div>
You may view the demo here: http://jsfiddle.net/khNsE/175/
In this case, i needed to allow some rows based on data rules to enter 'edit mode' at the same time, so specifying inline, popup, etc was not an option. What i did instead was use a custom template function when defining the grid columns. the custom template function returned html, but in the html i used the data-bind attribute to bind to my model. Finally on the DataBound event of the grid, i bind my model to the rows.
field: "NewPrice", title: "New", format: "{0:p}", template: "#=newValueTemplate(d)#",
....
....
function newValueTemplate(d){
if (d.IsEditable)
return "<input type='number' data-bind='value:NewPrice' />"
else
return "<span />"
}
function gridDataBound(e){
var items = this.dataSource.view();
var gridRows = this.tbody.children();
for (var i = 0; i < items.length; i++)
kendo.bind(gridRows[i], items[i]);
}
i have a few items in Kendo Grid Toolbar.
Everything works fine excepts last item called "test".
Click event not firing defined action.
Question is: How to solve that to fire another AngularJS function in the same Controller?
toolbar: [
{ template: kendo.template($("#preparedViewsToolbar").html()) },
{ name: "create" },
{ name: "save" },
{ name: "cancel" },
{
name: "test",
text: "testme",
click: function(e){
console.log("TEST");
}
}
]
Thanks for any help and advice.
This is because Kendo UI does not understand the click property on a toolbar item. It is not supported [reference]. Instead, you should define a template for the toolbar item, and in that template you can bind your click function.
JSBin example
<div id="grid"></div>
<script id="template" type="text/x-kendo-template">
<a class="k-button" href="\#" onclick="return toolbar_click()">Command</a>
</script>
<script>
function toolbar_click() {
console.log("Toolbar command is clicked!");
return false;
}
$("#grid").kendoGrid({
toolbar: [
{ name: 'create' },
{ name: 'save' },
{ name: 'cancel' },
{ template: kendo.template($("#template").html()) }
],
columns: [
{ title: 'Name', field: "name" },
{ title: 'Age', field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
</script>
var tableDIV = $("<div id='grid'> </div>");
$("body").append(tableDIV);
//set toolbar options and custom events.
var toolBar = [
{
name: "Add",
text: "Add new record",
events:{
click:function(e){
alert($(this).text());
}
}
}
];
//initialize grid with toolbar options.
tableDIV = tableDIV.kendoGrid({
toolbar: toolBar,
columns: [
{ title: 'Name', field: "name" },
{ title: 'Age', field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
}).data("kendoGrid");
//now bind events here.
tableDIV.element.find(".k-header.k-grid-toolbar > a").each(function(i){
console.log(i,toolBar);
$(this).bind((toolBar[i].events != undefined ? toolBar[i].events : null));
});