Telerik Forums
Kendo UI for jQuery Forum
1 answer
283 views

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>

Viktor Tachev
Telerik team
 answered on 28 Oct 2020
1 answer
127 views
How to get the level With the totals in kendo Treelist
Nikolay
Telerik team
 answered on 28 Oct 2020
2 answers
282 views

Hi, Dev Team!

How get address by click at anything at map? (coordinates, country, city, street and house number).

Please, give some simple sample.

Preslav
Telerik team
 answered on 27 Oct 2020
3 answers
265 views

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.

Neli
Telerik team
 answered on 27 Oct 2020
5 answers
1.9K+ views

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.

Anton Mironov
Telerik team
 answered on 27 Oct 2020
1 answer
134 views
Hello All, I am preparing for some JQuery interview questions and I want to know what is the use of css() method in JQuery? As I know It facilitates to get one or more style properties but I want to know more about it. If anyone know, Please explain me.
Stoyan
Telerik team
 answered on 27 Oct 2020
5 answers
277 views

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?

Neli
Telerik team
 answered on 27 Oct 2020
3 answers
596 views
I can't figure out how i might fly out a split button programmatically.  My toolbar has an "export" function that is controlled with a split button.  I want the user to be able to click on any part of the button to expand the options.  However, the out of the box functionality is set up to only show the options when the user clicks directly on the little arrow of the split button.

I've got a way to do it, but it feels a bit messy.  What i'm doing right now is detecting the click on the main body of the split button, and then i have to set a timeout and fire both mouse down and mouse up on the arrow:


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);
 
}


Is there a better way to accomplish this same thing?
Aleksandar
Telerik team
 answered on 26 Oct 2020
4 answers
2.6K+ views

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);
        },
Dimitar
Telerik team
 answered on 26 Oct 2020
1 answer
277 views
Can you provide an example of utilizing the Upload configuration setting to send additional data?
Neli
Telerik team
 answered on 26 Oct 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?