I am adding a drop down (html select) element to the headerTemplate of the kendo grid like so:
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: false,
height: 430,
columns: [ {
field: "Date",
headerAttributes: { style: "visibility: hidden;" },
width:110
} ,
{ field: "PCASS00",
width: 100,
headerTemplate: '<select id="ddlFilters" name="ddlFilters"><option value="Category">Category</option><option value="Source">Source</option></select><br />PCASS00'},
{ field: "PPDIAZ9" },
{ field: "PPDIEUX" },
{ field: "POIU765" },
{ field: "P984655" },
{ field: "PBX5436" },
{ field: "PUGU7213" }
],
editable: true
});
The drop down displays, but it won't expand with the options when I click on it. Any ideas?
The problem is a collision between click event handled by navigatable set to true and the normal behavior of an HTML select.
Try setting navigatable to false (if possible).
Related
I have a kendo grid with custom buttons at the end of the row. This is done in the following way:
<div class="demo-section k-content" style="float: right">
<button id="textButton" style="margin: 5px;">Open WFR</button>
<button id="textButton_remind" style="margin-left: 5px;">Remind Me</button>
</div>
columns: [
{
field: "WFR", title: "WFR", filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains"
}
}
},
{ field: "Activity", title: "Activity" },
{ field: "Date", title: "Date" },
{ field: "Group", title: "Group" },
{ field: "MoreInfo", title: "More Information", hidden: true },
{ field: "Read", title: "Read", hidden: true },
{ template: '<button id="textButton" style="margin: 5px;">Open WFR</button>', title: 'View Event'}
$("#textButton").kendoButton();
The problem I am having is that, it is only changing the first button in the grid. so if I have 3 rows, only the first button is changing. When I create different IDs and implement them as a kendo button then it works. How can I dynamically assign an id to the <button id="textButton" to create individual buttons ($("#textButton").kendoButton();)
use a class instead of id
{ template: '<button class="textButton" style="margin: 5px;">Open WFR</button>', title: 'View Event'}
and do this instead
$(".textButton").kendoButton();
I suggest you use the dataBound event of your grid to convert them to buttons
$(..).kendoGrid({
dataBound: function(e) {
$('.textButton').kendoButton();
}
});
I do suggest this approach instead cleaner less taking effect on the whole DOM.
here is the dojo and the code https://dojo.telerik.com/EhUNUwOr
<div id="my-grid"></div>
<script>
$('#my-grid').kendoGrid({
columns: [
{
field: 'firstName',
title: 'First Name'
},
{
template: '<button class="grid-text-button">A</button><button class="grid-text-button">B</button>',
title: 'Actions'
}
],
dataSource: [
{
id: 1,
firstName: 'David'
},
{
id: 2,
firstName: 'Chuck'
}
],
dataBound: function(e) {
var $rows = e.sender.items();
$rows.find('.grid-text-button').kendoButton();
}
});
</script>
I am using ExtJS 5.0.1. I have a grid which does not autoLoad. Once the store is manually loaded by using the click button in TopBar, the grid receives records.
I am trying to implement infinite scroll on this grid. My store has extra params that need to be passed to the backend in order to get the records. After the first page is loaded, for the second page, no extra params are passed to the backend. How can I correct this?
My store looks as follows ->
Ext.define('MyStore', {
// extend: 'Ext.data.BufferedStore',
extend: 'Ext.data.Store',
model : 'MyModel',
remoteSort: true,
buffered: true,
leadingBufferZone: 10,
trailingBufferZone: 10,
pageSize: 100,
proxy: {
type : 'rest',
format: 'json',
url : '/myApp/list',
extraParams: {
fromDate: '',
toDate: ''
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'totalCount'
}
}
});
My Grid looks as follows-->
Ext.define('MyGridl', {
extend: 'Ext.grid.Panel',
requires: [
'MyStore'
],
layout: 'fit',
loadMask: true,
viewConfig: {
preserveScrollOnRefresh: true
},
initComponent: function() {
this.id = 'myGrid';
this.store = new MyStore();
this.callParent(arguments);
},
overflowY: 'auto',
frame: true,
columns: [{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
text: 'Column1',
dataIndex: 'Col1',
flex: 1
},{
text: 'Column2',
dataIndex: 'Col2',
flex: 1
}
],
plugins: [
{
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10,
scrollToLoadBuffer: 10
}
],
tbar: {
items: [{
xtype : 'datefield',
id : 'fromDate',
emptyText: 'Enter From Date',
listeners : {
render : function(datefield) {
datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
}
}
},{
xtype : 'datefield',
id : 'toDate',
emptyText: 'Enter To Date',
listeners : {
render : function(datefield) {
datefield.setValue(new Date());
}
}
},{
xtype: 'button',
text: 'Filter by Date',
style: {
marginLeft: '15px'
},
scope: this,
handler: function(me){
var store = Ext.getStore('myStore'),
fromDay = me.up().down('#fromDate').getValue(),
toDay = me.up().down('#toDate').getValue();
store.removeAll();
store.load({
params:{
fromDate: fromDay,
toDate: toDay
}
});
}
}
]
}
});
I fixed this issue by adding
store.removeAll();
store.currentPage = 1;
store.getProxy().setExtraParam("fromDate", fromDay);
store.getProxy().setExtraParam("toDate", toDay);
store.load();
I wan't to detect 'pinch' event on a Extjs 5 Panel, if I load the panel content using loader property it's working, but if I put an item (Iframe) in the panel, it doesn't work
Panel with an item (IFrame):
Ext.create('Ext.panel.Panel', {
layout: 'fit',
autoScroll: true,
items: [
Ext.create('Ext.ux.IFrame', {
autoScroll: true,
src: 'resources/docs/doc1.html',
cls: 'iframeStyle'
})
],
listeners: {
pinch: function (event) {
alert('pinch event');
},
element: 'body'
}
})
Panel that the content was loaded using loader property
Ext.create('Ext.panel.Panel', {
layout: 'fit',
loader: {
url: 'resources/docs/doc1.html',
autoLoad: true
},
listeners: {
pinch: function (event) {
alert('pinch event');
},
element: 'body'
}
})
Can you explain me the difference, and why with an IFrame it doesn't work??
Thank you
When I edit a cell in my grid, a zero ("0") is placed in the cell, overlapping the cell value. This zero does not show when the grid loads, and it does not save to the database when the update happens. If I navigate away and come back, the zero is gone. It only happens if I edit the cell; if I only click in the cell and initiate the inline editing, no zero appears. This happens in every cell, even the dates.
My page is an SPA.
This is the code that builds the grid:
function fnLoadStorageVaults(storageid) {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: URL_GETVAULTS,
dataType: "json",
type: "GET",
data: { StorageID: storageid }
},
update: { dataType: "json", url: URL_UPDATEVAULTS, type: "POST" },
destroy: { url: URL_DELETEVAULT, type: "POST" },
create: { url: URL_INSERTVAULT, type: "POST" },
parameterMap: function (data, type) {
return kendo.stringify(data);
}
},
autoSync: true,
schema: {
model: {
id: "StorageVaultID",
fields: {
VaultNumber: { type: "string", editable: true },
Section: { type: "string", editable: true },
Row: { type: "string", editable: true },
DateFrom: { type: "date", editable: true },
DateTo: { type: "date", editable: true },
WarehouseID: { type: "number", editable: true }
}
}
}
});
$("#VaultGrid").kendoGrid({
dataSource: ds
, sortable: true
, editable: true
, navigable: true
, columns: [
{ field: "WarehouseID", title: "Warehouse", width: "60px" }
,{ field: "VaultNumber", title: "Vault Nbr.", width: "60px" }
, { field: "Section", title: "Section" }
, { field: "Row", title: "Row" }
, { field: "DateFrom", title: "Date In" }
, { field: "DateTo", title: "Date Out" }
]
});
}
My apologies, the update was not working after all. The zero was the response from the server. Still curious behavior though.
i have a js view that contain button when i click this button i want to open another view
and it connot work
this is my first view
Ext.define('Ext4Example.view.login.WestMenu', {
extend: 'Ext.panel.Panel',
alias: 'widget.westmenu',
frame:'true',
initComponent: function() {
Ext.apply(this, {
title: 'Writeup',
animCollapse: true,
width: 200,
minWidth: 150,
maxWidth: 400,
iconCls:'logo',
split: true,
collapsible: true,
items: [
{
xtype : 'button',
text:'Ajouter réunion',
action:'meet',
iconCls:'add',
name:'meet',
width:120,
height:30,
x:20,
y:30
}]
});
this.callParent(arguments);
}
});
and this is my second view
Ext.define('Ext4Example.view.login.create-rd', {
extend: 'Ext.window.Window',
alias: 'widget.test',
frame:'true',
initComponent: function() {
var win= Ext.create('Ext.window.Window', {
title: 'Ajouter réunion',
width : 630,
height: 600,
layout: 'fit',
iconCls:'add',
items: [{
xtype: 'form',
id : 'form-widgets',
},
items: [
{
fieldLabel: 'date',
xtype : 'datefield',
name : 'date'
}
],
}
]
}).show();
}
});
and this is my controller
Ext.define('Ext4Example.controller.Login', {
extend: 'Ext.app.Controller',
refs: [{
ref: 'Home',
selector: 'home'
},
{
ref: 'Login',
selector: 'login'
}
],
stores: ['Login'],
models: ['Login'],
views: ['login.LoginForm','login.HomePage','login.CenterPanel','login.WestMenu','login.create-rd'],
init: function() {
this.control({
'login button[action=reset]': {
'click' : function(button, event, opt) {
var form = button.up('form');
form.getForm().reset();
}
},
'login button[action=connect]': {
'click' :this.connect
},
'login button[action=meet]': {
'click' :this.meet
}
});
},
connect:function()
{
this.getLogin().close();
var view1 = Ext.widget('home');
},
meet:function()
{
this.getHome().close();
var view2 = Ext.widget('test');
}
});
please any one have a solution of this
You have nothing that matches login. The selector login button[action=reset] means "Find a button xtype, with an attribute action, with a value reset, that exists as a child item under a container with xtype login".
It's the last past of your selector that's not satisfied.
Change the selector to:
westmenu button[action=reset]