Questions on Kendo UI for jQuery Forum

0 answers

103 views

I am trying to give my grid a column to display status like on/off. This is stored in my DB as 0/1.
A simple check mark for 1 or empty box for zero is perfect.
I feel sure this is simple and my google-fu is failing me.

Any help is appreciated.

PS: I am loving kendo, I have been tring to find a decent UI framework for a long time and have found that kendo is great.

Grid

asked on 17 Jul 2012

1 answer

98 views

What is equilvent of this

how to write this in kendo UI web ?

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

Data Source

answered on 17 Jul 2012

0 answers

342 views

A better MVVM example

I revised the MVVM example index.html that ships with Kendo UI Web. The form element is host to the kendo controls instead of the browser's controls. This example also includes sample validation logic. Hope this helps someone:

<!DOCTYPE html>
<html>
<head>
<title>Basic usage</title>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/kendo.web.min.js"></script>
<script src="../../content/shared/js/console.js"></script>
<link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../../styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<a href="../index.html">Back</a>
<div id="example" class="k-content">
<div class="current-state">
<h4>Current view model state:</h4>
<pre>
{
firstName: <span data-bind="text: ds.firstName"></span>,
lastName: <span data-bind="text: ds.lastName"></span>,
gender: <span data-bind="text: ds.gender.value"></span>,
agreed: <span data-bind="text: ds.agreed"></span>
}
</pre>
</div>
<div class="registration">
<form>
<ul>
<li><label for="fname">First Name:</label><input id="fname" name="fname" data-bind="value: ds.firstName" /></li>

<li><label for="lname">Last Name:</label><input type="text" id="lname" name="lname" required="required" pattern="^[S|s][A-Za-z].*$" validationmessage="Last name must begin with 'S'." data-bind="value: ds.lastName" /><span class="k-invalid-msg" data-for="lname"></span></li>
<li>
<label for="gender">Gender:</label>
<input id="gender" name="gender" type="text" required="required" data-bind="source: genders, value: ds.gender" validationmessage="Gender is required."></select><span class="k-invalid-msg" data-for="gender"></span>
</li>
</ul>

<div style="padding-top: 11px; margin: 0 auto;">
<input type="checkbox" id="agree" data-bind="checked: ds.agreed" /> <label for="agree">I have read the license agreement.</label><br />
<div style="padding-top: 4px; float: left;" >
<button id="btnRegister" data-bind="click: register, enabled: enableBasedOnAgree" class="k-button">Register</button>
</div>
</div>
</form>
</div>
<div class="confirmation" data-bind="visible: ds.confirmed">
Thank you for your registration, <span data-bind="text: ds.firstName"></span> <span data-bind="text: ds.lastName"></span>
<br />
<button data-bind="click: startOver">Start Over</button>
</div>
<script>
$(document).ready(function () {
var genderCollection = [{ description: "Guy", value: "Male" }, { description: "Girl", value: "Female"}];
var genderElement = ('input[id*="gender"]');

$(genderElement).width(($("#fname").width() + 2));
$(genderElement).css("margin-left", "-2px");
$(genderElement).kendoComboBox({ dataValueField: "value", dataTextField: "description" });

var viewModel = kendo.observable({
genders: genderCollection,
enableBasedOnAgree: function (e) {
if (this.get("ds.agreed") == true) {
$("#btnRegister").attr('class', 'k-button');
return true;
} else {
$("#btnRegister").attr('class', 'k-button k-state-disabled');
return false;
}
},
register: function (e) {
e.preventDefault();
this.set("ds.confirmed", true);
},
startOver: function () {
this.set("ds.confirmed", false);
this.set("ds.agreed", false);
this.set("ds.gender", { description: "Girl", value: "Female" });
this.set("ds.firstName", "Cyndi");
this.set("ds.lastName", "Watson");
},
ds: new kendo.data.DataSource({
schema: {
model: {
fields: {
firstName: {
type: "String",
defaultValue: "John"
},
lastName: {
defaultValue: "Doe",
type: "String"
},
gender: {
type: "String",
defaultValue: "Male"
},
agreed: {
defaultValue: false,
type: "Boolean"
},
confirmed: {
type: "Boolean",
defaultValue: false
}
}
}
}
})
});

kendo.bind($("#example"), viewModel);
viewModel.startOver();

// working example of how to get a viewModel value
//
// alert(viewModel.get("ds.firstName"));
var formValidator = $("#example").kendoValidator().data("kendoValidator");

// working custom validation rule inside of kendoValidator //
/*
var formValidator = $("#example").kendoValidator({
rules: {
lastName: function (input) {
var isValidated = true;
var lNameValue = input.val();

if ($(input).attr('name') == 'lname') {
if ((lNameValue != undefined) && (lNameValue.length > 0)) {
if (lNameValue.toLowerCase().indexOf("s") != 0) {
isValidated = false;
}
}
}

return isValidated;
}
}
}).data("kendoValidator");
*/

// working code required for validating kendoComboBox object input //
//
$("span.k-dropdown-wrap").focusout(function () {
console.log('Going to validate now upon focusout event ...');
formValidator.validate();
});

});
</script>

