I was looking for a solution that
displayed multiple columns of independent data
did not require a click (or focus) to show the list
had a simple interface
supported visible & hidden values (like HTML's <select>)
has color highlighting to show matches
automatically deletes character entries that are not in any of the choices
I wasn't able to find a control that met these requirements, so I created one. Here is an image of the control in use.
The code to create this control is:
$('input#scrolltest').menuoptions({
"Data": { 1:"January",2:"February",3:"March",4:"April",5:"May", 6:"June",7:"July",
8:"August",9:"September",10:"October",11:"November",12:"December" },
"onSelect": function(mo, data) {
console.log(mo, data.newVal, data.type );
},
"InitialValue": { 'val': 'December'},
"Height": 200,
"Sort": []
});
This control is documented here
The above example is part of this demo page
Related
I'm developing a Add-in for PowerPoint that inserts images in the document.
I'm currently able to insert the image, but what I'm not able to do is to replace a current selected image.
So, for example, imagine that:
The user added an image available on the Add-in, inside an empty slide
He then selected this image and wants to replace it with another one also available on the Add-in.
He clicks/selects the slide image, and then clicks on the image inside the Add-in that he wants to replace.
The thing is that I'm not able to get his selection with the Office API.
Can someone help me?
My current code looks like this:
const insertFile = (binaryStr: string) => {
Office.context.document.setSelectedDataAsync(
binaryStr,
{
coercionType: Office.CoercionType.Image,
},
(result) => {
if (result.status === Office.AsyncResultStatus.Failed) {
console.error(result.error.message);
}
}
);
};
Try to use the getSelectedDataAsync method which reads the data contained in the current selection in the document.
how do i make admin on rest main grid labels in regular case .as my application requires too many columns in the grid and all together it looks very bad and messy .i have created an en.json file and it's taking the value from there that is if the property is channelType and I have given in en.json as "channelType": "Channel ", its showing "CHANNEL" itself in the grid but I want it to be in regular case such as "Channel", what should I do
You can use the style property on the Datagrid component. See the documentation
const styles = {
header: {
textTransform: 'none',
}
}
<Datagrid styles={styles}>
We are facing one issue with Kendo UI grid. (We are evaluating it, so no license copy as of now)
Scenario is:
We need to show data in Grid component.
For each column, we will have filter in form of multi select list box (see image attached).
We tried Kendo UI trial copy, and were successful to set data in it.
When we tried setting items in filter box, they appear to be blank.
Following is JSON which provides list of items in filter:
data which should be displayed in that dropdown list
[
{
"id": 67,
"name": "Investigation ESP"
},
{
"id": 88,
"name": "Refuse & Pickups"
},
{
"id": 101,
"name": "Dead Bug Removal"
}
]
Can you share proper example or point our mistake.
please try to combine the following two things...
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
http://www.telerik.com/forums/multi-select-with-checkboxes-plugin
Kendo UI does not come with localization packs. You can only chose a culture file which will only setup number and date formats, but not the actual texts displayed in the widgets (for example: the pager texts - items per page, next page, etc., the filter menus (Is equal to, etc.), the grid parts (Drag a column here....), etc.)
To localize a widget one must pass, in the individual options of each widget, a bunch of messages to override the messages used by default by Kendo UI. Something like this:
filterable: {
messages: {
info: "Título:", // sets the text on top of the filter menu
filter: "Filtrar", // sets the text for the "Filter" button
clear: "Limpar", // sets the text for the "Clear" button
// when filtering boolean numbers
isTrue: "é verdadeiro", // sets the text for "isTrue" radio button
isFalse: "é falso", // sets the text for "isFalse" radio button
//changes the text of the "And" and "Or" of the filter menu
and: "E",
or: "Ou"
},
operators: {
//filter menu for "string" type columns
string: {
eq: "Igual a",
neq: "Diferente de",
startswith: "Começa com",
contains: "Contém",
endswith: "Termina em"
},
//filter menu for "number" type columns
number: {
eq: "Igual a",
neq: "Diferente de",
gte: "Maior que ou igual a",
gt: "Mair que",
lte: "Menor que ou igual a",
lt: "Menor que"
},
//filter menu for "date" type columns
date: {
eq: "Igual a",
neq: "Diferente de",
gte: "Maior que ou igual a",
gt: "Mair que",
lte: "Menor que ou igual a",
lt: "Menor que"
}
}
},
groupable: {
messages: {
empty: "Arraste colunas aqui para agrupar pelas mesmas"
}
}
Of course you could share this options in a single JavaScript variable, but then you will face an unexpected problem: if you have messages for ALL options of all widgets collected in a single option variable, it will TURN ON all those options for all grids. If you want a grid without grouping you will have to have a separate localized options variable without the groupable or else, even if you don't want, the group will show because the groupable: { messages: { .... } } will make Kendo recognize it as enabled.
It doesn't seem to be any way to localize the controls by including just an extra JavaScript to override those messages as can be seen on Kendo UI forums.
Is there any other way to do that?
(notice that I'll be answering my own question, and I do not suffer from Bipolar Disorder! It is just a way to get the involvement of the community on the kendo-global project!)
The kendo-global project on github makes it easy to localize all localizable texts on all Kendo UI widgets by only including the desired language file like this:
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script src="/js/lang/kendo.pt-BR.js"></script>
It works by overriding the default options on the prototypes of the widgets, so it will work as if those widgets were created natively in the expected language.
Since it doesn't change anything, and don't override any method, you'll still be able to pass customized options with custom messages by using the standard approach if you need a specific message on a individual widget (instead of "10 itens" you may want to show "10 products" in the pager of the grid...)
The project currently has only a few language packs. Translating is very easy and full credits will be given to every and each translator. So contributors are really, really welcome.
The project's page can be found here: https://github.com/loudenvier/kendo-global
I am working with Telerik Controls Q1 2013 SP1.
It looks like you can no longer override the messages for many of the Kendo grid's labels or tooltips. Here is a list of several messages/tooltips that I was not able to override using a kendo-global language file:
ItemsPerPage
First
Previous
Next
Last
I have no good answer to the original question.
It may be worth mentioning that for my purpose the solution was to use the Fluent API
#(Html.Kendo().Grid<Whatever>()
.Name("Grid")
.Pageable(e => e
.Messages(p => p.ItemsPerPage("")
.First("לדף הראשון")
.Previous("לדף הקודם")
.Next("לדף הבא")
.Last("לדף האחרון")
.Refresh("ריענון")
.Display("מציג {0}-{1} מתוך {2} רשומות")
.Page("דף")
.Of("מתוך {0}")))
...
If a more dynamic option is needed I think getting the current localization and initialize the widget would be a good option.
#{
var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
}
#section HeadContent {
<script src="#Url.Content("~/Scripts/cultures/kendo.culture." + culture + ".min.js")"></script>
}
Here is more documentation about
https://demos.telerik.com/aspnet-mvc/grid/globalization?culture=ru-RU&_ga=2.268933617.1296110429.1575874528-1040251397.1575554475
I have a JQGrid with loadonce:true(so it's all client side) and paging enabled(with, say 20 pages).
I would like to specify a row(programmatically, without user input) and have my grid navigate to the corresponding page to select the specified row.
Is this possible with the current JQGrid?
I've looked into search and filter, but that just reloads the grid with new rows - I need my grid to navigate to the correct page - Keeping its data and structure.
I'm in the process of optimizing my grid structure, so any changes needed(say client side to server side) would be possible.
Because you use loadonce:true, then you prepare the data on the server. On the server side you can decide which row must be selected. On the server side you can also easy calculate on which page will be the selected row. The id of selected row and the selected page you can for example include as a part of the userdata. So the data sent from the server could looks like following:
{
"total": 5,
"page": 1,
"records": 107,
"rows": [
...
],
"userdata": {
"page": 3,
"selId": 24
}
}
Inside of loadComplete you can do about following
loadComplete: function(data) {
if (jQuery("#list").getGridParam('datatype') === "json") {
// data.userdata is the same as jQuery("#list").getGridParam('userData');
var userdata = jQuery("#list").getGridParam('userData');
var curPage = jQuery("#list").getGridParam('page'); // is always 1
if (curPage !== userdata.page) {
setTimeout(function(){
jQuery("#list").setGridParam(
{ page: userdata.page }).trigger("reloadGrid");
jQuery("#list").setSelection (userdata.selId, true);
},100);
}
else {
jQuery("#list").setSelection (userdata.selId, true);
}
}
}
A working examples you can see on http://www.ok-soft-gmbh.com/jqGrid/DataToSelect.htm and http://www.ok-soft-gmbh.com/jqGrid/DataToMultiSelect.htm.
UPDATE: Free jqGrid supports multiPageSelection:true option strarting with the version 4.10.0. The option allows to set selection of multiple rows in the grid very easy (and it works very quickly, because it set selection state directly during creating the body of the grid). See the answer and the demo and the readme to 4.10.0.