Questions on Kendo UI for jQuery Forum

3 answers

131 views

Use gradients or images instead of colors in charts

I'm looking for a way to replace the backgrounds in a bullet chart with gradients or images such as in the attachment.

Charts

answered on 08 Oct 2013

3 answers

159 views

Turn navigation off in header.

I have a grid using a customer filter that is appended to the thead. On a keydown event of the customer filter field, the focus is moved to first data field of the grid. How do I prevent the focus change?

Section of code in question;

var timeout;

var filter = { logic: "and", filters: [] };

var filterRow = $('<tr><td><input type="search" id="programCodeFilter" class="k-textbox" style="width:75px;"></td><td><input type="search" id="lenderProgramNameFilter" class="k-textbox" style="width:75px;"></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>')

detailGrid.data("kendoGrid").thead.append(filterRow);

detailGrid.find("input#programCodeFilter").keydown(function () {

var filterExpr = { field: "ProgramCode", operator: "startswith", value: "" }

var fc = 0;

if (filter.filters.length > 0) {

for (var i = filter.filters.length - 1; i >= 0; i--) {

if (filter.filters[i].field == 'ProgramCode') {

var rmFilter = filter.filters[i];

rmFilter.value = this.value;

fc++;

}

if (fc == 0) {

filter.filters.push(filterExpr);

}

} else {

filterExpr.value = this.value;

filter.filters.push(filterExpr);

}

clearTimeout(timeout);

timeout = setTimeout(function () {

detailGrid.data("kendoGrid").dataSource.filter([filter]);

}, 100);

});

Grid

answered on 08 Oct 2013

1 answer

78 views

Scheduler button

Hi:

I need to know how to put the style of a cancel button when entering an event, right now it is showing as a link. I'm using MVC Razor version:

If you see the attached file, the button "Cerrar" is not showing the style that is supposed to show.

Thanks

Johnny

Scheduler

answered on 08 Oct 2013

1 answer

277 views

Grid column heading does not change

Hi ,

I am totally new to Kendo UI . I was playing with Kendo WEB UI grid and have following code. Trying to change the column heading and for some reason its not working... I am using Json using Web API for datasource.

<!-- here is code --:
<!DOCTYPE html>

<html >
<head>
<title>Kendo UI</title>
<link href="Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-1.9.1.js"></script>
<script src="Scripts/kendo/2013.2.716/kendo.web.min.js"></script>

<script>
$(function () {

$("#employeesGrid").kendoGrid({
dataSource: new kendo.data.DataSource({

transport: {
read: "api/employees"
},
columns: [
{
field: "DOB",
title: "Date Of Birth"
},
{
field: "FirstName",
title: "First Name"
}
],
})
});
});
</script>
</head>
<body>
<div id="employeesGrid"></div>

</body>
</html>

Grid

answered on 08 Oct 2013

4 answers

208 views

ListView update issues

Hello,

Let me preface this question with the fact that we are very new to List Views and Kendo UI in general. We are developing our project with MVC and using the client side (non-server side wrapper) approach to the Kendo UI List Views. We pass JSON down to the view and render the List View with no problems. We can add list items fine as well. The only issue is when we try to update/delete a record we are not properly returning JSON back to our controller server side. I believe the issue is in our ParameterMap code:

I have tested to ensure that the JSON data in parameter map is valid for the record updated and picks up the change.

$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: 'Read',
dataType: 'json'
},
destroy: {
url: 'Destroy',
dataType: 'json'
},
create: {
url: 'Create',
dataType: 'json'
},
update: {
url: 'Update',
dataType: 'json'
},
parameterMap: function (data, operation) {
if (operation == "update") {
return kendo.stringify(data); //what to return here?
}
}
},
schema: {
data: 'Data',
model: {
id: 'LoanNumber',
fields: {
LoanNumber: 'LoanNumber',
PrimaryCifNumber: 'PrimaryCifNumber',
GrossLoanAmount: 'GrossLoanAmount',
Opit: 'Opit',
RefinanceAmount: 'RefinanceAmount',
LoanLeaseType: 'LoanLeaseType',
RepaymentType: 'RepaymentType',
LoanLeaseTermMonths: 'LoanLeaseTermMonths',
RepaymentFrequency: 'RepaymentFrequency',
PreApproval: 'PreApproval',
CollateralType: 'CollateralType'
}
}
}
});
var listView = $("#LineofCreditsListView").kendoListView({
selectable: true,
navigatable: true,
editable: true,
dataSource: dataSource,
template: kendo.template($("#template").html()),
editTemplate: kendo.template($("#editTemplate").html()),
}).data("kendoListView");

Our controller/Action Method for update is actually reached when committing the update but nothing is in the parameter request:

public void Update(JsonResult request)
{
//update DB
}

My question is - what is the standard way of passing in JSON to an action method for update? We want to stay away from the server side wrapper in using Kendo UI. We basically want to just pass JSON back and forth between the client and server. If you have a sample project that we could view that demonstrates a client side approach that would be great.

Thanks,
Justin

ListView

answered on 07 Oct 2013

3 answers

