Questions on Kendo UI for jQuery Forum

5 answers

165 views

At the moment upload control displays as 'Select files..' grey button.
1)How could I change it to show as icon only lets say 100px by 100px ?
2)How could I change it to show as div with some text?

Upload

answered on 15 Dec 2014

0 answers

220 views

Kendo Script files needed for Listview

Hi,

I am using Listview in one of my asp.net mvc page. Data is getting loaded into listview by making an ajax call to the serevr. it is working fine when I have added kendo.all.min.js and kendo.aspnetmvc.min.js files on my page. kendo.all.min.js is 1.9 MB file and because of this my site is performing slow as browser sends a request to download this file first time.

I referred this page and http://docs.telerik.com/kendo-ui/install/custom#listview and found that for listview you need only some files to work with listview.

jquery.js
kendo.core.js
kendo.data.js
kendo.calendar.js (Editing feature)
kendo.popup.js (Editing feature)
kendo.datepicker.js (Editing feature)
kendo.userevents.js (Editing feature)
kendo.numerictextbox.js (Editing feature)
kendo.validator.js (Editing feature)
kendo.binder.js (Editing feature)
kendo.editable.js (Editing feature)
kendo.userevents.js (Selection feature)
kendo.selectable.js (Selection feature)
kendo.listview.js

I tired with above 14 files and kendo.aspnetmvc.min.js file;(i think this is for Ajax call) on my page.
Script is not executing at all and it fails on client side itself. Error message on browser console says Uncaught TypeError: undefined is not a function and source file it suggest is kendo.listview.min.js.

I want to add only required files and not one big file (kendo.all.min.js) to improve the performance.
For your reference attached is my cshtml page; so that you can have a look at the code.

Could someone help me on this?

Thanks,

ListView

asked on 15 Dec 2014

3 answers

164 views

[Solved] Setting Grid DataSource after creation causes duplicate filter controls

Hi there,

I've got a kendo grid that has a datasource set after the grid is created. This is causing a second filter row to be added among other things. This is completely undesired behavior. How can I resolve this?

JSFiddle:
http://jsfiddle.net/k3kc2pod/3/

Grid

answered on 15 Dec 2014

1 answer

207 views

Kendo less file implementation

Im trying to integrate kendos less-files into our own theme-handling in our webpage. I have a few starting variables that I want to implement, for example:

@primary-color: #99a4ae; /*gray*/
@secondary-color: #00b3e3; /*panton blue*/
@third-color: #c21e24; /*panton green*/

I then add the kendo.material.less to my lesscompiler, and then use these variables to replace the ones I feel are applicable in my case. In my first trial I wanted to make all the buttons into our secondary color so I was very pleased when i found the following line in kendo.material.less:

@button-background-color: #f9f9f9;

And so I changed this to:

@button-background-color: @secondary-color;

Then I start my project and realize that the spans as well as my kendo dropdownlists have gotten this color. Have I missunderstood the use of this less-variable, it seems to be affecting way to much, and when I look at the code, its later used in several places not applicable to the button:

/* Splitter */
@splitbar-background-color: @button-background-color;.

k-dropdown .k-state-default
{
    border-color: @button-border-color;
    .composite-background(@widget-gradient);
    background-position: 50% 50%;
    background-color: @button-background-color;
}

.k-dropdown,
span.k-colorpicker {
background-color: @button-background-color;
}

Could I get som feedback on the proper use of your less files and how I can use my varibles to only affect the background of the button? Files used in the project are kendo.material.ess and theme-template.less

General Discussions

answered on 13 Dec 2014

1 answer

183 views

Error with Kendo Template

Greetings,
I am getting this error: uncaught TypeError: Cannot read property 'replace' of undefined. I tried everything PLease HELP!
Below is the source code:
<html>
<head>
<title>>Factory Candidates screen</title>


<link href="https://prdeuonline.kidkraft.com/scripts/telerik/styles/kendo.common.min.css" rel="stylesheet">
<link href="https://prdeuonline.kidkraft.com/scripts/telerik/styles/kendo.rtl.min.css" rel="stylesheet">
<link href="https://tryarcllc.quickbase.com/db/biw8k3f8k?a=dbpage&pageID=64" rel="stylesheet">

<link href="https://prdeuonline.kidkraft.com/scripts/telerik/styles/kendo.dataviz.min.css" rel="stylesheet">
<link href="https://prdeuonline.kidkraft.com/scripts/telerik/styles/kendo.dataviz.default.min.css" rel="stylesheet">
<link href="https://prdeuonline.kidkraft.com/scripts/telerik/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="https://prdeuonline.kidkraft.com/scripts/telerik/js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://prdeuonline.kidkraft.com/scripts/telerik/js/cultures/kendo.culture.de-DE.js"></script>
<script src="https://prdeuonline.kidkraft.com/scripts/telerik/js/kendo.all.min.js"></script>
<script src="https://tryarcllc.quickbase.com/db/biw8k3f8k?a=dbpage&pageID=56"></script>
<script src="https://tryarcllc.quickbase.com/db/biw8k3f8k?a=dbpage&pageID=60"></script>
<script src="https://tryarcllc.quickbase.com/db/biw8k3f8k?a=dbpage&pageID=62"></script>
<script src="https://tryarcllc.quickbase.com/db/biw8k3f8k?a=dbpage&pageID=63"></script>
<script src="https://tryarcllc.quickbase.com/db/biw8k3f8k?a=dbpage&pageID=67"></script>
<script src="https://tryarcllc.quickbase.com/db/biw8k3f8k?a=dbpage&pageID=68"></script>