<div class="source code-sample">
<h4 class="code-title">View (old) source code:</h4>
<pre class="prettyprint">
<form>
<label>First Name: <input data-bind="value: firstName" /></label>
<label>Last Name: <input data-bind="value: lastName" /></label>
<label>Gender:
<select data-bind="source: genders, value: gender"></select>
</label>
<label><input type="checkbox" data-bind="checked: agreed" /> I have read the licence agreement</label>
<button data-bind="enabled: agreed, click: register">Register</button>
<div data-bind="visible: confirmed">
<h4>Confirmation</h4>
<div>
Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
<br /><br />
<button data-bind="click: startOver">Start Over</button>
</div>
</div>
</form>
</pre>
</div>
<div class="source code-sample">
<h4 class="code-title">View model source code:</h4>
<pre class="prettyprint">
var viewModel = kendo.observable({
firstName: "John",
lastName: "Doe",
genders: ["Male", "Female"],
gender: "Male",
agreed: false,
confirmed: false,
register: function(e) {
e.preventDefault();

this.set("confirmed", true);
},
startOver: function() {
this.set("confirmed", false);
this.set("agreed", false);
this.set("gender", "Male");
this.set("firstName", "John");
this.set("lastName", "Doe");
}
});

kendo.bind($("form"), viewModel);
</pre>
</div>

<style scoped>
.current-state {
float: right;
width: 200px;
margin: 60px 85px 0 0
}

.current-state pre {
font-size: 12px;
}

.registration h3 {
font-size: 2.5em;
color: #787878;
border-bottom: 1px solid #ccc;
}

.registration {
float: left;
clear: left;
width: 500px;
height: 131px;
margin: 30px 0 30px 30px;
padding: 60px 0 30px 30px;
background: url('../../content/web/mvvm/regForm.png') transparent no-repeat 0 0;
}

.registration ul {
list-style: none;
margin: 0;
padding: 0;
}

.registration li {
height: 28px;
vertical-align: middle;
color: #000;
}

.registration ul label {
display: inline-block;
width: 100px;
text-align: right;
padding-right: 5px;
color: #000;
}

.registration label {
color: #000;
}

.registration ul input {
border: 1px solid #ddd;
}

.registration button {
float: right;
margin-right: 85px;
}

.confirmation {
float: left;
clear: left;
width: 274px;
height: 65px;
margin: 30px 0 30px 30px;
padding: 20px 30px;
background: url('../../content/web/mvvm/confirm.png') transparent no-repeat 0 0;
text-align: center;
}

.code-details > ul {
list-style: none;
margin: 0;
padding: 0;
}

.code-details li
{
height: 26px;
line-height: 22px;
vertical-align: middle;
}

.code-details {
padding: 1em;
}

.source {
clear: both;
}
</style>
</div>
</body>
</html>

Dan

MVVM

asked on 16 Jul 2012

1 answer

131 views

Q2 Upgrade Issues

We recently upgraded to the latest version of Kendo, and the app that we are working on seems to have some rendering issues when changing tabs. To rule out my code being the issue I took the tab demo and it is having the same issue, see attached image. Demo app also freezes on me when I click through the tabs. Thoughts?

Image displays what is first seen, and after page refresh.

General Discussions

answered on 16 Jul 2012

1 answer

639 views

Refresh a chart with new DataSource?

I am needing to reset my datasource to grab parameters from my page to reload the chart. Is there a way to make this happen?

Here is my code for the chart currently. I need change the querystring that goes back on the url for the remote datasource based on page values.

$("#chart").kendoChart({

dataSource:

{

transport:{

read:{

url: "@Url.Action("BusinessUnitCompareChart")" + "?date=" + $("#DateFilter").val() + "&StructureId=" + "@ViewData["StructureId"].ToString()" + "&buids=" + "@ViewData["buids"].ToString()",

dataType:"json"

}

},

group:{ field:"Name"},

sort:{

field:"Name",

dir:"asc"

}

},

series:[{type:"column", field:"Count"}],

seriesColors:["#C81717","#8E908F","#0098DB"],

categoryAxis:{ field:"CategoryName"},

theme: "Metro",

title: {

text: "Open/ Aging/ Closed"

},

tooltip: {

visible: true

},

seriesClick: onSeriesClick

});

