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
Related
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
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...
});
Has anyone done anything with AngularJS and select droplists populating another droplist on the page based on a selection.
We have a service we are populating a Select droplist with. But we have another droplist on the page that, when the first droplist's section is made, the second droplist will dynamically populate with information based on the selection of the first droplist.
JSON structure example:
[{
"Cars":{
"Type": "Hatchback",
"Type": "Sedan"
},
"Trucks":{
"Type": "Small",
"Type": "Full Size"
}
}]
So if my first <select> droplist contains options for Cars and Trucks, then based on that selection the second <select>droplist will dynamically populate with the 'Type' based on the selection of a Car or Truck.
Does anyone have any insight or point me to any tutorials based on this?
Thanks in advance
Use the option in you first selection to populate the list:
<select ng-model="d1" ng-options="key for key in vehKeys"></select>
<select ng-model="d2" ng-options="t.Type for t in veh[d1]"></select>
my controller looks like this:(I changed your format, as it was, Type would just keep overwriting its self)
$scope.veh = {
"Cars":[
{"Type": "Hatchback"},
{"Type": "Sedan"}
],
"Trucks":[
{"Type": "Small"},
{"Type": "Full Size"}
]
};
$scope.vehKeys = Object.keys($scope.veh);
I'm not entirely sure why you cannot do something like this though
<select ng-model="d1" ng-options="type for type in Object.keys(veh)"></select>
so I just did it in the controller.
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
How can i recover all my DropDownList options? I've tried a lot of different things, but none of them worked. I don't want just the selected value, but the entire options, with it's text and value.
I tried to use $('form').serialize() and while it recover complex objects through model binding to my controller, the entire dropdownlist is lost, only it's selected value returns.
I tried even generating a json object with following structure (unsuccessfully):
var list = [
{
"MyDropDownList":
{ "option": {"Text": "Some text", "Value": "Some value"} },
{ "option": {"Text": "Ohter text", "Value": "Other value"} }
}
];
I'm really considering to create a nested object to emulate a dropdownlist, instead of using the List<SelectListItem>