</head>
<body>

Please select factories from available factories list:

<table>
<tr><th>Available factories</th><th> </th><th>Selected factories</th></tr><th> </th>
<tr>
<td><div id="listA"></div></td>
<td><button id='right'> Add</button></td>

<td>
<script type="text/x-kendo-template" id="template">

# if (packout === false){#
<div class='item'> #: name #
<label class='chkbox'> <input id=#=uid# type='checkbox' onClick='packout(this.id)'>
packout?
</label>
</div>
# }else if(packout === true) { #
<div class='item'> #: name #
<label class='chkbox'> <input id=#=uid# type='checkbox' onClick='packout(this.id)' checked>
packout?
</label>
</div>
#}#

</script>
<div id="listB"></div>
</td>

<td><button id='left'>Remove</button></td>
</tr>
<tr>
<td><button id="saveButton">Save</button></td>
<td><button id="cancelButton">Close</button></td>
</tr>
</table>

<style>
#listA, #listB {
width: 400px;
height: 600px;
overflow: auto;
float: left;
margin-right: 30px;
border: 3px solid black;
border-radius: 3px;
}

.item {
margin: 5px;
padding: 5px;
text-align: left;
border: 2px solid #ccc;
border-radius: 5px;
}
.chkbox{
float:right;
}
</style>
</body>
</html>
//This is the portion of the script causing the error.
var _listB = $("#listB").kendoListView({
dataSource: [],//listB_DS
template: kendo.template($("#template").html()),
selectable: "multiple"
}).data("kendoListView");

ListView

answered on 13 Dec 2014

1 answer

807 views

Uncaught TypeError: Cannot read property 'replace' of undefined

I keep getting this error. The template names matches. Can you please look intog this

<body>

Please select factories from available factories list:

<table>
<tr><th>Available factories</th><th> </th><th>Selected factories</th></tr><th> </th>
<tr>
<td><div id="listA"></div></td>
<td><button id='right'> Add</button></td>

<td>
<script id="listBTemplate" type="text/x-kendo-template">

# if (packout === false){#
<div class='item'> #: name #
<label class='chkbox'> <input id=#=uid# type='checkbox' onClick='packout(this.id)'>
packout?
</label>
</div>
# }else if(packout === true) { #
<div class='item'> #: name #
<label class='chkbox'> <input id=#=uid# type='checkbox' onClick='packout(this.id)' checked>
packout?
</label>
</div>
#}#

</script>
<div id="listB"></div>
</td>

<td><button id='left'>Remove</button></td>
</tr>
<tr>
<td><button id="saveButton">Save</button></td>
<td><button id="cancelButton">Close</button></td>
</tr>
</table>

<style>
#listA, #listB {
width: 400px;
height: 600px;
overflow: auto;
float: left;
margin-right: 30px;
border: 3px solid black;
border-radius: 3px;
}

.item {
margin: 5px;
padding: 5px;
text-align: left;
border: 2px solid #ccc;
border-radius: 5px;
}
.chkbox{
float:right;
}
</style>
</body>
</html>
//Javascript snippet causing the issue:
var _listB = $("#listB").kendoListView({
dataSource: [],//listB_DS
template: kendo.template($("#listBTemplate").html()),
selectable: "multiple"
}).data("kendoListView");

Templates

answered on 13 Dec 2014

2 answers

218 views

Numerictextbox text color

Is it possible to change the color of the text in the numerictextbox?

NumericTextBox

answered on 13 Dec 2014

3 answers

468 views

Timeline Month view

Hello,
i am using your Scheduler in a Durandla - Bootstrap website.
I need to show a Month view but this is what i got ,see attached TelerikMonth1.png.
Is it possible to have a view like telerikMonth2 ? a range of 7- days or at least a header where all labels are shown

Scheduler

answered on 13 Dec 2014

10 answers

602 views

Browserify with Kendo UI

I'm trying to set up Kendo UI with Browserify. I'm require()ing the necessary kendo components from the downloaded build (in this case js/kendo.menu.min.js), but I'm getting

Uncaught TypeError: Cannot read property 'jQuery' of undefined kendo.menu.min.js:9

when I call

this.$el.kendoMenu();

I'm using browserify-shim and grunt-browserify to build. Do I need to shim this somehow?

General Discussions

answered on 13 Dec 2014

1 answer

195 views

Donut series label color

My data contains a color field, e.g. {"category": "Age", "value": 6, "color": "#ffd800" }

I want to use the color in the record to format the label text for that category.

This works (hard-coded):

.Labels(labels => labels.Color("#ff0000"))

These don't:

.Labels(labels => labels.Color("color"))
.Labels(labels => labels.Color("#= color #"))
.Labels(labels => labels.Color("#= dataItem.color #"))

I've confirmed that the color field is accessible.

How can this be done?

Charts

answered on 12 Dec 2014