How to define visibility of Kendo Grid command - kendo-ui

I want to hide Edit command for some records. There is columns.command.visible configuration option for that (according to documentation). So I tried this:
{
command: [
{
name: "edit",
visible: function(dataItem) {
return false;
},
I expected Edit command would be hidden for all records. But it's not. Looks like this option doesn't work at all.
Probably it could be related to version of Kendo I use: 2014.1.318
Any thoughts?

Ok, that was old Kendo version. I used 2014.1.318. After upgrading to 2017.1.118 it works fine.

Related

Kendo UI multiselect flashing after removing item

I am using a kendo multi-select of version(2015.1.521). It is located in the lower side of the page. Widow size is increasing after selecting items. After removing some item from option using x icon, multi-select does not open. Is there any solution?
dojo
I have got a workaround where I am checking for active element.
Solution dojo
$("#required").kendoMultiSelect({
autoClose:false,
close: function (e) {
var activeElement = document.activeElement.getAttribute('aria-owns');
var currentId = this.tagList[0].id;
if (activeElement != undefined && activeElement != null && activeElement.includes(currentId)) {
e.preventDefault();
}
}
});
I was able to reproduce your problem. On the other hand, I wasn't able to reproduce it with a current version. That tells me, that it must have been a bug which has been fixed in the meantime.
The only way I found out which fixes the problem for me at 2015.1.521 is to refresh the Widget, once the problem occurred.
$("#required").data("kendoMultiSelect").refresh();
Now the question is, how do you know (programmatically) that you are in that error-state? Maybe you could refresh it on a regular basis. Until you upgrade to a newer version, it's going to be a workaround.

Select2 with ajax option

I have been using selec2 version 4 with ajax option.
And I want to set a selected value, as recommended in the guideline, by adding new Option element.
A problem I have is that I do not know when to add the new option because the event select2-loaded does not seem to exist in the latest version of select 2.
Can you please let me know in what way I can know the moment when data has finished loading from the server and has finished setting up, so I can add a new option to it?
Thank you.
The Option element you mention is created by calling the Option() constructor which then constructs a HTMLOptionElement. So basically you are just adding to your DOM and don't need to do it in any select2 event. Instead just do it on document load.
Here's a very basic example of what it could look like:
$(function () {
$('#element-to-select').select2();
var option = new Option('text', 'value', true, true);
$('#element-to-select').append(option).trigger('change');
}
Note that we are calling .trigger('change') to report the change to select2 as documented here.

customizing sort label of responsive p:dataTable [duplicate]

How can I change the language for Sorting on PF DataTable component with reflow = "true" (so responsive Datatable)?
The problem is that on mobile screen, we can sort data from auto-generated dropdown where we have our sort options, see picture bellow. How can I change the language for this dropdown?
I'm using PF 6.0.
The intended way to do this is to define the following properties in your resource files (see Messages.properties)
primefaces.datatable.SORT_LABEL = Sort
primefaces.datatable.SORT_ASC = Ascending
primefaces.datatable.SORT_DESC = Descending
You can see this when you look at the DatatableRender of primefaces.
Notice i18n is done in different ways in primefaces. Some components like calendar or schedule must be translated via javascript. See here
I never ran into this or used it, but I know the source is open. So I went to the javascript file for the datatable. There I searched for 'Ascending' and via this.ascMessage, I ended up on line 170 where 'datatable.sort.ASC' is used as a key.
This in turn points to line 619 in core.js
getAriaLabel: function(key) {
var ariaLocaleSettings = this.getLocaleSettings()['aria'];
return (ariaLocaleSettings&&ariaLocaleSettings[key]) ? ariaLocaleSettings[key] : PrimeFaces.locales['en_US']['aria'][key];
},
Where you can see the normal PrimeFaces locale functionality is used.
So using your own locale and overriding this part in it, like in the default locale
aria: {
'paginator.PAGE': 'Page {0}',
'calendar.BUTTON': 'Show Calendar',
'datatable.sort.ASC': 'activate to sort column ascending',
'datatable.sort.DESC': 'activate to sort column descending',
'columntoggler.CLOSE': 'Close'
}
Will solve your issue I would expect

jqGrid: how to show and edit text containing \<a

If column text contains characters like \<a only first character, \ is displayed in grid. Remaining characters are not visible.
In edit mode this data is displayed wrongly as
\<a< td=""></a<>
If \<a is entered to cell using inline editing and saved, only \ is visible in screen.
jqGrid setting autoencode: true is used.
Data is read from ASP .NET 2 MVC controller from server in json format like
{"total":337,"page":3,"records":10094,"rows":[
{"id":"i88","cell":["\\\u003ca"] }
]
}
How to show and edit text like \<a in jqGrid 4.1.1 ?
If I remember properly, it worked in earlier jqGrid versions. Maybe jqID function changes proposed by Oleg caused this regression.
I suppose, that you just forgot to use the jqGrid option autoencode: true . If I use it I could reproduce the problem which you describe: see the demo and this one.
UPDATED: Your current test case can be reduced to the following demo which has formatter:null in the colModel. If you remove the property the autoencode: true will work for the column.

jqgrid add link to column headers

I'm using jqgrid to create a grid. I have looked but can't seem to find a solution. I'm trying to add links to the column headers.
Any help appreciated.
Thanks
Use jQuery to bind your click event:
jQuery(document).ready(function() {
$("#jqgh_colName").click(function() {
alert('jqgh_colName clicked');
});
});
jqGrid creates the column header names using names in the colName list. So you can try putting the markup directly in this list during grid initialization:
colNames:['Test', 'Column 2', ... ],
I have not tested this, so YMMV. Also keep in mind there may be usability issues - a user is probably going to expect that clicking on a header would sort the column.
Here you can find the exact options.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:predefined_formatter

Resources