Here is my KendoUI tree view, I want to add 'edit' icon to all the nodes and then give a url to it, twhich takes the id of the node, and goes to edit page,
<script type="text/javascript">
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
type:'POST',
url: rootURL + "Territory/AllTerritories",
dataType: "json"
}
},
schema: {
model: {
id: "ID",
hasChildren: "HasChildren",
children: homogeneous
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "Name",
dataValueField: "ID",
});
</script>
I can see the TreeView being generated, Please help!
in your code little changes like this
<script type="text/javascript">
var homogeneous = new kendo.data.HierarchicalDataSource({
transport: {
read: {
type:'POST',
url: rootURL + "Territory/AllTerritories",
dataType: "json"
}
},
schema: {
model: {
id: "ID",
hasChildren: "HasChildren",
children: homogeneous,
image :"url"
}
}
});
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "Name",
dataValueField: "ID",
dataImageUrlField: "image"
});
</script>
Use Kendo UI Template for that:
<script id="treeview-template" type="text/kendo-ui-template">
<a class='show-link' href='\#'><image src="/imageUrl"></a>
</script>
$("#treeview").kendoTreeView({
dataSource: homogeneous,
dataTextField: "Name",
dataValueField: "ID",
template: kendo.template($("#treeview-template").html()
});
http://demos.telerik.com/kendo-ui/treeview/templates
Related
This is the code which I am using to bind Multiselect to listbox in javascript. I am not where I am missing, I am not receiving the typed text in ajax call to get values. The method gets called in the controller side and the string parameter which I have returns null.
Implemented based on URL: https://demos.telerik.com/kendo-ui/multiselect/addnewitem
$("#Tags").kendoMultiSelect({
placeholder: "Select your tags",
dataTextField: "Name",
dataValueField: "Id",
autoBind: false,
maxSelectedItems: 5,
minLength: 3,
delay: 2000,
//filter: "startswith",
dataSource: {
transport: {
read: {
url: "/Support/Ticket/GetTags",
dataType: "json"
}
},
serverFiltering:true
}
});
Controller
public JsonResult GetTags(string text)
{
List<Tag> tags = _tagRepository.GetAll(text).ToList();
return Json(tags);
}
As mentioned here https://www.telerik.com/forums/server-filtering-not-working-as-expected#KXcqO6xHoE6NxGuL0T2ZoQ, I think you need to add return data option
$(document).ready(function () {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.kendoui.com/service/Northwind.svc/Products",
data: function () {
return {
text: $("#products").data('kendoMultiSelect').input.val()
};
}
}
}
}
});
});
How to restrict the check box check to 5 in Kendo UI grid.
I am using Kendo UI grid with check box. I want to restrict check box selection to 5
Please find the code attached
$(function () {
$("#grid").kendoGrid({
dataSource: {
pageSize: 10,
transport: {
read: {
url: "url",
dataType: "json"
}
},
schema: {
model: {
id: "Id",
fields: {
Id: {
type: "string"
},
Title: {
type: "string"
},
OrderDate: {
type: "date",
defaultValue: null
}
}
}
}
},
pageable: true,
persistSelection: true,
change: onChange,
columns: [
{ selectable: true, width: "50px" },
{ field: "Title", title: "Title" },
{ field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}", encoded: true }
]
});
});
function onChange(arg) {
//console.log("The selected product ids are: [" + this.selectedKeyNames().join(", ") + "]");
}
Thanks in advance
This is tested code according your requirement only difference is that checkbox column created with template.
Reference link : https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Selection/grid-selection-checkbox
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</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.rtl.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.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.115/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<button id="showSelection">Show selected IDs</button>
<script>
$(document).ready(function () {
//DataSource definition
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number",
validation: {
min: 0,
required: true
}
}
}
}
}
});
//Grid definition
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
//define dataBound event handler
dataBound: onDataBound,
toolbar: ["create"],
columns: [
//define template column with checkbox and attach click event handler
{ template: "<input type='checkbox' class='checkbox' />" },
"ProductName", {
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "100px"
}, {
field: "UnitsInStock",
title: "Units In Stock",
width: "100px"
}, {
field: "Discontinued",
width: "100px"
}, {
command: ["edit", "destroy"],
title: " ",
width: "172px"
}
],
editable: "inline"
}).data("kendoGrid");
//bind click event to the checkbox
grid.table.on("click", ".checkbox" , selectRow);
$("#showSelection").bind("click", function () {
var checked = [];
for(var i in checkedIds){
if(checkedIds[i]){
checked.push(i);
}
}
alert(checked);
});
});
var checkedIds = {};
//on click of the checkbox:
function selectRow() {
//// *********Prevent to select more than 5 record*************************
if(Object.keys(checkedIds).length>=5)
{
this.checked=false;
}
/// **********************************
var checked = this.checked,
row = $(this).closest("tr"),
grid = $("#grid").data("kendoGrid"),
dataItem = grid.dataItem(row);
checkedIds[dataItem.id] = checked;
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
}
//on dataBound event restore previous selected rows:
function onDataBound(e) {
var view = this.dataSource.view();
for(var i = 0; i < view.length;i++){
if(checkedIds[view[i].id]){
this.tbody.find("tr[data-uid='" + view[i].uid + "']")
.addClass("k-state-selected")
.find(".checkbox")
.attr("checked","checked");
}
}
}
</script>
</body>
</html>
Let me know if you have questions or concerns.
I have kendo dropdownlist on page which is fetching results from database as below. I also have a grid at the same page at same time which needs kendo dropdownlist value i.e the value from years dropdownlist but I am unable to get it at the same time.This is how I am following. Where I am doing wrong.
<script type="text/javascript">
var GridUrl;
$("#Years").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: {
dataType: "json",
url: "../../Service/GetYears"
}
}
}
});
$(document).ready(function () {
BindGridData();
GridUrl = '#Url.Action("Read", "Home")';
});
function BindGridData()
{
GridDataSource = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: GridUrl,
data: { year: $('#Years').val() }
}
},
schema: {
data: "Data", total: "Total"
}
});
}
Changing line to this
year: $('#Years').data("kendoDropDownList").value()
should do a trick. You need to get instance of kendoDropDownListwidget in order to get its value. You need to do so, because kendoDropDownListwidget value is not saved directly into html element
First of all, you need to move the initialisation of the kendoDropDownList inside the document ready function. If you don't you may end up refering to elements that are not loaded (yet).
The second change that should be done is how you get the value from the kendoDropDownList. Usually, you should refer to the widget instead of the DOM element: $('#Years').data("kendoDropDownList").value()
Finally, you didn't mention how and when your grid was binded but you may want to refresh the grid data if the user change the dropdown value. If it's the case, you may want to use change event of the dropdown to refresh the grid data.
$(document).ready(function () {
$("#Years").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: {
dataType: "json",
url: "../../Service/GetYears"
}
}
},
change: function(e) {
$("#YourGrid").data("kendoGrid").dataSource.read();
}
});
BindGridData();
GridUrl = '#Url.Action("Read", "Home")';
});
function BindGridData() {
GridDataSource = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: GridUrl,
data: { year: $('#Years').data("kendoDropDownList").value() }
}
},
schema: {
data: "Data", total: "Total"
}
});
}
I am facing an issue , below code bind the tree for first time , but not working binding the tree on second time :( but when i request third its bind again.
Means even request work .
please help me
Thanks in advance
Mobeen
// My Example Data
{"d":[{"_type":"ManageUPPRM.UserDocumentDTO","DocumentID":1804105651,"DocumentName":"Google Talk","hasChildren":true},{"_type":"ManageUPPRM.UserDocumentDTO","DocumentID":15854591701,"DocumentName":"desktop.ini","hasChildren":false},{"__type":"ManageUPPRM.UserDocumentDTO","DocumentID":15861429553,"DocumentName":"Jellyfish.jpg","hasChildren":false}]}
//Code
var datasource = new kendo.data.HierarchicalDataSource({
transport: {
read: function (options) {
var id = options.data.DocumentID;
if (typeof id == "undefined") {
id = "0"
}
$.ajax({
type: "POST",
url: "../ManageUPWebService.asmx/GetAllDocuments",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: "{DocumentID:'" + id + "'}",
success: function (result) {
// notify the data source that the request succeeded
options.success(result.d);
},
error: function (result) {
// notify the data source that the request failed
options.error(result.d);
}
});
}
},
schema: {
model: {
id: "DocumentID",
text: "DocumentName",
hasChildren: "hasChildren"
}
}
});
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
template: "<input type='checkbox' name='#=item.id#' data-text='#=item.DocumentName#' value='true' />"
},
loadOnDemand: true,
dataSource: datasource,
dataTextField: "DocumentName"
});
try this,
add a div with some id as the parent div of treeview
<div id="parent"><div id="treeview"></div></div>
and before binding the kendo tree
$("#treeview").remove();
$("<div id=\"treeview\" />").appendTo("#parent").kendoTreeView({
checkboxes: {
checkChildren: true,
template: "<input type='checkbox' name='#=item.id#' data-text='#=item.DocumentName#' value='true' />"
},
loadOnDemand: true,
dataSource: datasource,
dataTextField: "DocumentName"
});
I have a small requirement i.e initially i want to load the Local DataSource to DropDownList. while changing DropDownlist i want to load Server Side DataSource. If it is possible to do.
try this,
<div id='parentDiv'><div id='dropDown'></div></div>
<script type='text/javascript'>
$(document).ready(function() {
var data = [
{ text: "Black", value: "1" },
{ text: "Orange", value: "2" },
{ text: "Grey", value: "3" }
];
// create DropDownList from input HTML element
$("#dropDown").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
change: onChange
});
function onChange(e)
{
var serachActionUrl="url";
$.ajax({
url: serachActionUrl,
type: "POST",
data: { Id: Id},
traditional: true,
success: function (result) {
$('#dropDown').remove();
$("<div id='dropDown'/>").appendTo('#parentDiv').kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: result,
index: 0,
change: onChange
});
}
});
</script>
from the server sidesend the json data