Questions on Kendo UI for jQuery Forum

1 answer

273 views

Datasource Update not triggering

This is my template:

editTemplate: " <tr>\

<td class='name'>\

<input type='text' value='#: PageName #' class='k-textbox small' />\

</td>\

<td class='action'>\

<a href='\\#' class='icon icon-ok k-update-button' title='Save Changes'></a>\

</td>\

<td class='action'>\

<a href='\\#' class='icon icon-remove k-cancel-button' title='Cancel'></a>\

</td>\

</tr>",

When I have firebug open and I click save changes (k-update-button) I get no ajax call...my DS defines it, and the GET\DELETE work fine...any idea what it might be???

favsList.kendoListView({

dataSource: new kendo.data.DataSource({

transport: {

read: {

url: f.baseUrl + $medportal.User.UserName,

dataType: "json",

type: "GET"

},

update: {

url: f.baseUrl + "/Update",

dataType: "json",

type: "PUT"

},

destroy: {

url: function (data) {

var url = f.baseUrl + $medportal.User.UserName + "/" + data.FavouriteID;

return url;

},

dataType: "json",

type: "DELETE"

}

},

batch: false,

pageSize: 10,

schema: {

model: {

id: "FavouriteID",

fields: {

FavouriteID: { editable: false, nullable: true },

Index: { type: "number" },

PageName: { type: "string" },

Url: { type: "string" }

}

}),

template: kendo.template(f.rowTemplate),

editTemplate: kendo.template(f.editTemplate),

remove: function (e) {

var fav = e.model;

if (fav.FavouriteID === f.currentfavoriteid) {

//Reset the Add Button

f.setAddState();

}

}).data("kendoListView");

ListView

answered on 08 Oct 2013

3 answers

157 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

187 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

95 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

306 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

236 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

1.0K+ views

[Solved] 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

165 views

[Solved] 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

282 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

113 views

[Solved] 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",