I am using Kendo UI Grid and other Kendo tools for my project.
How can I change some of its settings globally without using any specific id or class?
Eg: Whenever I use grid, pageable message should be "My custom message" across all the site.
I can do that by targeting perticular grid component like below. I am using kendoGrid many places or many times in same page itself. In that case, how can I do the same without repeating the pageable message everytime?
Online Demo { jsFiddle }
$(document).ready(function () {
$("#grid1").kendoGrid({
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
});
});
$(document).ready(function () {
$("#grid2").kendoGrid({
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
});
});
.............
If I have 5 grid items in same page, let say #grid1, #grid2, #grid3, #grid4, #grid5, should I need to add below message to all 5 grid components?
pageable: {
messages: {
itemsPerPage: "My custom message"
},
},
Instead, is there a way where I can override the global properties for KendoGrid element without touching the original plugin?
You don't need to add the configuration to each grid. Instead you can take advantage of Kendo's localization features. To change the pager text for all of your grids you should include a "messages" file after you have loaded "kendo.all.min.js". Since this has to do with localization, the "messages" files are culture-specific. If you have not defined a culture for you project Kendo will assume en-US by default.
Here's what you need to do:
Find the original kendo.messages.en-US.min.js file for your version of Kendo. You should be able to find this file in the Kendo installation directory, for example: C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\js\messages
Copy the file to your project
Look for itemsPerPage inside the file and change its value to whatever you want.
Add a reference to the file in your html's <head> section, but make sure it is after kendo.all.min.js
For more information on localizing Kendo take a look at this article: http://docs.telerik.com/kendo-ui/framework/localization/overview
You can also see a working example here: http://demos.telerik.com/kendo-ui/grid/localization
Related
I want to change group of CSS items in jqGrid. Documentation is saying
Of course if we want to change not only one CSS item from a group, but two or more we can use jQuery extend to do this:
var my_col_definition = {
icon_move : 'ui-icon-arrow-1',
icon_menu : "ui-icon-pencil"
}
$.extend( $.jgrid.styleUI.jQueryUI.colmenu , my_col_definition );
And this is working partially. But I want to override all icons in my Bootstrap with next code:
$.extend($.jgrid.styleUI.Bootstrap, {
common: {
icon_base: "fa"
},
inlinedit: {
icon_edit_nav: "fa-edit"
},
navigator: {
icon_edit_nav: "fa-edit"
},
// ...
});
and my grid stops working and does not respond to any commands. There are no errors in console.
Do anybody know how to fix the problem in an elegant way and do not override every group separately?
It is unknown which versions of Guriddo jqGrid and Bootstrap are used.
I see you try to use the fontAwesome.
With the last release you can use fontAwesome with ths following settings:
<script>
$.jgrid.defaults.styleUI = 'Bootstrap4';
$.jgrid.defaults.iconSet = "fontAwesome";
</script>
And point to the needed css files as described in this documentation
You can change the icons the way you do in your code without problems - I have tested this and it works.
In any case, please prepare a simple demo which reproduces the problem, so that we can look into it.
I am using a kendo multi select in power bi custom visual but it appears that only the first selection is sticking.
My code is below:
$("#myMultiSelect").kendoMultiSelect({
dataTextField: "value",
dataValueField: "identity",
dataSource: viewModel.categories,
change: function(e) {
var selectionDeffered = this.value().map(id => selectionManager.select(id, true));
if (this.value().length == 0)
{
selectionManager.clear()
}
}
});
A full gist with the kendo core is here:
https://gist.github.com/jcbowyer/5df55d4758a7614ca08d71eaf640fc57
Is there a simple way to achieve multi-select? I may be making an obvious mistake but the chiclet sample is very complex and uses a different method called selectionhandler. I am unclear how to user selection handler with kendo.
The issue was I was not clearing previous selection. The selection manager multiselect is working if one multi select is added. I have not been able to get the mutliselect to work if multiple multi selects are added.
So I am using Kendo UI Grid and I want to add data-priority to the columns that way I can hide and show columns depending on the viewport I know this is possible with JQuery Mobile (http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_tables_columntoggle) .But Is this possible in Kendo UI?
You can add custom attributes to the column headers using the headersAttributes configuration.
Use it like this (if you are using pure javascript version of Kendo):
$("#grid").kendoGrid({
columns: [ {
field: "name",
title: "Name",
headerAttributes: {"data-priority": "1"}
},
// more columns...
});
I am wondering if there's an easy way to have the multiselect widget's css functionality shown in this demo
http://demos.kendoui.com/web/multiselect/index.html
applied to an autocomplete widget.
If the only reason for using autocomplete is that the list of values is huge and you want to do server side filtering (serverFiltering) with a multiselect widget as well. You just need to define serverFiltering as true.
Example:
var ds = new kendo.data.DataSource({
transport: {
read: {
url : "getData.php"
}
},
serverFiltering: true
});
$("#items").kendoMultiSelect({
dataValueField: "name",
dataTextField : "name",
dataSource : ds
});
You will receive a some additional parameters saying what the user has typed so far and you server can return only the data that meets the condition.
This JSFiddle (http://jsfiddle.net/OnaBai/rpDuL/) tries to show you how it works. You can start typing a country name and see that it actually filters the data. Since this is just JavaScript I've simulated server filtering implementing a read function that greps the data for those records meeting the condition.
These are my first steps with the Firefox AddOn SDK. What I'm trying to create is a simple 'settings dialogue'. I thought about a html page containing forms for the values and a submit button. Following the first mozilla tutorials I created a widget:
var widget = require('widget').Widget({
label: 'Settings',
id: 'settings',
//panel: text_entry
contentURL: data.url('images/stgfavicon.ico'),
contentScriptFile: data.url('scripts/submit.js'),
onClick: function() {
tabs.open(data.url('forms/settings.html'));
}
});
But since settings.js is not the contentScriptFile I got no communication between settings.html and settings.js. Is it possible to get this done without some (complex looking) messaging system? And how to save the values best? A JSON file?
Some links/examples/API names would help me a lot. :)
That's because you're trying to attach your script to the widget (which is not an HTML file). You need to attach it to the actual html file after the tab opens.
tabs.open({
url: data.url('forms/settings.html'),
onOpen: function onOpen(tab) {
tab.attach({ contentScriptFile: data.url('scripts/submit.js'); });
}
});
I haven't tested that out so there may be an error.
You should also look at the simple-prefs module if these are settings that aren't going to be adjusted frequently.