Can we replace kendo UI dropdown list with default html "select -> option" elements?
I am concerned about how it is displayed in mobile devices. I want to open native apple and android interface when selecting a dropdown value.
Yes it is absolutely possible. I will do an example with kendo dropdown and JQuery
<input id="DropdownList" class="form-control"/>
Here is a simple input box.
We need a simple Javascript to treat is as a dropdownlist.
<script>
$("#DropdownList").kendoDropDownList({
dataTextField: "Name",
dataValueField: "ID",
});
</script>
And to bind it to some datasource all we have to do is create a JQuery function to do it as
var dropDown = $("#DropdownList").data("kendoDropDownList");
dropDown.setDataSource(someList);
someList is a simple JSON object which we can get through ajax requests.
Related
I have written a custom filtering feature by setting the custom rules to the jqgrid and the grid is loading perfectly fine.
I also have a toolbar filtering on jqgrid.
Toolbar filter and custom filter has some same columns. I am setting the values from custom filter to the jqgrid filter.
Now the call is happening twice and the grid is loading twice.
Question is : How to prevent the grid from loading after the value is set to the jqgrid column.
<ul id="cr_taxYearList" style="display:none;width:70px;z-index:1000">
<jsp:include page="/WEB-INF/jsp/lookup/taxYears.jsp"></jsp:include>
</ul>
taxYears.jsp code is:
<s:iterator value="years" var="item">
<li><label><input type="checkbox" <s:if test="year == activeYear">checked</s:if> value="<s:property value="year"/>"/><s:property value="year"/></label></li>
</s:iterator>
JQgrid code:
{ name: 'taxYear',index:'taxYear',label: 'Year', width:50, align:'center', searchoptions:{sopt:['in'],
dataInit: taxJQGridUtils.buildMenuFilter(grid,
{menu:$("#cr_taxYearList"), createMenu:true,checkBoxManagerOptions: {change:crTaxYearOnChange, fireChangeOnCreate:true},
widgetManagerOptions : {selectedText: "#", noneSelectedText:'None', buttonOptions:{icons:{secondary: "ui-icon-triangle-1-s" }}}})}}
Added a custom filter button to the grid using the functionality navButtonAdd.
To this added a bind event
bindEvent : function(0){
$("#filterBtn").on("click",function(){
var yearfltr = $('#custRptTaxYear').val();
//how to set the "yearfltr" value to jqgrid toolbar which is "cr_taxYearList" without reloading the grid.
});
}
For custom filtering I have written rule as below:
var rule ='{"groupOp":"AND","rules":[';
if(taxYearfltr != ""){rule +=
'{"field":"taxYear","op":"in","data":"'+taxYearfltr+'"}';
}
rule+="]}";
$("#grid").jqGrid('setGridParam', { postData: {filters: rule}}).trigger("reloadGrid");
Now I want to set the taxYear dropdown to the value selected from custom filter div, without reloading the jqgrid.
I am new in Kendo MVVM. Trying to bind datasource data to a listview but it does not show the data.Tried to mix and match all available examples. Want to use the template which is not working. Here is the code sample
http://dojo.telerik.com/IwawE
Modified the dojo with the fixes
http://dojo.telerik.com/IwawE/5
Your data binding declaration is incomplete and results in javascript errors when kendo tries to instantiate the listview.
data-bind="source:gsSystem,
visible: isVisible,
events: { click: }"
Firstly, there is no 'isVisible' property on your view model so the binding will return 'undefined' resulting in the listview not being shown. Either remove that binding or add the property as part of the model, for example:
isVisible: true
Secondly, there is no function defined for the click event. Usually you would specify one such as:
events: { click: onClick }
and add the handler to the model:
onClick: function (e) {
alert("Clicked");
}
However in the case of the ListView, there is no click event available. Instead, remove the event from the ListView declaration and add it to the div within the template instead:
<script type="text/x-kendo-template" id="tmpl">
<div data-bind="events: { click: onClick }">#:text#</div>
</script>
In my Kendo grid, I've a column (address). Instead of displaying customer's address, it shows a button. On clicking the button, I want to open a Kendo window as a modal and display the address.
...
{ field: "address",
title: "Customer Address",
width: "130px",
filterable: false,
template: '<span class="viewButton"><input type="button" value="Address" class="k-primary"></input></span>'
},
...
I've tried various strategies, including a custom command, an onClick event handler for the grid etc. But none seems to work. The best I've achieved so far is using custom command, in which I can open the Kendo window, but unable to display the underlying data for the column.
Any ideas for any possible way to achieve this?
You can get hold of current dataItem and show it in window.
$("#grid").on("click", ".viewButton",function(e){
var dataItem = grid.dataSource.dataItem($(e.currentTarget).closest('tr'));
var yourText = dataItem.address;
});
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 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.