I cannot get the mobile Adaptive Grid features to work using the Kendo JSP wrappers. I have cut everything down as much as possible, and it will not work with the wrappers. I can get everything working perfectly fine with Javascript. The following works perfectly fine:
<div id="grid"></div>
<script>
var gridConfig = {
columns: [
{field: "name", title: "Name"},
{field: "age", title: "Age"}
],
filterable: true,
columnMenu: true,
mobile: true
};
$("#grid").kendoGrid(gridConfig);
</script>
When I look at the grid in a desktop browser, my filter and column menus appear as you would expect. When I view the grid on my cell phone, the filter and column menus push the grid aside and appear as a standard mobile selection list. If I create the same grid using the JSP wrappers, it doesn't work:
<div id="grid">
<kendo:grid name="grid" filterable="true" columnMenu="true" mobile="true" >
<kendo:grid-columns>
<kendo:grid-column title="Name" field="name" />
<kendo:grid-column title="Age" field="age" />
</kendo:grid-columns>
</kendo:grid>
</div>
The filter and column menus display on my phone as they do on the desktop, which makes them unusable since they slide off the viewing area and disappear when I try to scroll to them.
I know the obvious question is why bother with the Wrappers, but I have to due to our usage of Freemarker throughout the application.
What am I missing here?
Had to just modify the source of the latest release (2016.1.112) myself. In case anyone else has a similar issue, adjust the setMobile method of com.kendoui.taglib.GridTag.java.
public void setMobile(java.lang.Object value) {
if (value instanceof String && (((String)value).equalsIgnoreCase("true") || ((String)value).equalsIgnoreCase("false"))) {
setProperty("mobile", Boolean.valueOf((String)value));
}
else {
setProperty("mobile", value);
}
}
Could be better, but it's functional and does what I need for now.
Related
After reading the documentation, I still have problems trying to implement a simple virtual combo box with only front end values. the combo box displays all my values correctly, and the virtualization works, but when I select an item from the drop down, it does not appear in the combo box "bar".
Here is the basic code:
Html
<select role="listbox" id="comboBoxId"></select>
javascript
var comboboxVar = $("#comboBoxId").kendoComboBox({
placeholder: "select...",
dataTextField: "DisplayName",
dataValueField: "Id",
dataSource: {
data: [{DisplayName: "name", Id: "id"}]
},
virtual: {
itemHeight: 26
}
});
After some debugging, I found that, when clicking on the drop down option, the dataItem selected is null. Nonetheless, I am not quire sure why.
I also experimented with the valueMapper method. After some reaserch, I found that if the drop down has no initial values and "value" is not used, it is not necessary to include the method valueMapper. I think the aforementioned scenario is applicable to my situation, but I am not sure if I still have to include the method.
I am using IE to debug, and I am using this code in a Visual Studio MVC web application
Thank you for your help
This is a working example you can take
<input type="text" id="ddl" />
<button>Change value</button>
<script>
var ddl = $("#ddl").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
filter: "contains",
dataSource: {
data: [
{id: 1, name: "apples"},
{id: 2, name: "oranges"},
{id: 3, name: "apples2"},
{id: 4, name: "oranges2"}]
}
}).data("kendoDropDownList");
$("button").on("click", function(){
ddl.dataSource.filter("")
ddl.value(2);
});
</script>
http://dojo.telerik.com/#plazarov/EmAni
Click on the dropdown list and filter it in Edge
Now clear the filter by selecting 'x' mark on the input text field. The filter wont get cleared.
Is it a bug in Kendo control?
You could argue it's a Kendo bug yes, see their example which suffers the same problem (in IE/Edge):
http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering
But you could also argue that it's the browser poking it's nose in and adding this "clear" button to the input field. You can suppress it with simple CSS: (credit to Remove IE10's "clear field" X button on certain inputs?)
.someinput::-ms-clear {
display: none;
}
See working example here: http://dojo.telerik.com/oguYo
Interestingly the Kendo styles suppress this too instead of making it work with the widgets, I found 2 uses of it in the common CSS just at a glance:
.k-widget ::-ms-clear{width:0;height:0}
.k-multiselect-wrap .k-input::-ms-clear{display:none}
Presumably they missed this instance though, good spot!
It seems it's bug. And the previous "answer" is not an answer.
For both examples http://dojo.telerik.com/#plazarov/EmAni and http://dojo.telerik.com/oguYo you need click twice for clearing the filter.
I don't find a solution too.
But it works if you clear a selected value:
http://dojo.telerik.com/ocUlEkAd/2
Is it possible to have a filter menu with options such as Yes, No, Other
I have a grid with a column which could have only 3 values Yes, No or Other. The filter should show radio buttons with these values and two button Filter and Clear. Is this possible?
When I try with field type:"boolean", I get 'Yes' and 'No but how do I add the third radio button 'Other'.
Any help would be appreciated.
Thanks
Kendo has an example of how to do just that here:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Here is an example of how your filter will probably be set up
filterable: {
//hide second filter option
extra: false,
operators: {
string: {
eq: "Is equal to"
}
}
},
filterMenuInit: function(e) {
//when the filter menu opens find the first dropdown and hide it
//as it has the Is equal to filter in it.
e.container.find(".k-dropdown").eq(0).hide();
}
Here is JSbin that shows how to use some of these features:
http://jsbin.com/qehugexo/2/edit
Update
While I could get radio buttons to show up in the filter window, it was a headache to rig it up and very hacky with the default Kendo stuff. I would suggest using the Kendo Dropdown as show in the demo or just manipulating the filter on the Data source of the Grid itself.
It can be done with code like this:
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: "Boston"}], Logic: "and"})
Here is an example of how you could use it.
filterMenuInit: function(e) {
//when filter menu opens toss it cause its lame!
e.container.html("
<input name='radio' type='radio' checked='checked' value='Clear'>Clear</input>
<input name='radio' type='radio' value='London'>London</input>
<input name='radio' type='radio' value='Seattle'>Seattle</input>
");
$("input[type=radio]").click(function(){
if($(this).val() != "Clear") {
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: $(this).val()}], Logic: "and"})
}else {
$(".k-grid").data("kendoGrid").dataSource.filter({})
}
});
}
And an updated JSbin: http://jsbin.com/qehugexo/3/edit
I am trying to use Kendo's Mobile widgets inside of my PhoneGap Durandal project.
See sample source project here: https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App
I don't understand where to put the Kendo initilisation code (the widgets do not render without this):
window.kendoMobileApplication = new kendo.mobile.Application($(document.body), {
skin: "flat"
});
I have tried to put it into the Index.html, shell.html and into a particular Durandal page view (x.html), shell.js, main,js and x.js but none of these work.
My Index page has these links in it:
<script src="css/telerik/js/kendo.all.min.js"></script>
<link href="css/telerik/styles/kendo.mobile.flat.min.css" rel="stylesheet" />
My Durandal View has the following HTML with Kendo Mobile widgets:
<section>
1
<div id="kendoindex">
<div data-kendo-role="view" data-kendo-title="View">
<header data-kendo-role="header">
<div data-kendo-role="navbar">
<span data-kendo-role="view-title">Title</span>
</div>
</header>
<ul data-kendo-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
2
</section>
and my ViewModel for this View:
define(function (require)
{
function viewModel()
{
var self = this;
self.activate = activate;
function activate()
{
//window.kendoMobileApplication = new kendo.mobile.Application($("#kendoindex"), {
// skin: "flat"
//});
}
}
var vm = new viewModel();
return vm;
});
If I don't call kendoMobileApplication then the Kendo Mobile widgets are not rendered (it just shows "1 Title 2" with no CSS (ie. Kendo is not transforming them).
Everything seems to be keyed on where to call this: kendoMobileApplication in Durandal.
I followed the Durandal guidelines to give the Kendo bindings their own namespace: http://durandaljs.com/documentation/KendoUI/
UPDATE 1
I have created a simple Durandal 1.2 project which highlights the problem with Kendo Mobile and Durandal (and PhoneGap, but irrelevant here)), namely:
The only way to get the Mobile controls to render properly is to call kendo.mobile.Application. However this cannot find the right HTML element if it is put into a different file and loaded with Durandal.
I cannot find the right place to put this init code as it throws this error: “Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.”
kendoIndex.html is NOT Durandal but shows how it should be rendered if the kendo.mobile.Application is called correctly (Run this first to see what we are trying to achieve)
Shell : Has the Kendo Layout which does not get rendered.
Home View: Has the simple Kendo Mobile view – this does not get rendered.
About: A simple HTML page without Kendo
Source is on Guthub – if anyone can get Kendo Mobile working with Durandal I would appreciate it (or at least confirm if it is impossible (Telerik are no help at all on this)).
https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App
Here's a working demo, which shows the correct start screen, but doesn't show the about view on navigation click. There's probably some extra work required to either remove kendo's or Durandal's router functionality.
http://rainerat.spirit.de/DurandalKendoMobile/App/#/
There were a couple of things required to make it work.
https://github.com/RainerAtSpirit/DurandalKendoMobile/commits/master
Kendo requires that the host element and all 'view' and 'layout' elements are in the DOM and that 'view' and 'layout' are child of the container element. After updating the view html to reflect this the right place to create the kendo app would be home.js
define(function( require ) {
var ctor = function() {
};
ctor.prototype.activate = function() {
console.log("Home activate");
};
ctor.prototype.viewAttached = function() {
var $kendoHost = $('#kendoHost');
// Workaround for height = 0.
// Additional code required to calculate on windows.resize
$kendoHost.height($(window).height());
this.app = new kendo.mobile.Application($kendoHost, {
skin: "flat"
});
console.log("Home viewAttached", this.app, $kendoHost.height());
};
return ctor;
});
Last kendo determines kendoHost height as 0, which prevents that the correctly rendered view show up. As a workaound I'm using $kendoHost.height($(window).height()); right before creating the app addresses.
As said in my comment above I'm still not sure if I'd recommend combining those two SPA frameworks as you might encounter more glitches like that while building your app. That said I'd love to hear about your progress :).
I am evaluating kendo ui right now to use in our big application. We have a situation where we have much values in dropdowns (like 200+) and there are more than 1 drop down with that size. So if we have a complex form. The Page Load takes time to render the form. (Due to that each box needs to be loaded from service and filled up).
We avoided this by writing our own asp.net web control with on demand support (like autoBind property) in the drop down list in kendo ui.
Now, DropDownList from KendoUI serves the purpose with autobind = false, BUT when setting value it fetches data from remote binding first and then selects appropriate value. (this is cool and really good for small lists) but Potentially this will mean that when we load the page and set the value it will issue remote binding calls for each of the drop downs.
Now,
Can we set value/ text to appear without issuing the remote binding. We want remote binding to be done ONLY when the user clicks on the drop down itself. (not when we are filling form). This will save extra calls to system and help quickly render the form to user.
Here is JS Bin
http://jsbin.com/ayivad/3/edit
If somebody from kendo ui would like me to help out - let me know, but this idea will allow us to use kendo ui drop downs with good use.
<input type="button" id="btnSet" value="Set Value (Click without clicking on DropDown" />
<br/><br/>
<select id="products"></select>
$(document).ready(function () {
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
autoBind: false,
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "http://demos.kendoui.com/service/Products",
}
}
}
});
var combobox = $("#products").data("kendoDropDownList"),
setValue = function (e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
combobox.value(3);
};
$("#btnSet").click(setValue);
});
Thanks,
Riz
1) Set text instead of value : http://docs.kendoui.com/api/web/dropdownlist#configuration-text
Kendo:
text String(default: "")
Define the text of the widget, when the autoBind is set to false.
Example
$("#dropdownlist").kendoDropDownList({
autoBind: false,
text: "Chai"
});
dirty alternative - Try to hijack ddl "optional label" for your needs. Load your data for the page inclusive of the value you want to show at the ddl, then initialize ddl's with optional values equal to the value you want to show. Once user opens the ddl, remote data will load, once data loaded you will ovewrite/remove the optional label and happy days.
http://docs.kendoui.com/api/web/dropdownlist#configuration-optionLabel
(Consider splitting the list, 200 long drop down us far from user friendly.)
$("#dropdownlist").kendoDropDownList({
optionLabel: "My value" });
Also consider using Kendo ComboBox, afterall auto complete after 3 chars or so sounds as quite sensible solution in case of your 200 items. We use same solution to 500 + combobox.