Charts

answered on 16 Jul 2012

0 answers

237 views

Loading Data into Dropdownlist...

Can someone please help me figure out how to load data into my dropdown and also trigger an event and pass the text value into the method so I can update my grid. I'm using KendoUI along with MVC3.

here is what I came up with but obviously I need some tweaking.

dropdownlist.
@(Html.Kendo().DropDownList()
          .Name("CodeManager")
          .DataTextField("ClassificationText")
          .DataValueField("ClassificationText")
.Events(e => e.Change("change"))
          .BindTo(ViewData["ClassificationItems"] as SelectList) //Not sure where the binding to my controller goes to or how it gets called
        )

Controller:
public ActionResult Change(string someValue = "")
        {
            ViewData["Category"] = "Types";
            ViewData["Classifications"] = new SelectList(Classifications.List, "ClassificationText", "ClassificationText", someValue );
            var codModels = new List<CodeModel>();
            ViewBag.SelectedCatgory = someValue ?? "Type";

            if (Request.HttpMethod == "POST")
            {
                var model = _codeRepository.Search(someValue ).ToModel();
                return View(model);
            }
            return View(codModels);
        }

Thanks
Dennis

DropDownList

asked on 16 Jul 2012

1 answer

109 views

Need ability to use input controls when in view mode

If you use an input control in a column (via row template or column template), the click event that tells the grid to switch to the editor template/function does not fire when you click directly on the input. I see the code in the kendo.grid.js that ignores when this is an input, but I question why. If you click to the left or right in the cell of input, the editor does show as I would expect.

Note that the default behavior of showing text until you click the text and then the editor shows will not pass with our users. It is not clear that you can click on this text and that it will become an input. This is just not intuitive. They have specifically asked for input boxes in the columns that are editable both at view and edit time.

To fulfill this requirement, I have had to resort to a pretty "hacky" workaround. However, this does work across all IE7-9, Chrome, and FF. I am creating an almost transparent div that covers the entire cell at view time. User thinks they are clicking the input at view time, but in reality they are clicking the overlay (which is not an input and therefore gets past the code in kendo.grid that ignores clicks for inputs).

Anyone have a cleaner suggestion?

Below is the fiddle showing my workaround. The first grid is default and requires that you click outside the input to get the editor. The second grid has my hack and you can click anywhere in the cell to get the editor.
http://jsfiddle.net/r2musings/HH9Qp/4/

Grid

answered on 16 Jul 2012

0 answers

220 views

Problem with JSONP data

Hy,

i have some troubles by recovering a remote JSON file and my list view.
Here's my code (index.html) :

<ul data-role="listview" data-style="inset" id="selogerlistview"></ul>

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

<img class="item-leftimg" src="${nom_article}"/>

<h3 class="item-title"><a>${nom_article}</a></h3>

<span class="item-bubble">${nom_article}</p>

</script>

And my JS :

function init_seloger() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://www.mylorraine.fr/api/jsonp_matth.php",

dataType: "jsonp",

contentType: "application/json; charset=utf-8",

type: "GET"

}

},

error: function(e) {

console.log(e);

},

schema: {

data: "categories_article"

}

});

$("#selogerlistview").kendoMobileListView({

dataSource: dataSource,

template: $("#listviewseloger").text(),

endlessScroll: false,

click: function(e) {

}

});

}

As a result, i have a parse error :( and a Javascript Syntax error (capture2.jpg)
When i change the JSON file with parenthesis, i have no more Javascrip label error, but a jquery parse error (capture1.jpg).

Please, someone could help me ?

ListView (Mobile)

asked on 16 Jul 2012

0 answers

145 views

Format Datetime

Am I missing something or is it not possible to format a SQL Server datetime field (eg: 2010-06-18T00:00:00) via kendo.toString()?

Grid

asked on 16 Jul 2012

4 answers

119 views

[Solved] Android tablet Splitview pane has sidescrolling

We have one pane in our split view that contains search results. However this pane, when looked at in an android tablet has side scrolling enabled for some reason. In iPads the behaviour is as expected and side scrolling is not enabled. The search pane has a listview of results and can be limitlessly scrolled to the right in the android tablet, making it seem like the results disappeared. Is this a bug with the beta version? Or is there another setting we should be setting?

SplitView

answered on 16 Jul 2012