Questions on Kendo UI for jQuery Forum

3 answers

1.0K+ views

How do I prevent a new Grid row from being created if current row is not valid

I'm using a grid in an MVVM environment. The grid that starts out with now rows. Once the Add New Row button is clicked the grid adds a row but the user can keep clicking the button and add new rows without any validation on existing rows. How can I either disable the New Row button, perform validation on the current row before adding a new row or client side validate all rows before trying to update to the server. I don't care if a user wants to add several rows and then edit the columns before saving the changes back to the server but I need to validate all required fields first.

Grid

answered on 09 Jan 2014

1 answer

278 views

Kendo grid and kendo window - creating custom kendo observable for the kendo window

Hello,

We are currently working on a kendo web project where we need to be able to have a button on a grid that opens a kendo modal window and then creates a custom viewmodel to be consumed by the current kendo window that can be passed into another kendo window. However, I can't seem to find a way to bind a ViewModel into the kendo window. Any help would be appreciated. Here is my code:

The problems that I know about are:

I don't know where to bind the observable to the window.
How to pass the same observable from window to window.

Thanks,

Colin

<!DOCTYPE html>

<html>

<head>

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

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

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

<script type="text/javascript" src="jquery.min.js"></script>

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

<script type="text/javascript" src="bootstrap.min.js"></script>

</head>

<body>

<div id="gridModal"></div>

<div id="transaction"></div>

</body>

</html>

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

<div>

Current Transaction Fee

</div>

<div>

<input id="locationFeeAmount" data-bind="value: locationFee">

</div>

<a id="toModal2" type="button" class="k-button k-button-icontext" onclick="showSecondModal();">To Modal 2</a>

</div>

</script>

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

<div>

Cuurent Transaction Fee:

</div>

<div>

<input value=#=locationFee #>

</div>

<button class="k-button" id"toModal2"></button>

</div>

</script>

<script>

