Before version 2016.3.914, it was possible to cancel a drop event by calling e.setStatusClass("k-denied");
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "foo", items: [
{ text: "bar" }
] }
],
drag: function(e) {
e.setStatusClass("k-denied");
}
});
However, starting from version 2016.3.914, the pre-defined status classe k-denied doesn't work anymore. The documentation says that k-i- should be added as class prefix but k-i-denied doesn't work as the cancel icon doesn't appear and the drop is still allowed.
Please note that from version 2016.3.914 the naming convention for pre-defined status classes is k-i-className.
Note that status classes are returned without the k- prefix by
e.statusClass, but this prefix is required when setting a predefined
status class via e.setStatusClass. A prefix is not required if setting
a custom status CSS class.
The documentation was right about one thing. We do have to use the k-i- prefix. However, what the documentation doesn't tell you is the fact that kendo has changed the pre-defined status classes from k-denied to k-i-cancel
$("#treeview").kendoTreeView({
dragAndDrop: true,
dataSource: [
{ text: "foo", items: [
{ text: "bar" }
] }
],
drag: function(e) {
e.setStatusClass("k-i-cancel");
}
});
Related
I'm following a tutorial, but I would like to hide or remove this search box.
I've looked through the Internet and seems I haven't found a solution yet.
I want to get rid of these two search boxes:
My Code is like this:
Vue.use(VueTables.client, {
compileTemplates: true,
filterByColumn: true,
sortable: false,
texts: {
filter: "Search:"
},
datepickerOptions: {
showDropdowns: true
},
---
});
Is there any filterByColumn option to hide these two boxes?
Full code is here: https://jsfiddle.net/e0uLphvk/
Here is an updated jsfiddle.
Basically, you need to add the columns you want to filter to options.filterable array in your Vue data.
new Vue({
// ..
data: {
// ..
options: {
//...
filterable: ['manufacturer', 'birth_date'],
}
}
})
Ok I'm pretty sure I know exactly what I need to do here but I'm not sure how to do it. Basically I have a grid that I want to make a key column bind to an array of key/values, which I've done before with kendo (not using Angular) and I know that when I'm creating my key/value array asynchronously then that needs to complete before I can get them show-up with kendo, which I have done using promises before.
So here I have the same issue only angular is also involved. I need to fetch and format an array of data into the format in which a kendo grid column can digest it, so no problem here is my controller code:
var realm = kendo.data.Model.define({
id: 'realmID',
fields: {
realmID: { editable: false, nullable: true }
realmType: { type: 'string', validation: { required: true } }
}
})
var ds1 = kendoHelpers.dataSourceFactory('realms', realm, 'realmID')
var realmType = kendo.data.Model.define({
id: 'realmTypeID',
fields: {
realmTypeID: { editable: false, nullable: true },
name: { type: 'string', validation: { required: true } }
}
})
var ds2 = kendoHelpers.dataSourceFactory('realms/types', realmType, 'realmTypeID')
$scope.mainGridOptions = {
dataSource: ds1,
editable: true,
navigatable: true,
autoBind:false,
toolbar: [
{ name: "create" },
{ name: 'save' },
{ name: 'cancel' }
],
columns: [
{ field: 'realmID', title: 'ID' }
{ field: 'realmTypeID', title: 'Realm Type', editor: realmTypesDDL, values: $scope.realmTypeValues },
{ command: "destroy" }
]
}
$scope.secondGridOptions = {
dataSource: ds2,
editable: true,
navigatable: true,
toolbar: [
{ name: "create" },
{ name: 'save' },
{ name: 'cancel' }
],
columns: [
{ field: 'realmTypeID', title: 'ID' },
{ field: 'name', title: 'Name' }
{ command: "destroy" }
]
}
ds2.fetch(function () {
$scope.realmTypeValues = [{ text: 'Test', value: "24bc2e62-f761-4e70-804c-bc36fdeced3d" }];
//this.data().map(function (v, i) {
// $scope.realmTypeValues.push({ text: v.name, value: v.realmTypeID})
//});
//$scope.mainGridOptions.ds1.read()
});
function realmTypesDDL(container, options) {
$('<input />')
.appendTo(container)
.kendoDropDownList({
dataSource: ds2,
dataTextField: 'name',
dataValueField: 'realmTypeID'
});
}
I made this dataSourceFatory helper method above to return me a basic CRUD kendo dataSource that uses transport and also injects an authorization header which is working fine so don't get hung up on that, ultimately I'm going to be using this data in another grid as well as for reference values for the main grid, but I've hard coded some values that I can use to test with in the ds2.fetch callback.
My HTML is pretty plain:
<div>
<h2>Realms</h2>
<kendo-grid options="mainGridOptions"></kendo-grid>
<h2>Realm Types</h2>
<kendo-grid options="secondGridOptions"></kendo-grid>
</div>
This all works fine and well except I am only seeing the GUID of the realmTypeID in the grid, I click it and the editor is populated correctly so that's good but I want the text value to be displayed instead of the GUID. I'm sure the issue is that the array of values is empty whenever angular is binding to the grid options. My questions are:
How do I either delay this bind operation or manually rebind it after the fetch call?
Is there a better way to handle a situation like this? I try not to expend finite resources for no reason (IE making server calls when unnecessary)
Note: When I move the creation of the text/value array to happen before the grid options, I get the desired behavior I am after
EDIT A work around is to not use the directive to create the grid and instead defer the grid creation until the callback of whatever data your column is dependent on, I was hoping for a more elegant solution but this is better than nothing. So your HTML becomes something like
<h2>Realms</h2>
<div id="realms"></div>
<h2>Realm Types</h2>
<kendo-grid options="secondGridOptions"></kendo-grid>
Then you can create the grid in the fetch callback for example:
ds2.fetch(function () {this.data().map(function (v, i) {
$scope.realmTypeValues.push({ text: v.name, value: v.realmTypeID})
});
$('#realms').kendoGrid($scope.mainGridOptions);
$scope.mainGridOptions.dataSource.fetch()
});
But this doesn't feel very angularish so I'm really hoping for a better solution!
Ok...well I think I hacked this enough and without another suggestion I'm going to go forward with this approach. I'm just going to move the binding logic to the requestEnd event of the second grid so that the values array can be populated right before the binding even. I'm also reworking the values array in this method. It is a bit weird though, I think there is some kendo black magic going on with this array because I can't just set it to a new empty array without it breaking completely...which is why I'm poping everything out prior to repopulating the array. That way when something is deleted or edited in the second grid, the DDL in the first grid is updated in the callback.
function requestEnd(e) {
for (var i = $scope.realmTypeValues.length; i >= 0; i--) $scope.realmTypeValues.pop();
var data;
if (e.type == "read")
data = e.response;
else
data = e.sender.data();
data.map(function (v, i) { $scope.realmTypeValues.push({ text: v.name, value: v.realmTypeID }); });
if ($('#realms').data('kendoGrid') == undefined) {
$('#realms').kendoGrid($scope.mainGridOptions);
}
else
$('#realms').data('kendoGrid').columns[4].values = $scope.realmTypeValues;
}
ds2.bind('requestEnd', requestEnd);
So I'm going to accept my own answer unless anyone has a better approach!
I have following config foo column in grid:
field:
actionName: {
editable: true,
nullable: true,
defaultValue: {"name" : "TEST123"},
type: "object"
},
Column:
{
field :"actionName",
title : $translate.instant('ACTIONNAME'),
width: "200px",
editor: GlobalHelperService.getActionNamesListForAutocomplete,
template: '#: data.actionName.name #',
filterable: { cell: { operator:"contains"
}
}
},
Which works almost fine, but if i clicked on cell item i always got following value (see. image below), instead of the text defined in template attribute.
How can i solve it please?
Many thanks for any advice.
It might not be the cleanest way, but you could use the edit event like I do in this blog post.
$("#grid").kendoGrid({
edit: onEdit
});
function onEdit(editEvent) {
// Ignore edits of existing rows.
if(!editEvent.model.isNew()) { return; }
editEvent.model.set("actionName", {name: "TEST123"});
}
Although as I note in that post, setting the default value with .set() might not work in this case, and you might need to edit the text in the edit box directly:
editEvent.container
.find("[name=actionName]")
.val("TEST123")
.trigger("change");
I try to create my own kind in enyo
enyo.kind(
{
name: "DeviceButton",
kind: "Button",
caption: "",
published: { userAgent: "" },
flex: 1,
onclick: "butclick",
butclick: function() { console.log("User agent changed to " + this.userAgent) }
})
But when I click there is nothing shown
If I just did
onclick: console.log("User agent changed to " + this.userAgent)
It was printed that this.userAgent is undefined
What am I doing wrong?
Btw., is it possible to send parameters via onclick (so that the function repsponding to the click get a variable)
Thanks
The problem you're having here is that the onclick property is actually giving the name of the event handler for the Enyo to send the event to when the click is received. The "butclick" event isn't dispatched to the DeviceButton, but rather to its parent.
If you want to handle the event entirely within your kind, then you need to set it up as a "handler". In Enyo 2.x, you do it like this:
enyo.kind(
{
name: "DeviceButton",
kind: "Button",
caption: "",
published: { userAgent: "" },
flex: 1,
handlers {
onclick: "butclick"
},
butclick: function() { console.log("User agent changed to " + this.userAgent) }
})
In Enyo 1.x, you'd just need to name the handler function "onclickHandler". I mention the Enyo 1 solution because I see that you have "flex: 1" in your definition. Flexbox isn't supported in Enyo 2, we have a "Fittable" system instead.
I made a little example for you how enyo can handle sending and receiving values to and from a custom kind. I also added some short comments inside the code.
http://jsfiddle.net/joopmicroop/K3azX/
enyo.kind({
name: 'App',
kind: enyo.Control,
components: [
{kind:'FittableRows', components:[
// calls the custom kind by it's default values
{kind:'DeviceButton',name:'bttn1', classes:'joop-btn',ontap:'printToTarget'},
// calls the custom kind and pass the variables to the DeviceButton kind
{kind:'DeviceButton', name:'bttn2', btnstring:'Get Agent', useragent:'chrome', classes:'joop-btn', ontap:'printToTarget'},
{tag:'div', name:'targetContainer', content:'no button clicked yet', classes:'joop-target'},
]},
],
printToTarget:function(inSender, inEvent){
// inSender = the button that was pressed
this.$.targetContainer.setContent(inSender.name+' has used the value: "'+inSender.getUseragent()+'" and sends the value of: "'+inSender.getValueToPrint()+'" back.');
},
});
enyo.kind({
name:'DeviceButton',
kind:enyo.Control,
components:[
{kind:'onyx.Button',name:'btn', ontap:'printUsrAgent'}
],
published:{
btnstring:'default btnstring', // value that will be received
useragent:'default useragent', // value that will be received
valueToPrint:'default valueToPrint' // value that will be used
},
rendered:function(){
this.inherited(arguments);
this.$.btn.setContent(this.btnstring);
},
printUsrAgent:function(inSender,inEvent){
// set a parameter with the value that was received of if not received use the default value (normaly would do some calculations with it first)
this.valueToPrint = this.useragent+' after changes';
},
});
How to remove check all option is extjs 4 checkboxmodel?
Regards
When defining a grid (in 4.2.1), set this config option to:
selModel: Ext.create('Ext.selection.CheckboxModel', { showHeaderCheckbox: false }),
(The relevant part is showHeaderCheckbox :false)
I have managed to hide it using pure CSS:
Code:
.x-column-header-checkbox {display:none;}
When you're creating your checkboxmodel, try specifying injectCheckbox: false into its configuration. From the API:
Instructs the SelectionModel whether or not to inject the checkbox header automatically or not. (Note: By not placing the checkbox in manually, the grid view will need to be rendered 2x on initial render.) Supported values are a Number index, false and the strings 'first' and 'last'.
Inside grid panel afterrender event using jquery
listeners: {
afterrender: function (grid) {
$('.x-column-header-checkbox').css('display','none');
}
}
According to API, the type of "header" property is String. Said that, the correct value is ''. It has worked for me on ExtJS 3.4
this.queueSelModel = new Ext.grid.CheckboxSelectionModel({
singleSelect : true, // or false, how you like
header : ''
});
heder:false in config or injectCheckBoxHeader = false hide the entire column. CSS solution is class based so any other widget using the same selection model would also hide the entire check.
In ExtJS 4 a header config can be provided as below to display a blank or custom text in the header.
getHeaderConfig: function() {
var me = this;
showCheck = false;
return {
isCheckerHd: showCheck,
text : ' ',
width: me.headerWidth,
sortable: false,
draggable: false,
resizable: false,
hideable: false,
menuDisabled: true,
dataIndex: '',
cls: showCheck ? Ext.baseCSSPrefix + 'column-header-checkbox ' : '',
renderer: Ext.Function.bind(me.renderer, me),
//me.renderEmpty : renders a blank header over a check box column
editRenderer: me.editRenderer || me.renderEmpty,
locked: me.hasLockedHeader()
};
},
I encountered this issue in ExtJS 4.0.7 version.
First I removed checkbox layout:
.rn-grid-without-selectall .x-column-header-checkbox .x-column-header-text
{
display: none !important;
}
Then I used the following code in afterrender listener of the grid:
afterrender: function (grid) {
this.columns[0].isCheckerHd = false;
}
It is not a good solution but it can be used as a starting point.
Thanks for all the good hints here.
For Sencha 3.4, this is the extremely simple pure CSS I ended up using,
My_Panel_With_a_Grid_Without_Header_CheckBox = Ext.extend(Ext.Panel, {....
cls: 'innerpanel hiddeGridCheckBoxOnSingleSelect',
....}
in my CCS file:
.hiddeGridCheckBoxOnSingleSelect .x-grid3-hd-checker {
visibility:hidden
}
Define {Header: false} in checkboxselectionModel
this.queueSelModel = new Ext.grid.CheckboxSelectionModel({
singleSelect : false,
header : false
});