Questions on Kendo UI for jQuery Forum

3 answers

140 views

Hi, I had an entire application wrote in flex and rails.
Using this approach, most of the work was done in the client (flex) side, most like a client-server application.
I really don't like the page-to-page style, and I want to know if using html5 and Kendo I will get a more flex style of programming?

General Discussions

answered on 27 Jan 2012

4 answers

268 views

Cascading DropDownLists

I'm attempting to create a series of cascading dropdowns by populating the second one from the first, the third from the second and so on, by using the change function. This works fine the first time a selection is made in each of the DropDownLists, but if I change a selection in the first one after the second DropDownList has been populated, the second DropDownList disappears to never return. Is there a way to accomplish this?

$("#algType").kendoDropDownList({

change: function () {

algType = $("#algType").data("kendoDropDownList").value();

$("#substn").kendoDropDownList({

dataTextField: "Substn",

dataValueField: "SubstnID",

dataSource: substnDataSource,

change: function () {

algType = $("#algType").data("kendoDropDownList").value();

substn = $("#substn").data("kendoDropDownList").value();

$("#devtyp").kendoDropDownList({

dataTextField: "Devtyp",

dataValueField: "DevtypID",

dataSource: devtypDataSource

});

}

});

}

});

DropDownList

answered on 27 Jan 2012

1 answer

75 views

Chart line doesn't respect visible: false

I'm trying to create a chart that doesn't show any axis or grid lines so I tried this:

valueAxis: {

line: { visible: false }

}

This doesn't hide the line, the only way I've found is to set the width to 0. It seems that the visible property does nothing which I think is a bug.
I've created a jsfiddle to show it: http://jsfiddle.net/slace/jKVRA/

Charts

answered on 27 Jan 2012

1 answer

90 views

Windows Authentication on IE8: Json Web Service --> DataSource --> AutoComplete

I encountered an error when attempting to configure an AutoComplete data source on an Intranet web site. The site uses Windows Authentication (ASP.Net MVC3). The AutoComplete only loaded data 1/10 of the time (roughly). Otherwise it would flicker a little, but no data would appear. Works fine in Chrome.

There is only one workaround that I found that made it work 100% of the time: Force IE-7 compatibility mode in the HTML. That workaround is not preferable.

Any ideas?

UPDATE: Removed references to a second workaround, which on further testing did not end up working.

Here's my HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>New Project</title>
<script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/Scripts/kendo.all.min.js"></script>
<link type="text/css" href="/Content/kendo.common.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/kendo.custom.min.css" rel="stylesheet"/>
</head>
<body>
<input id="ContactDescription" name="ContactDescription" type="text" value="" />

<script type="text/javascript">
$(document).ready(function () {
var contactAutoCompleteDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Ajax/EmployeesList",
dataType: "json",
data: {
showAll: function () {
return $('#showAll').is(':checked');
}
}
}
},
change: function (e) {
//alert('Total records: ' + contactAutoCompleteDataSource.total()); // This displays ~500
}
});
$('#ContactDescription').kendoAutoComplete({
minLength: 2,
filter: "contains",
dataTextField: "title",
dataSource: contactAutoCompleteDataSource
});
$('#showAll').click(function (e) {
contactAutoCompleteDataSource.read();
});
});
</script>
</body>
</html>

Data Source

answered on 27 Jan 2012

1 answer

134 views

Day View

Hi,

What is the easiest way to provide a view of a specific day to show scheduled events. I am not looking for a scheduler. No need to add events, drag-and-drop or anything related to a scheduler.

I have events in a database that I need to represent in an easy to understand format to the user.

Thanks!

Calendar

answered on 27 Jan 2012

1 answer

483 views

cell remains in edit mode when pressing enter key

When I configure my grid with navigatable: false and editable: true, then edit a cell, when I press the enter key I expect it to stop editing, but it does nothing (the cell remains in edit mode). When I have navigatable set to true, pressing the enter key when editing a cell stops editing. Is this a bug?

This is happens with "string" field types.

Awesome product by the way!

Grid

answered on 27 Jan 2012

1 answer

176 views

Error in _wrapper method for numeric textbox

The _wrapper method in the NumericTextbox looks like it has a bug where there is unreachable code, if the NumericTextbox
has been loaded previously.

Looking at the source and comparing it to the DatePicker source, which I know works, I can see the problem.

The source for DatePicker has this definition:

_wrapper: function() {

var that = this,

element = that.element,

wrapper;

wrapper = element.parents(".k-datepicker");

if (!wrapper[0]) {

wrapper = element.wrap(SPAN).parent().addClass("k-picker-wrap k-state-default");

wrapper = wrapper.wrap(SPAN).parent();

}

wrapper[0].style.cssText = element[0].style.cssText;

element.css({

width: "100%",

height: "auto"

});

that.wrapper = wrapper.addClass("k-widget k-datepicker k-header");

that._inputWrapper = $(wrapper[0].firstChild);

}