$(function () {

var locationFeeAdjustments = [{

"CustomerName": "Fred Flinstone",

"CustomerNumber": 123456234,

"CustomerTransactionNumber": 2323423456789,

"RepName": "Bugs Bunny",

"CustomerBill": 34454.55,

"locationFee": 89.22,

"testField": "Bugs"},

{"CustomerName": "Joe Smith",

"CustomerNumber": 123434456,

"CustomerTransactionNumber": 23456234556789,

"RepName": "Jack Smith",

"CustomerBill": 34454.55,

"locationFee": 89.22,

"testField": "Jack"

}];

$("#gridModal").kendoGrid({

dataSource:{

data: locationFeeAdjustments,

schema: {

model: {

id: "Id",

fields: {

CustomerName: { type: "string"},

CustomerNumber: { type: "number"},

CustomerTransactionNumber: { type: "number"},

RepName: { type: "string"},

CustomerBill: { type: "string"},

locationFee: { type: "string"}

}

},

pageable: true,

height: 430,

toolbar: ["create"],

columns: [

{ field: "CustomerName", title: "Customer Name"},

{ field: "CustomerNumber", title: "Customer Number"},

{ field: "CustomerTransactionNumber", title: "Customer Transaction Number"},

{ field: "RepName", title: "Officer Name"},

{ field: "CustomerBill", title: "Bill Due"},

{ field: "locationFee", title: "Location Fee"},

{ command: {text: "Waive Location Fee", click: showTransactionModal}}],

editable: "inline",

save: function () {

this.refresh();

}

});

wnd = $("#transaction")

.kendoWindow({

title: "Transaction Fee",

modal: true,

visible: false,

resizable: false,

width: 300

}).data("kendoWindow");

detailsTemplate = kendo.template($("#template").html());

function showTransactionModal(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

kendoWindowViewModel = setViewModel(dataItem);

wnd.content(detailsTemplate(kendoWindowViewModel));

console.log(kendoWindowViewModel);

wnd.center().open();

};

});

function setViewModel(dataItem){

var kendoWindowViewModel = kendo.observable({

CustomerName: dataItem.CustomerName,

CustomerNumber: dataItem.CustomerNumber,

CustomerTransactionNumber: dataItem.CustomerTransactionNumber,

CustomerBill: dataItem.CustomerBill,

locationFee: dataItem.locationFee,

Approver: "",

AdjustmentAmount: ""});

return kendoWindowViewModel;

}

function showSecondModal(){

console.log('hit');

console.log(kendoWindowViewModel);

}

</script>

MVVM

answered on 09 Jan 2014

6 answers

375 views

IE 11 in Windows 7 not displaying Grid Properly

We've built a Kendo UI grid report that works fine with Chrome, Firefox, Safari(windows), and IE11 using Windows 8.1 pro,
JQuery 1.9.1, and Kendo UI 2013.3.119.

There is a problem displaying the Grid using IE 11.0.2 with Windows 7, JQuery 1.9.1, and Kendo UI 2013.3.119.

Can you repeat this problem? Any solutions to this problem?

Grid

answered on 09 Jan 2014

6 answers

198 views

Change default categoryAxis labels and other chart formaters

Hi,

we are using several charts in our application. Due to internatiolaisation we want to change the label formatters for dates and other automatically rendered values.

As we don't want to edit every single chart instance by hand, we are looking for a way to set the default formatters and renderers globally.

How can we do it? Why ist it not described in the culture packages?

Thanks

Charts

answered on 09 Jan 2014

3 answers

252 views

Grid Filter

I have a search form beside the grid and when someone does a search I need it filter the grid. Is the below code how I would accomplish this or is this only a client-side solution? The filtering will happen on the server side. If the below code is also used server side filtering, how do I interpret the querystring on the GET request?

this.submitSearch = function () {

dataSource.filter(

{ field: "FirstName", operator: "eq", value: $('FirstName').val() },

{ field: "LastName", operator: "eq", value: $('LastName').val() },

{ field: "Email", operator: "eq", value: $('Email').val() },

{ field: "Phone", operator: "eq", value: $('Phone').val() },

{ field: "ReservationDate", operator: "eq", value: $('ReservationDate').val() }

);

}

Grid

answered on 09 Jan 2014

0 answers

90 views

Adding a sample project with a tabstrip and some grids and client templates.

I was figuring out how to work better with the TabStrip, and thought I would upload the project I worked on in case anybody else might find it useful.
This is a visual studio 2013 project.

TabStrip

asked on 08 Jan 2014

1 answer

169 views

Donut chart animation not working when paasing only one record ?????

I am using kendo ui Donut chart to display category and its
value on Donut chart.

When there is 5
category data in “Model.ChartDataList”
the Donut chart animation is working fine.
But when it receive only 1 category data in “Model.ChartDataList” the Donut chart animation is not working.

Is there any way to slow the speed of animation of Donut
chart ?

How can I control the animation of Donut chart ?

And why it is not animating when there is only 1 category data in “Model.ChartDataList”.

Class ChartData{

public string CategoryName {get;set;}
public int Value {get;set;}

}

Class donutViewModel{

public List< ChartData> ChartDataList {get;set;}

}

@(Html.Kendo().Chart(Model.ChartDataList)
      .Name("Chart")
      .Legend(legend => legend.Visible(false))
       .Title(title => title.Font("Bold 12px Calibri").Text("CHART"))

      .Tooltip(tooltip => tooltip
                          .Visible(true)
                          .Template("${category}-${value}%")
                          .Format("{0}%")

      )
            .Series(series =>
          {
                 series.Donut(m => m.Value,m => m.CategoryName);
            })
)

Charts

answered on 08 Jan 2014

7 answers

175 views

Layout issue

Dear Sir,

I use kendo with phonegap / IOS
When I touch any Kendo's input box, then push it up or down, the Main Layout included footer or header will be move up or down together.

Thanks
Jack

General Discussions

answered on 08 Jan 2014

1 answer

474 views

Issue with setting checked state on tree view nodes

Hi,

I have a treeview bound to a hierarchical data source and it all loads fine

var treeview = $("#tree").kendoTreeView({

dataSource: treeData,

dataTextField: "Name",

checkboxes: {

template: "<input type='checkbox' name='checkedFiles[#= item.id #]' value='#= item.id #' #if(item.IsChecked){# checked #}#/>"

},

// listen for item selection

select: function (e) {

// don't let the item be selected

e.preventDefault();

$(':checkbox:first', $(e.node)).click();

}

}).data("kendoTreeView");

The issue is that I am using a template to set the checked flag on the check box if the datasource says the item is checked. The generated HTML shows the checked flag in the correct place for the relevant items, however the checkbox is either not checked, or parent items are checked when I don't want them to be

I think the issue is that on the data source, I am using the requestEndHandler to expand all nodes as per the documentation:

function requestEndHandler() {

setTimeout("expandNodes()");

};

function expandNodes() {

$("#tree").data("kendoTreeView").expand(".k-item");

};

How can I prevent the expanding of the nodes from messing up my check box state setting?

Many thanks

TreeView

answered on 08 Jan 2014

3 answers

40 views

Wrong icons in BlackBerry

Hello,

i used follwing code in out layout ...

<footer data-role="footer">

<div data-role="tabstrip">
<a data-icon="search" data-rel="external" href="/Search">Suchen</a>
<a data-icon="recents" data-rel="external" href="/Calendar">Termine</a>
<a data-icon="contacts" data-rel="external" href="/Contacts/MyContacts">meine Aktivitäten</a>
</div>
</footer>

<script type="text/javascript">
// Initialize a new Kendo Mobile Application
var app = new kendo.mobile.Application($(document.body), { platform: "blackberry" }); // ohne Angabe einer Plattform wird das Design automatisch anhand des User-Agents ausgewählt
kendo.culture("de-DE");
</script>

Everything works fine in visual studio.
After publishing the mobile website .... all data-icons use chinese icons.

How do i change the culture of used data-icons ?

Regards

Jürgen Meyer

General Discussions

answered on 08 Jan 2014