I want to hide the kendoGrid column on RoleBase. There are 6 users of my system for Manager,ProductManager & Supplier I do not want to show the column and for other three I want column to be visible.
My column defination:
{ command: { text: "Upload", hidden: '#if(ManagerRoleAccess== true || ProductManagerRoleAccess== true || SupplierRoleAccess== true)' }
I do not know what went wrong in this, the column hidden for all users.. Any help?
You were very close: the commands don't have a hidden field, but they do have visible:
{ command: [{ name: "edit", visible: function(dataItem) { return dataItem.isSuperUser }}] }
Dojo: http://dojo.telerik.com/ozONeSEG
However, your Dojo uses Kendo 2016.3.1028 and this param doesn't work in that version yet. If I'm not mistaken, it was introduced in version 2017.1.118.
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'],
}
}
})
I'm using TinyMce Style Formats to add custom formats to the ""Formats" dropdown.
The problem is that I have too many styles to add, and I would like to use another "Formats" dropdown, separated from the first one. I know I can nest formats but it's not enough, I want to add two different Dropdown, how can I do it?
Have a look at the style plugin in tinymce3 (in tinymce4 it is part of the tinymce core). You may copy that plugin rename it and configure it to your needs. Then you need to add the plugin to your plugin list and the tinymce button to your button list.
This is best done adding formats to the formatter programmatically and then adding a menu item and trigger the formatter
editor.on( 'Init', function( e ) {
editor.formatter.register(
'page-title',
{ 'selector': 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li',wrapper: false, classes : ['giga', 'primary-font'] }
);
} );
editor.addButton( 'typography', {
text: 'Typography',
icon: false,
type: 'menubutton',
menu: [
{
text: 'Page Title',
menu: [
{
text: '(Giga) 88 Clan pro thin #000000',
onclick: function() {
editor.formatter.toggle( 'page-title' );
}
},
]
},
]
});
I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
The JavaScript part :
function openCustomWindow(e) {
e.preventDefault();
myWindow.center().open();
}
function editorWindowClosed(e) {
myGrid.cancelRow();
}
var myWindow = $("#custom-window").kendoWindow({
modal: true,
resizable: false,
title: "Test",
visible: false,
close: editorWindowClosed
}).data("kendoWindow");
var dummyDataSource = new kendo.data.DataSource(
{
schema : {
model : {
id: "id",
fields: {
postion: { type: "number"},
name: { type: "string"},
}
}
}
});
dummyDataSource.add({postion: 1, name: "gswin"});
var myGrid = $("#my-table-grid").kendoGrid({
dataSource: dummyDataSource,
toolbar: [ {
name: "create",
text: "Create"
} ],
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
},
columns: [
{
field: "postion",
title: "Postion"
},
{
field: "name",
title: "Name"
}
]
}).data("kendoGrid");
The error message in the JavaScript console :
Uncaught TypeError: Cannot read property 'uid' of
undefinedut.ui.DataBoundWidget.extend.cancelRow #
kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow #
kendo.all.min.js:29(anonymous function) #
kendo.all.min.js:29jQuery.event.dispatch #
jquery-2.1.3.js:4430jQuery.event.add.elemData.handle #
jquery-2.1.3.js:4116
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.
One of my colleague found the solution (thanks to him).
Actually this piece of code
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
}
is designed to configure the default popup...
The right way to use a custom popup is the following :
editable :true,
edit: openCustomWindow,
With this approach it's also better to use
function editorWindowClosed(e) {
myGrid.cancelChanges();
}
Instead of
function editorWindowClosed(e) {
myGrid.cancelRow();
}
Working jsfiddle link
Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
Doing this
editable: "popup",
edit: openCustomWindow
has fixed this other issue but is now displaying 2 popups.
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".
To prevent Kendo UI custom grid popup editor window, define the editable property:
editable:
{
mode: "popup",
window: {
animation: false,
open: updateRowEventHandler
}
} // skip edit property
Then paste preventDefault() at the beginning of the handler:
function updateRowEventHandler(e) {
e.preventDefault(); //
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 wanted to check if someone has tried any option where in we can add custom properties to Dojo Datagrid Column tag in xpages. I want to show a drop-down of column entries when user tries to filter the column. i can do this if I am creating grid programatically i.e. define layout and grid options in Javascript client-side library. But I am clueless about how to add 'autoComplete' attribute to column definition when using extension library controls. This is my CSJS code to create datagrid if it helps you. I am calling paintGrid function on onclientLoad event of xpage.
function paintGrid(store){
var layout = [
{ field: "AccessRequestFor", datatype:"string",autoComplete:true},
{ field: "UserName", datatype:"string",autoComplete:true},
{ field: "UserEmail", datatype:"string",autoComplete:true},
{ field: "UserAccess", datatype:"string",autoComplete:true},
{ field: "UserExtraAccess", datatype:"string",autoComplete:true},
{ field: "AccessRequestDate", datatype:"string",autoComplete:true},
{ field: "AccessRequestor", datatype:"string",autoComplete:true},
{ field: "RemedyRef", datatype:"string",autoComplete:true},
{ field: "Status", datatype:"string",autoComplete:true}
];
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
plugins: {
filter: {
// Show the closeFilterbarButton at the filter bar
closeFilterbarButton: true,
// Set the maximum rule count to 5
ruleCount: 5,
// Set the name of the items
itemsName: "Access Requests"
}
}
});
grid.placeAt('view:_id1:_id2:panel1');
grid.startup();
}
You first need to set the dojoType for the Dojo Data Grid to dojox.grid.EnhancedGrid. You can then add the dojoAttributes for the filter plugin like so:
<xe:djxDataGrid id="djxDataGrid1"
storeComponentId="restService1" autoHeight="10" jsId="gridObj"
dojoType="dojox.grid.EnhancedGrid">
<xe:this.dojoAttributes>
<xp:dojoAttribute name="autoWidth" value="true"></xp:dojoAttribute>
<xp:dojoAttribute name="plugins"
value="{filter: {
closeFilterbarButton: true,
ruleCount: 5
}}">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
For a description of how to create a Dojo Data Grid via the control, and how to enable the EnhancedGrid filter plugin see the recording of this webinar with Brad Balassaitis :
Dojo Data Grid with Brad Balassaitis - June 27, 2013