I am using Kendo UI ListView.
I want to add new <li> item to existing <ul> on clicking of + add link. But it has to open Kendo Popup with editable textfield for "Item Text", and Select box for Item Options with options as Option 01, Option 02.... etc..
Please help as I am new to jQuery and Kendo :(
Online Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/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.1111/js/kendo.all.min.js"></script>
</head>
<body>
+ Add
<ul id ="listView"></ul>
<script>
var dataSource = new kendo.data.DataSource({
data: [ { itemText: "Default item 1", itemOption: "Option 01" }, { itemText: "Default item 2", itemOption: "Option 02" }]
});
$("#listView").kendoListView({
dataSource: dataSource,
template: "<li>#:itemText# : #:itemOption#</li>",
});
dataSource.read();
</script>
</body>
</html>
One solution can be something like this: Dojo example
Related
I'm using Kendo DataBound event to print the model from the row triggering the event, the problem I'm facing is the model is undefined when using DataBound different from using Edit event.
.Events(e => { e.DataBound(#<text>function(e) { alert(e.model); }</text>) })
The problem is that apparently e.DataBound is not handling the e argument as the Edit, Cancel, and the rest of events.
When trying with e.Edit(#<text>function(e) { alert(e.model); }</text>) the e.model object is loaded with the properties and values.
Is there a way to achieve this?
You can achieve that by using jQuery only:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(function() {
$('#grid').kendoGrid({
dataSource: {
data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
},
});
let grid = $("#grid").data("kendoGrid");
$("#grid").on('click', 'tbody td', function(e) {
let $td = $(e.target),
dataItem = grid.dataItem($td.parent()),
cellContent = dataItem[$td.data('field')];
console.log($td, dataItem, cellContent);
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
Or by using the grid's change event. But in order to use that event you need to set your grid selectable to true:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.114/js/kendo.all.min.js"></script>
<script>
$(function() {
$('#grid').kendoGrid({
dataSource: {
data: [{ A: 1, B: 2 }, { A: 3, B: 4 }]
},
selectable: true,
change: function() {
let dataItem = this.dataItem(this.select());
console.log(dataItem);
}
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
How to export excel of grid from dialog or window(popup) in kendo jquery(not use MVC or partial view)
You can do that by using the built-in method saveAsExcel.
See the code snippet taken from the Kendo documentation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
<button id="export">Export to Excel</button>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
});
$("#export").click(function(e) {
var grid = $("#grid").data("kendoGrid");
grid.saveAsExcel();
});
</script>
</body>
</html>
I had a situation like this, my dropdownlist supposedly it should display GUEST HOUSE based on my userPropertyID=3 but somehow it still not display the right value in dropdownlist. Need your help, thank you for your time.
var userPropertyID = 3;
var propertyTBL = [
{"propertyID":"1","propertyName":"HOTEL"},
{"propertyID":"2","propertyName":"RESORT"},
{"propertyID":"3","propertyName":"GUEST HOUSE"},
{"propertyID":"4","propertyName":"HOME"},
{"propertyID":"5","propertyName":"MOTEL"}];
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataTextField: "propertyName",
dataValueField: "propertyID",
dataSource: propertyTBL
});
dropdownlist.select(userPropertyID);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<style>*{font-family:Arial;font-size:11px;}</style>
<body>
Property Name:<input id="dropdownlist"/>
</body>
</html>
This happens because you didn't assign correct kendo widget into variable. So it doesn't know kendo's functions.
Correct way would be this (by using .data('kendoDropDownList'))
var dropdownlist = $("#dropdownlist").data('kendoDropDownList');
so in your case, you need change your part of code to this.
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataTextField: "propertyName",
dataValueField: "propertyID",
dataSource: propertyTBL
}).data('kendoDropDownList');
But remember that indexing starts at 0 (I see in your code, that at index 3, you have again value HOME as is at index 0, so don't get confused by that).
Now calling .value() function will work
dropdownlist.select(userPropertyID - 1);
Eventually, if you set value immediately after you create widget even in your real application, you can use value property to set it up
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataTextField: "propertyName",
dataValueField: "propertyID",
dataSource: propertyTBL,
value: userPropertyID
}).data('kendoDropDownList');
EDIT: To make it complete, here is your modified code snippet
var userPropertyID = 3;
var propertyTBL = [
{"propertyID":"1","propertyName":"HOTEL"},
{"propertyID":"2","propertyName":"RESORT"},
{"propertyID":"3","propertyName":"GUEST HOUSE"},
{"propertyID":"4","propertyName":"HOME"},
{"propertyID":"5","propertyName":"MOTEL"}];
var dropdownlist = $("#dropdownlist").kendoDropDownList({
dataTextField: "propertyName",
dataValueField: "propertyID",
dataSource: propertyTBL
}).data('kendoDropDownList');
dropdownlist.select(userPropertyID - 1);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.115/styles/kendo.silver.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<style>*{font-family:Arial;font-size:11px;}</style>
<body>
Property Name:<input id="dropdownlist"/>
</body>
</html>
How can I programmatically add textbox controls at run time with Asp.net core using kendo UI?
( I don't want use kendo grid )
Not sure what you really want(your post strongly lacks of information), but I think you might try templates:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script id="textbox-template" type="text/x-kendo-template">
<input type="text" name="#= data.Name #" value="#= data.Value #">
</script>
<style type="text/css">
#fields-container input {
display: block
}
</style>
</head>
<body>
<div id="fields-container"></div>
<button>Add textbox</button>
<script>
let getValues = function getValues() {
return {
Name: "User[" + $('input').length + "]",
Value: "John Doe"
};
};
$('button').on('click', function() {
let template = kendo.template($('#textbox-template').html()),
dataValue = getValues(),
templateValue = template(dataValue);
$('#fields-container').append(templateValue);
});
</script>
</body>
</html>
Demo
As you said you don't want to use grid, I imagine that you want something like kendo does in grid that is to use templates in background. You can use a template alone without any widget at all. With the snippet above you can request data form server with ajax(in the getValues() function precisely) or grab the data from other sources.
I'm creating a mobile app using KendoUI in the Telerik AppBuilder. I created a blank view to hold my chart and then went in to start adding the code. I cannot get the chart to appear.
These are the scripts referenced in my index.html:
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="app.js"></script>
<script src="lib/progress/progress.all.min.js"></script>
<script src="dataProviders/progressDataProvider.js"></script>
Here is the code of my chart view:
<div data-role="view" data-title="Audit Tracker" data-layout="main" data- model="app.auditTracker" data-show="app.auditTracker.onShow" data-after-show="app.auditTracker.afterShow">
<div id="chart">
</div>
</div>
And here is the code in the associated JavaScript file:
'use strict';
app.auditTracker = kendo.observable({
onShow: function () {},
afterShow: function () {}
});
(function(parent) {
$("#chart").kendoChart({
title: {
text: "Audit Tracker"
},
series: [
{name: "Audits Completed", data: [5,10,15,3]}
],
categoryAxis: {
categories: ["January", "February", "March", "April"]
}
});
})(app.auditTracker);
What am I doing wrong here? This seems like it should be simple!
Thanks in advance for the help.
My problem was that I did not have the correct framework files referenced in my index.html.
Here are the files that I ended up using as far as the framework goes:
<script src="cordova.js"></script>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<link rel="stylesheet" href="kendo.common.min.css" />
<link rel="stylesheet" href="kendo.default.min.css" />
<link rel="stylesheet" href="kendo.mobile.all.min.css"/>