Questions on Kendo UI for jQuery Forum

2 answers

124 views

I have an area type stock chart showing three series. I am trying to set the colors for the series, but it is not showing my colors. It seems that it takes the last series color I specify, it approximates it (badly, pinkish color instead of red), and then approximates the other two based on the last one, not based on the specified values.
Attached is the image showing the colors I am getting, instead of plain blue, yellow, and red.

What is happening?

$stockChart.kendoStockChart({

theme: global.app.chartsTheme,

renderAs: "svg",

dataSource: loanInterestDataSource,

title: {

position: "top",

text: "The Boeing Company (NYSE:BA)"

},

chartArea: {

background: "",

width: $(window).width(),

margin: app.emToPx(1)

},

seriesColors: ["#0000ff", "#ffff00","#ff0000"],

dateField: "Date",

series: [

{

type: "area",

field: "Frnt"

},

{

type: "area",

field: "Intr"

},

{

type: "area",

field: "Fees"

}

],

navigator: {

series: {

type: "area",

field: "Intr"

}

});

Charts

answered on 20 May 2014

3 answers

198 views

NumericTextBox , RTL spinners off still show a spinner button.

help.

there is a problem I RTL and Spinners off for NumericTextBox. im using the lest version on Kendo UI.
see attach image:
the code:

<head>

<title>RTL Kendo Test:</title>

<script src="js/jquery-1.11.1.min.js"></script>

<script src="js/kendo.all.2014.1.318.min.js"></script>

<link href="/Css/kendoui/kendo.common.core.min.css" rel="stylesheet" />

<link href="/Css/kendoui/kendo.blueopal.min.css" rel="stylesheet" />

<link href="/Css/kendoui/kendo.rtl.min.css" rel="stylesheet" />

</head>

<body>

<div id="example" class="k-content">

<div class="demo-section k-rtl">

<h2>RTL : spinners: false</h2>

<input id="numerictextbox" />

</div>

<script>

$(document).ready(function () {

$("#numerictextbox").kendoNumericTextBox({

spinners: false

});

</script>

</div>

</body>

NumericTextBox

answered on 20 May 2014

3 answers

704 views

Force Reload with app.navigate

I am trying to voce a reload of an html page when calling app navigate.

I build a html file dynamically on local storage and it changes for various reasons.

I have tried the following:

var filepath = "/file/some.html?var=" + new Date().getTime();

app.navigate(filepath);

I have also put javascript in the header:

document.location.reload(true);

I have also put in the meta tags in the header for no-cache, etc. with no luck.

Only when I shut the app down and restart it does the cache seem to be cleared and the page reloaded.

Any help would be great.

Thanks in advance.

General Discussions

answered on 20 May 2014

1 answer

71 views

Grid & List view(mobile) problem

Hello all,

I'm facing couple issues using Grid and List view(mobile) in a same mobile view.

Issue #1:
When I add list view after grid, the list view will overlap grid if I setup mobile: "phone" or mobile: "tablet" setting on grid. When setting mobile is removed, everything works as expected. Is this behavior expected? What I'm doing wrong?

Demo: http://jsbin.com/nohux/1/

Issue #2:
This issue occurs when I'm using my Android 4.3.1(CyanogenMod 10.2.0-i9300) native browser. When I add to view first list view and after that Grid and use mobile: "phone" or mobile: "tablet" setting and editable: "popup" so the edit page will open on grid view, I'm not able to click edit or cancel buttons. I have not been able reproduce this issue with other browsers. However I can overcome this issue by setting mobile: false on grid, but when edit is open and I rotate my screen, the popup box will come off-centered.

Demo: http://jsbin.com/pizoq/1/

Thank you.

General Discussions

answered on 20 May 2014

4 answers

315 views

Tooltip opens in the wrong place when the marker is clicked and then corrects itself when the marker is clicked a second time.

function create_markers_array_from_data (oData) {

var max = oData.length,

i = 0,

markers_array = [];

for(; i < max; i++) {

markers_array.push({

location: [oData[i].lat, oData[i].long],

tooltip: {

template: "<div class='current_map_tooltip_container'><div id='wx-map-target"+oData[i].title+"' class='"+oData[i].content+"'></div></div>"

}

});

}

return markers_array;

I'm initializing a custom kendo widget into the tooltip.... The demo works as expected with text but I'm having an issue with the tooltip not opening in the correct place first time. The first time I click a marker the tooltip opens infront of the marker obscuring it, when I close the tooltip and click on the marker again It opens in the correct place (above the marker).

I assumed I could put anything I want into the tooltip markup but I'm obviously getting something wrong.. .can you recommend a solution that I could try (css or js) that may make the tooltip open in the correct place first time (and every time).

My initial thoughts are... because I'm initializing a widget using $('#widget').kendoMyCustomWidget(); on the marker being clicked the width and height may not be being taken into account first time round and on the second opening somethings happened that means the width and height is accounted for.

I am experimented with giving the .k-tooltip-closable a min-width and min-height but this does not seem to have an effect.

Any thoughts on where I'm going wrong would be much appreciated thanks.

Stephen

Map

answered on 20 May 2014

1 answer

546 views

How to call a js function on add new update button in grid

Hi

When i click on Add new in kendo ui grid , i see there is update and cancel button in grid , now i want to don't call any method on that update button click, instead of that i want to call an js function,

how can i do this?

please advice ,

Regards,
vinit

Grid

answered on 20 May 2014

1 answer

161 views

Read Parameters for Kendo crud Read Service.

Hi,

I am able to Read/Get the list of items with Crud Read. But I am not able to pass the parameter to get a list of items through crud Read.Please see below demo(writer.js ;line 304)

function BuildAgentGrid(model) {

var crudServiceBaseUrl = window.applicationBaseUrl + 'api/WebApi';

agentdataSource = new kendo.data.DataSource({

transport: {

read: {

url: crudServiceBaseUrl + "/GetAgentbyWriterIDData/",

data: { WriterModel: model },

contentType: "application/json"

},

parameterMap: function (options, operation) {

if (operation == "read") {

return kendo.stringify(options.WriterModel);

}

},

batch: true,

pageSize: 10,

serverPaging: true,

serverFiltering: false,

serverSorting: true,

schema: {

model: {

AgentID: "AgentID",

Name: "Name",

IsActive: "IsActive",

fields: {

AgentID: { type: "string" },

Name: { type: "string", validation: { required: true} },

IsActive: { type: "boolean" }

}

},

filter: {

"field": "IsActive",

"operator": "IsEqualTo",

"value": true

}

});

I am trying to send full object of writer(on edit) and take writerID to get list of Agents on popup agents tab.

//Web Api Controller

//param:Data :Expected full object of WriterModel on Edit as parameter

public List<Agent> GetAgentbyWriterIDData(Object Data)

{

//Get writerID from data object and pass writerID to get list of AgentList

//trying to return the Agent list based on writerID of WriterModel;

return null;

}

Thanks,
Chatrapathi Chennam

Grid

answered on 20 May 2014

1 answer

148 views

Validation Studying

At first, Thanks for kendo. it is used conveniently. but there are some ways I can't understand or I think it's not elegant.

1. $("#temp").kendoValidator().data("kendoValidator").validate() doesn't validate rules which I specify.
I add my rules in Validation to validate password and confirm password. when element loses focus, fantastic!!!! It does work. I really happily continue coding.

if( !$("#temp").kendoValidator().data("kendoValidator").validate() ){

return false;

}

when I submit data with AJAX. Oh no.. break down because I write different password in password input and confirm Password input. I realize that validate() don't use rules. I don't know why? The only reason I can find is rules need know the real <input> widget.

2. form submit.
I don't find some solutions. So I return to use form submit which likes:

<form>

<input name="username" required /> <br />

<button id="save">Save</button>

</form>

<script>

// attach a validator to the container

$("form").kendoValidator({

validate: function(e) {

console.log("valid" + e.valid);

}

});

</script>

it works. when I submit, e.valid validates rules. but it refresh web. Oh no, I don't want the way refreshes my web because I want to make SPA with AJAX. So I add onsubmit="return false" in <form>. but I think it is not elegant. I don't like it. If kendo can integrate these. it will be brilliant and elegant.

Best regards.

Validation

answered on 20 May 2014

1 answer

243 views

Initially selected tab (data-selected-index) not working

Hello,

I saw several related questions, but none of them have a working answer.

I have a tabstrip defined like this:

<div data-role="tabstrip" data-selected-index="1">
<a data-icon="home" href="/">Home</a>
<a data-icon="action" href="/ActionManager">Actions</a>
<a data-icon="search" href="/Search">Search</a>
</div>

I'm expecting "Actions" tab to be selected initially. But it is not. "Home" tab is always selected no matter what number I put into data-selected-index. Looks like this attribute is ignored.

Is selectedIndex working in tabStrip?
Is there any other way to select tab from HTML markup?

Thank you,
Alex

TabStrip (Mobile)

answered on 20 May 2014

1 answer

174 views

How to start a series as disabled?

I have 4 series on my chart, but I only want two of them visible by default (when loaded); the other two, I want available for the end user. I like how you can click on the series in the legend and hide it/ show it, but I cannot figure out how to have a particular series hidden by default.

Charts

answered on 20 May 2014