I'm beginner, so be gentle. Working with the demos to get a basic grid working on my localhost, but the json file is not reading correctly into the grid. The grid is built, but nothing. Help!!
<%@ page contentType="text/html; charset=iso-8859-1"
language="java"
isThreadSafe="true"
session="true"
isELIgnored="false" %>
<!DOCTYPE HTML>
<html>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content=no-cache http-equiv="Pragma">
<meta content=no-store http-equiv="Pragma">
<meta content=-1 http-equiv="Expires">
<script src="<%= request.getContextPath()%>/kendojs/jquery.min.js"></script>
<link href="<%= request.getContextPath()%>/kendocss/kendo.common.min.css" rel="stylesheet" type="text/css">
<link href="<%= request.getContextPath()%>/kendocss/kendo.default.min.css" rel="stylesheet" type="text/css">
<script src="<%=request.getContextPath()%>/kendojs/kendo.all.min.js"></script>
<title>Kendo Grid</title>
</head>
<body>
<b>Kendo Grid</b>
<div>
<kendo:grid name="grid" groupable="true" sortable="true" style="height:550px;">
<kendo:grid-pageable refresh="true" pageSizes="true" buttonCount="20">
</kendo:grid-pageable>
<kendo:grid-columns>
<kendo:grid-column title="City" field="City" width="150"
template="<div class='customer-photo' style='background-image: url(../resources/web/Customers/#:data.customerId#.jpg);'></div><div class='customer-name'>#: contactName #</div>">
</kendo:grid-column>
<kendo:grid-column title="Country" field="Country" width="150" />
<kendo:grid-column title="Country ISO3" field="Country_ISO3" width="100" />
<kendo:grid-column title="Pop. 1950" field="Pop1950" width = "100" />
<kendo:grid-column title="Pop. 1955" field="Pop1955" width = "100" />
<kendo:grid-column title="Pop. 1960" field="Pop1960" width = "100" />
<kendo:grid-column title="Pop. 1965" field="Pop1965" width = "100" />
<kendo:grid-column title="Pop. 1970" field="Pop1970" width = "100" />
<kendo:grid-column title="Pop. 1975" field="Pop1975" width = "100" />
<kendo:grid-column title="Pop. 1980" field="Pop1980" width = "100" />
<kendo:grid-column title="Pop. 1985" field="Pop1985" width = "100" />
<kendo:grid-column title="Pop. 1990" field="Pop1990" width = "100" />
<kendo:grid-column title="Pop. 1995" field="Pop1995" width = "100" />
<kendo:grid-column title="Pop. 2000" field="Pop2000" width = "100" />
<kendo:grid-column title="Pop. 2005" field="Pop2005" width = "100" />
<kendo:grid-column title="Pop. 2010" field="Pop2010" width = "100" />
<kendo:grid-column title="Pop. 2015" field="Pop2015" width = "100" />
<kendo:grid-column title="Pop. 2020" field="Pop2020" width = "100" />
<kendo:grid-column title="Pop. 2025" field="Pop2025" width = "100" />
<kendo:grid-column title="Pop. 2050" field="Pop2050" width = "100" />
<kendo:grid-column title="Location" field="Location" width = "100" />
</kendo:grid-columns>
<kendo:dataSource pageSize="10">
<kendo:dataSource-transport>
<kendo:dataSource-transport-read url="http://localhost:8080/KendoGrid/urban-areas.json" dataType = "json"/>
</kendo:dataSource-transport>
<kendo:dataSource-schema>
<kendo:dataSource-schema-model>
<kendo:dataSource-schema-model-fields>
<kendo:dataSource-schema-model-field name="City" type="string" />
<kendo:dataSource-schema-model-field name="Country" type="string" />
<kendo:dataSource-schema-model-field name="Country_ISO3" type="string" />
<kendo:dataSource-schema-model-field name="Pop1950" type="number" />
<kendo:dataSource-schema-model-field name="Pop1955" type="number" />
<kendo:dataSource-schema-model-field name="Pop1960" type="number" />
<kendo:dataSource-schema-model-field name="Pop1965" type="number" />
<kendo:dataSource-schema-model-field name="Pop1970" type="number" />
<kendo:dataSource-schema-model-field name="Pop1975" type="number" />
<kendo:dataSource-schema-model-field name="Pop1980" type="number" />
<kendo:dataSource-schema-model-field name="Pop1985" type="number" />
<kendo:dataSource-schema-model-field name="Pop1990" type="number" />
<kendo:dataSource-schema-model-field name="Pop1995" type="number" />
<kendo:dataSource-schema-model-field name="Pop2000" type="number" />
<kendo:dataSource-schema-model-field name="Pop2005" type="number" />
<kendo:dataSource-schema-model-field name="Pop2010" type="number" />
<kendo:dataSource-schema-model-field name="Pop2015" type="number" />
<kendo:dataSource-schema-model-field name="Pop2020" type="number" />
<kendo:dataSource-schema-model-field name="Pop2025" type="number" />
<kendo:dataSource-schema-model-field name="Pop2050" type="number" />
<kendo:dataSource-schema-model-field name="Location" type="string" />
</kendo:dataSource-schema-model-fields>
</kendo:dataSource-schema-model>
</kendo:dataSource-schema>
</kendo:dataSource>
</kendo:grid>
</div>
</body>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</html>
Hi, Dev Team!
How get address by click at anything at map? (coordinates, country, city, street and house number).
Please, give some simple sample.
url : https://dojo.telerik.com/@kjvjung/afUwuZah
Freight must be number
so good : Freight: { type: "number" }
but, I just want the Freight in tr.k-filter-row to be autocomplete, not numerictextbox.
How???
thank you.
I have a datepicker as part of a form. But while I can change the shown text manually, via the calender or through javascript, the internal value of the element seems to stay the same and I'm not sure what I'm doing wrong here:
In the cshtml:
<
input
asp-for
=
"ViewModel.Start"
style
=
"width: 8rem"
class
=
"order-field"
>
in the js:
const startDatepicker = $(
"#ViewModel_Start"
).kendoDatePicker({
focus: () => {
setItem(
this
.getAttribute(
'id'
),
this
.value())
},
change: onChange,
});
When I inspect the element in my browser, "value" is still set to what it was initialised with from the binding despite showing an other date.So this.value() always returns the initial value, not the shown value.
When I save the form though, the value on screen is saved.
Hello,
Is there any way to prevent certain records from being dragged under each other?
For example,
I have people as parents and tasks as children. I don't want to allow people to be children of other people and tasks to be children to other tasks. I also do not want to allow people to be dragged under tasks. However, I still want to be able to assign tasks to people.
Is there any current or planned support for this?
var
btnClicked = e.target.closest(
".k-split-button"
);
var
btnSplitParent = btnClicked.closest(
".k-split-button"
);
if
(btnSplitParent.length > 0 && !btnClicked.hasClass(
"k-split-button-arrow"
)) {
setTimeout(
function
() {
btnSplitParent.find(
".k-split-button-arrow"
).mousedown();
btnSplitParent.find(
".k-split-button-arrow"
).mouseup();
}, 100);
}
I have a remote data source which I use to populate the grid.
The grid has around 7000 rows and 30 columns, few rows also have a sub grid with maximum of two rows in each sub grid.
Using inbuilt filtering of grid based on a column takes about 3-5 seconds.
During that duration I want to show a spinning/loading icon.
I have the approach in the code below with no success.
The spinning/loading icon does not show up while filtering the grid and waiting for the grid to filter.
When I debug the page and put break points in JavaScript, I can see the loading icon on the grid as expected but its not there in normal use without the debugger open.
dataBound: function () {
kendo.ui.progress($("#grid"), true);
addSubgrid();
highlightLines();
disableLineItems();
if ((!isGridEditable)) {
makeGridReadOnly();
}
kendo.ui.progress($("#grid"), false);
},