I am using Kendo UI MVC version "version:2016:1.112.545" in our project and there is a bug in Cascading ComboBox which can be reproduced in Telerik Demos in ASP.NET MVC, HTML5/JavaScript, JSP and PHP (http://demos.telerik.com/kendo-ui/combobox/cascadingcombobox).
(Note: Text in the ComboBox needs to be typed)
Steps to reproduce:
Visit the given URL.
Type letter b in Categories ComboBox and select Beverages
Type letter c in Products ComboBox and select Chai
Type letter p in Orders ComboBox and select Portland
Now clear the text in Categories ComboBox and it will populate all categories, But don't select any of them, just click outside
Notice that content in all the ComboBoxes are cleared, But Orders dropdown is still accessible and clicking on it will populate all the orders.
(Note: I checked it in Chrome and Firefox, Also just clicking on the dropdowns does not reproduce this issue. Please follow the instructions as it is)
If someone knows a fix or hack please share it.
(Note: My license is expired, so don't have dedicated support or access to premium forum thread)
Nice catch. Its bug in kendo-ui and you can also report this bug into kendo-UI bug tracking.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/jszip.min.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<style>
</style>
</head>
<body>
<input id="categories" />
<br />
<br />
<input id="products" disabled="disabled" />
<br />
<br />
<input id="orders" disabled="disabled" />
<script>
$(document).ready(function () {
var categories = $("#categories").kendoComboBox({
filter: "contains",
placeholder: "Select category...",
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
}
}).data("kendoComboBox");
var products = $("#products").kendoComboBox({
autoBind: false,
cascadeFrom: "categories",
filter: "contains",
placeholder: "Select product...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
}
}).data("kendoComboBox");
var orders = $("#orders").kendoComboBox({
autoBind: false,
cascadeFrom: "products",
filter: "contains",
placeholder: "Select order...",
dataTextField: "Order.ShipCity",
dataValueField: "OrderID",
dataBound: onDataBound,
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order"
}
}
}).data("kendoComboBox");
});
function onDataBound(e) {
if ($("#products").data("kendoComboBox").selectedIndex == -1) {
$("#orders").data("kendoComboBox").enable(false);
}
}
</script>
</body>
</html>
Let me know if any concern.
Related
I'm using free jqgrid 4-15-3 with guiStyle set to bootstrap. The problem is that the Add dialog launched from navGrid "+" button is a Model dialog by default. I have set the "model: fasle" in addParms but has no effect. Also failed in making changes in afterShowForm by setting jquery ui dialog "option" with "model", false. Below is the code snippet. What are the possible solutions?
$("#mygrid").jqGrid("navGrid", "#mygrid_nav", {add:true,...},{},
{ model:false,
afterShowForm: function(form){
$(form).closest(".ui-jqdialog").dialog("option", "model", false);
}
}
Update: Created a simple test as below, same result:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/jquery-ui.min.css" rel="stylesheet"/>
<link href="/Content/ui.jqgrid.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.min.js"></script>
<script src="/Scripts/jquery.jqgrid.src.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
</head>
<body>
<div>
<div>
<div>
<table id="tbl_test"></table>
<div id="div_test_pager"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tbl_test").jqGrid({
datatype: "local",
colNames: ['Col 1', 'Col 2'],
colModel: [
{ name: 'col1', index: 'col1', editable: true, width: 200 },
{ name: 'col2', editable: true, width: 100 }
],
pager: "#div_test_pager",
height: 200,
caption: "Test"
});
$("#tbl_test").jqGrid("navGrid", "#div_test_pager",
{ edit: false, add: true, del: false, search: false, refresh: false }
/*no difference*/
//,{}, {modal: false}
);
});
</script>
</body>
</html>
Appreciate any help!
(Can Oleg or someone knows give a hint? Thanks a lot.)
The word model you use is not correct - replace it with the word modal in the settings and in the calling of the dialog function
Below code has been thankfully provided by machun for toggling between RTL and LTR directions in Kendo UI widgets.
The code consists of:
HTML:
kendo autocomplete form plus a button to activate support for RTL and LTR language.
Script:
k-rtl class container
datasource (json file)
kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab
k-rtl class
The problem is that links don't open correctly. It shows a 404 Not Found error plus a /undefined at the end of the URL.
Live demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="container">
<input type="button" id="toggleRTL" value="Activate RTL Support" class="k-button" />
<input id="autocomplete" type="text" />
</div>
</body>
</html>
<script>
/*------k-rtl class container----------*/
function createAutoComplete(){
if($("#autocomplete").data("kendoAutoComplete") != null){
$("#autocomplete").parent().remove();
$("#container").append("<input id='autocomplete' type='text' />")
}
/*------datasource (json file)---------*/
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "json.txt",
dataType: "json",
data: {
q: "javascript"
}
}
},
schema: {
data: "results"
}
});
/*------kendo autocomplete widget initializing + template to show image beside data and to open data links in the same tab----------*/
$("#autocomplete").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "name",
template: '<span><img src="/kendo-autocomplete-test/img/#: id #.jpg" /></span>' + '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
location.assign(href);
}
});
}
/*------k-rtl class----------*/
createAutoComplete();
$('#toggleRTL').on('click', function(event) {
var form = $('#container');
console.log(form);
if (form.hasClass('k-rtl')) {
console.log("test1");
form.removeClass('k-rtl')
} else {
console.log("test2");
form.addClass('k-rtl');
}
createAutoComplete();
})
</script>
I advice to debug your function first then simply check the variable and make sure it contain the right thing. You overlooked a simple thing that your jquery dom selector isn't quite right resulting var href contain "undefined".
Change
var href = e.item.find("span").data("href");
To
var href = e.item.find("span[data-href]").attr("data-href");
Take a look here
I wanna create a focus on a particular cell value after clicking the alert box in jqgrid please any one suggest a solution thanks in advance
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
//$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.4/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.blockUI.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var lastsel2;
var myGrid = $('#rowed5');
var selRowId = myGrid.jqGrid ('getGridParam', 'selrow');
var celValue = myGrid.jqGrid ('getCell', selRowId, 'columnName');
jQuery("#rowed5").jqGrid({
datatype: "local",
height: 250,
colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
colModel:[
{name:'id',index:'id', width:90, sorttype:"int", editable: true},
{name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}},
{name:'stock',index:'stock', width:60, editable: true, edittype:"checkbox",editoptions: {value:"Yes:No"}},
{name:'ship',index:'ship', width:90, editable: true, edittype:"select",formatter:'select',
editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
{name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea",
editoptions:{rows:"2",cols:"10"}}
],
onSelectRow: function(id){
if(id && id!==lastsel2){
jQuery('#rowed5').editRow(id,true);
alert("hi");
//---here i missed alert after clicking this i want to focus on the cell that the user had already clicked--
setTimeout(function(){celValue.focus();},1);
//--here i get the particular cell value and i try to focus after clicking the alert box----
//-- i also try with $(this).focus as setTimeout(function(){$(this).focus();},1); but i did not get any possible output----
}
},
caption: "Input Types"
});
var mydata2 = [
{id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FE"},
{id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"IN"},
{id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TN"},
{id:"45678",name:"Speakers",note:"note",stock:"No",ship:"AR"},
{id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FE"},
{id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FE"},
{id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"AR"},
{id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TN"},
{id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FE"}
];
for(var i=0;i<mydata2.length;i++)
jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
});
</script>
</head>
<body>
<table id="rowed5" class="scroll"></table>
</body>
</html>
You get the most simple solution if you would use the latest source of free jqGrid which you can download from GitHub (free jqGrid is the fork of jqGrid which I develop). It allows you to implement onSelectRow as below
onSelectRow: function (rowid, status, e) {
var $self = $(this), savedRow = $self.jqGrid("getGridParam", "savedRow");
if (savedRow.length > 0 && savedRow[0].id !== rowid) {
//$self.jqGrid("restoreRow", savedRow[0].id);
$self.jqGrid("saveRow", savedRow[0].id);
}
$self.jqGrid("editRow", rowid, { focusField: e.target });
}
See the demo. The target property of 3-d parameter of onSelectRow is the clicked element. One can use focusField: e.target option of editRow to set the focus on the input/select in the clicked cell.
If you need to use alert but you don't want to change the focus then you can save the current focus in a variable then call alert and set the focus on the element which had focus before calling alert:
var $focused = $(":focus"); // get focus
alert("hi");
$focused.focus();
See the corresponding demo here.
Moreover I recommend you compare the modified code from my demo with your original code. For example it's very bad to fill the grid using addRowData. Instead of that one should use data: mydata2 parameter of jqGrid.
Dynamic data is not appearing in the list. Data is fetched dynamically in jsonp format. When checked in Chrome developer tools i am able to see the response. Please find the code below. Can someone help me here ?
<!DOCTYPE html>
<html>
<head>
<title>Pull to refresh</title>
<script src="../../lib/jquery.min.js"></script>
<script src="../../lib/kendo.mobile.min.js"></script>
<link href="../../lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="../../lib/styles/kendo.common.min.css" rel="stylesheet" />
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<ul id="pull-to-refresh-listview"></ul>
</div>
<script id="pull-to-refresh-template" type="text/x-kendo-template">
#= Title #
</script>
<script>
function mobileListViewPullToRefresh() {
var dataSource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 1,
transport: {
read: {
url: "http://localhost/MvcMovieApp/Mobile/RestResponse", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
alert(kendo.stringify(options));
return {
q: "javascript",
page: options.page,
rpp: options.pageSize
since_id: options.since_id //additional parameters sent to the remote service
};
}
},
schema: {
data: "movies" // the data which the data source will be bound to is in the "results" field
}
});
alert("Before kendoMobileListView");
$("#pull-to-refresh-listview").kendoMobileListView({
dataSource: dataSource ,
pullToRefresh: function(){ alert("dataSource"); return true },
appendOnRefresh: true,
template: $("#pull-to-refresh-template").text(),
endlessScroll: true,
pullParameters: function(item) {
return {
since_id: item.id_str,
page: 1
};
}
});
}
</script>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
JSONP which i am receiving is :
({"movies":[{"ID":1,"Title":"Movie 1","ReleaseDate":"/Date(1355250600000)/","Genre":"Comedy","Price":10},{"ID":2,"Title":"Movie 2","ReleaseDate":"/Date(1355250600000)/","Genre":"Thriller","Price":10}]})
There must be a call back function name in the returned JSONP. The output I see here doesn't have any function name. You need to make changes to your server side code.
I have a edit template using a list view and want a drop down list that is populated from a remote source. But the drop down list just shows the loading icon.
Here is the DropDownList DataSource.
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
and here is what I'm putting in the edit template
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
any help would be great.
Your code is basically fine but there a couple of question that you might have missed.
Since you are defining the DataSource saying data-source="dsTitles" as part of the HTML the order on how you define things is pretty important.
The first thing that gets defined is the HTML. Which means that dsTitle should be global.
Then, after the input is processed is when you should call kendo.init.
So, it should be something like this:
<html>
<head>
<meta charset="UTF-8"/>
<title>OnaBai - KendoUI DrowDownList</title>
<!-- Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<!-- Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<!-- Web Page styling -->
<style type="text/css">
</style>
<script type="text/javascript">
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
$(document).ready(function () {
kendo.init("input");
});
</script>
</head>
<body>
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
</body>
</html>
I think the answer might be as simple as using a Kendo DropDownListFor, which will be populated with the given data.