The source for NumericTextbox has this definition:

_wrapper: function() {

var that = this,

element = that.element,

wrapper;

wrapper = element.parent();

if (!wrapper.is("span.k-widget")) {

wrapper = element.hide().wrap('<span class="k-numeric-wrap k-state-default" />').parent();

wrapper = wrapper.wrap("<span/>").parent();

}

wrapper[0].style.cssText = element[0].style.cssText;

that.wrapper = wrapper.addClass("k-widget k-numerictextbox").show();

that._inputWrapper = $(wrapper[0].firstChild);

}

You may note that it only looks at the direct parent for the wrapper, when in fact the wrapper is on it's second parent, as indicated by last half of the code.

Also this bug may be replicated on http://demos.kendoui.com/web/numerictextbox/index.html by simply rerunning the command through a browser console

$("#numeric").kendoNumericTextBox();

If the code is supposed to be rerun-able then it should look similar to the following:

wrapper = element.parents('.k-numerictextbox');

if (!wrapper.is(".k-numerictextbox")) {

wrapper = element.hide().wrap('<span class="k-numeric-wrap k-state-default" />').parent();

wrapper = wrapper.wrap("<span/>").parent();

}

Now I don't know if the Kendo UI elements are all supposed to be rerun-able or not, I will post a separate thread about that as that is a more generic conversation.

NumericTextBox

answered on 27 Jan 2012

0 answers

157 views

How to Insert, Update, Delete MySQL Records..

Have a simple example that can give me.
Thanks

Grid

asked on 27 Jan 2012

4 answers

2.8K+ views

Dynamically Update the DataSource

Hi guys,

I was looking for a way to update the dataSource of the DropDownList dynamically, without recreating the control again. Take this code from your DropDownList example:

<input id="dropdownlist" />

<script type="text/javascript">

$(document).ready(function() {

$("#dropdownlist").kendoDropDownList([{text: "Item1", value: "1"}, {text: "Item2", value: "2"}]);

});

</script>

Do i need to recreate the dropdownlist input, or is there an easy way to replace the dataSource of the control and have it rebind?

Also, is there more documentation or complex examples coming before November, or will this be released in November along with the new controls?

Thanks,
Tony

DropDownList

answered on 26 Jan 2012

0 answers

115 views

Date Selected & Format in grid

Hi,



I need the ability to have the following:



1) Set the selected date of the datepicker in a grid.

2) Format the date picker and the date in the grid column.



Here is my code for you:



$(document).ready(function () {

//kendo.toString(new Date(), "MM/dd/yyyy")

dataSource = new kendo.data.DataSource({

serverPaging: true,

serverSorting: true,

batch: true,

pageSize: 100,

transport: { read: { url: "@Url.Action("Read", "Animals")", type: "POST" },

update: { url: "@Url.Action("Update", "Animals")", type: "POST" },

parameterMap: function (data, operation) {

alert(operation);

if (operation != "read") {

// post the Animals so the ASP.NET DefaultModelBinder will understand them:

var result = {};

//alert(data.models.length);

//alert(data.models);

for (var i = 0; i < data.models.length; i++) {

var animal = data.models[i];

for (var member in animal) {

result["animals[" + i + "]." + member] = animal[member];

}

return result;

}

}},

schema: { model: { id: "AnimalId", fields: { AnimalId: { editable: false, nullable: false }, Name: {editable: true, nullable: false, validation: { required: true }}, Description: {editable: true, nullable: false, validation: { required: false }},

FatherName: {editable: false}, MotherName: {editable: false}, BeginDate: {type: "date", editable:true, nullable:true, validation: { required: true }}, EndDate: {type: "date", editable:true, nullable:true, validation: { required: true }} }}},

success: function (data) { debugger; alert(data.d.Text); },

error: function (xmlHttpRequest) { debugger; alert("Sorry, we encountered the error: " + xmlHttpRequest.responseXML.text + " Please try again."); }

});

$("#grid").kendoGrid({

dataSource: dataSource,

scrollable:

{ virtual: true },

toolbar: ["create", "save", "cancel"],

sortable: true,

columns: [{ field: "Name" }, { field: "Description"}, { field: "BeginDate", title: "Date of Birth"}, { field: "EndDate", title: "Date of Death"},  { field: "FatherName", title: "Father"}, { field: "MotherName", title: "Mother"}],

editable: true

});

})



Thanks for your help!

Grid

asked on 26 Jan 2012