942 views

Problem with input type date in iOS

Hi

In my application I have a view that has a date type input, the view has an associated field model and is associated by binding to a model property. Code:

<div id="selectMenu" data-role="view" data-title="Emp-Suc" data-model="selectMenu_model">

<ul data-role="listview" data-style="inset">

<li>

<label>

Fecha Proceso

<input type="date" data-bind="value: processDate"/>

</label>

</li>

<li>

<i></i><a data-role="button" data-bind="click:submit" style="float: right;" data-icon="details" >Continuar</a>

</li>

</ul>

</div>

This is the model:

var selectMenu_model = new kendo.observable({

company: null,

branch: null,

processDate: "",

companies: function(){

dataConfigurationHierarchical.set("method","GetCompanies");

dataConfigurationHierarchical.set("params", { login: kendo.stringify(userModel.get("login"))});

return dataConfigurationHierarchical.getSource();

},

branches: function(){

dataConfigurationHierarchical.set("method","GetBranches");

dataConfigurationHierarchical.set("params", { login: kendo.stringify(userModel.get("login"))});

return dataConfigurationHierarchical.getSource();

},

submit: function(){

var cp = $("#company").data("kendoDropDownList").value();

var br = $("#branch").data("kendoDropDownList").value();

var pd = selectMenu_model.get("processDate");

//console.log("Compañia: " + cp + " Sucursal: " + br);

if(cp !== '' && br !== '' && pd !== ''){

app.navigate("views/menu.html");

}

},

});

The problem is when I want to get the value of the date field, I have clear that the documentation says that you get with model.get ("property") in my case would use selectMenu_model.get ("processDate") or this.get("processDate"). It is assumed that when you change the date changes the value in the model. I tried in the browser and it works fine, I can get the value, I tried it on Android 4.0 ICS and also worked well but I test in Safari iOS 5.1 and when I make the date change, the model do not change is that the value is null, as initialized. Forget the methods, that me is working well (companies, branches, submit) ..

I appreciate a response.

General Discussions

answered on 07 Oct 2013

2 answers

134 views

How to add Twitter Bootstrap badge to Text off PanelBar?

Hello,

I would like to add a Twitter Bootstrap badge to Text off PanelBar? I tried this, but it didn't work:

01.@(Html.Kendo().PanelBar()

02. .Name("NavigationBar")

03. .Items(panelBar =>

04. {

05. panelBar.Add().Text(@LayoutResource.Actions)

06. .Items(item =>

07. {

08. item.Add().Content("<a href=\"#\"><span class=\"badge pull-right\">42</span>Home</a>");

09. });

10. }

11. )

12. )

I'll be grateful for help. In atachments is a screen with this what I mean.

Damian

PanelBar

answered on 07 Oct 2013

1 answer

249 views

Update Pie chart when Kendo Grid changes

I have a simple Kendo grid with inline editing capabilities that I want to tie to a Pie chart.
Basically, when I update the value of a certain row[column] in the grid, I want the Pie chart
to reflect the change and redraw immediately. How can I do that?

The data for the grid is saved/added to a List<ProductViewModel> which has Name and Price properties.

Charts

answered on 07 Oct 2013

3 answers

91 views

Tab does not select when page local dataUrlField data is specified.

The example below illustrates a case in which tabs do not select when the dataUrlField is specified as a page local href such as '#content1'.
It seems like this case should work since the select event fires and the correct element is passed in. It would be ideal if there was a more reliable way to obtain access to the data element to which a tab is bound.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<link href="kendo.default.min.css" rel="stylesheet" />

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

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

<script>

$(function () {

var data = [{ Name: 'Tab 1', Url: '#content1' }, { Name: 'Tab 2', Url: '#content2' }];

$("#tabstrip").kendoTabStrip({

dataTextField: "Name",

dataUrlField: "Url",

dataSource: data,

select: function (el) {

//would be nice to have a reference to the data source data item here rather than relying on the item index.

var itemIndex = $(el.item).index();

$('.tabContent').hide();

$('#content' + itemIndex).show();

}

});

getSelectedTabIndex = function () {

return $("#tabstrip").data("kendoTabStrip").select().index();

}

$('#showSelectedTabIndex').click(function () {

//always returns -1

alert(getSelectedTabIndex());

});

</script>

</head>

<body>

1.) Click a tab <br />

2.) Click the Show Selected Tab Index button.<br />

<br />

The tab is not visually selected and the value returned for the selected index is -1.

<br /><br />

<button id="showSelectedTabIndex">Show Selected Tab Index</button>

<div id="tabstrip"></div>

<div id="content0" class="tabContent" style="display:none;">Content 1</div>

<div id="content1" class="tabContent" style="display:none;">Content 2</div>

</body>

</html>

TabStrip

answered on 07 Oct 2013

12 answers

188 views

swipe issue in ios 7

In ios7, when I swipe left to right it navigates to the previous page. This is breaking my single page app. What is the correct way to handle this navigation when using kendo mobile and ios7 safari?

Are there any guidelines or workarounds?

Application

answered on 07 Oct 2013