Questions on Kendo UI for jQuery Forum

1 answer

213 views

[Solved] Error occurs while closing extended kendoUI Window widget

Hi,
I am trying to extend kendoUI's Window widget.
The widget extends and displays a window upon call. But when I try to close that window, error appears on console and window does not also close.

Please check the JS Fiddle at following URL:
http://jsfiddle.net/nxhPW/19/

On Firefox console error shows as following:
TypeError: K(b) is undefined kendo.web.min.js (line 8)

On Chrome console error shows as following:
Uncaught TypeError: Cannot read property 'options' of undefined kendo.web.min.js:8

Note: If you uncomment the close event handling code in my fiddle, it would work as expected.

Please can anybody tell me, what is wrong with this or is this a bug ?

Thanks

Window

answered on 12 Sep 2012

9 answers

2.0K+ views

[Solved] Menu Styling

I need to style the menu to fit int the bar I have which currently has a height of 43 pixels, so the menu should not be bigger then that, and sub menus should follow that as well. Also the text seem to stay in place when I attempt to override k-menu and k-item, the cause the whole thing to nonaligned.

What css classes do I have to override the height so I don't have that problem anymore?

Menu

answered on 12 Sep 2012

3 answers

267 views

[Solved] KendoWindow not displaying in IE8

Hi,

I am having a problem with kendoWindow and IE8: the kendoWindow don't show on screen.

My application works fine in all other browsers including IE7. But in IE8 the kendoWindow simply do not appear on screen. I tested it in non-modal and modal mode, the problem is the same.
In modal mode, only the overlay appears, in the non-modal mode, nothing happens...

I created a simple example: http://jsfiddle.net/8rzay/5/

KendoVersion: CDN version 2012.2.710
OS: Windows 7
Browser: tested with IE8 && with IE9 using the IE8 browser/document mode
Jquery: 1.8.0 && 1.8.1

Window

answered on 12 Sep 2012

1 answer

160 views

Pager not working after second grid.read() in IE

Again I am behind a corporate firewall so I have a video demonstrating my site in both IE and chrome...

http://www.screencast.com/t/GfampffDwcE

After the user makes a selection from the dropdowns the grid is re-read but on IE it breaks paging and everything else like heirachy sorting filtering etc....

It's beyond aggravating...

For you Kendo reps... I can start a online meeting and invite you to view this live and to look over the source...

I haven't filed a support request yet. but if nothing can be gleaned from the demo by the user base I will

Also at the end IE has a serious rendering issue when I hover over items in the grid

Grid

answered on 12 Sep 2012

0 answers

153 views

Populating data from Datasource to ComboBox

Hello Everyone,
I'm new to Kendo UI. I've tried getting the data by giving the values in the datasource of kendoComboBox.
But I need to get the values from Sql Server 2008 database and display in the Kendo UI Combo Box.

Say my database is like

Table Name:Fabrics
----------------
Fab Name
----------------
Cotton
Polyester
Rib Knit
Nylon

Please Help
Thanks,

ComboBox

asked on 12 Sep 2012

2 answers

791 views

kendo is undefined

I'm not sure what is going on. I'm doing an MVC4 app with VS2012. My ready function defines a new datasource, then a grid. When I run the app in Chrome, it works fine. When I run my app in IE9, it throws an error on the code that defines the datasource with "kendo is undefined".

Here is my code:

//define the dataSource for the grid

searchVM.dataSource = new kendo.data.DataSource({

schema: {

model: {

fields: {

Number: { type: "string" },

DateReceived: { type: "date" },

County: { type: "string" },

Media: { type: "string" }

}

},

pageSize: 10,

change: function (e) {

//refresh the grid

var grid = $("#searchResults").data("kendoGrid");

grid.refresh();

}

});

Why does it work in Chrome, but throw the error in IE9? Is it some setting in IE that's causing trouble for me?

General Discussions

answered on 12 Sep 2012

0 answers

406 views

Kendo UI Grid custom PopUp

Hi
i am using KendoUi Grid to display the data on my page from a datasource .
Here is the Code for the same .

@using Kendo.Mvc.UI

@model IEnumerable<Ami.WebRole.Models.FacilityGroupModel>

@{

ViewBag.Title = "Manage Facility Group ";

}

<script type="text/javascript">

$(document).ready(function () {

$("form.k-edit-form").kendoValidator();

});

</script>

<style type="text/css">

.k-widget.k-window

{

width: 450px;

height: 250px;

}

</style>

<h2 style="color:Maroon;">Manage Facility Group</h2> <hr />

<table>

<td>

<td align="center">

<table>

<tr>

<td align="left">

@using (Html.BeginForm("ManageFacilityGroup", "ManageFacilityGroup", FormMethod.Get))

{

<fieldset>

<table>

<tr>

<td>

<p>

<span><b> Name:</b></span>

</p>

</td>

<td>

<p>

@(Html.Kendo().AutoComplete()

.Name("FacilityGroupName")

.DataTextField("FacilityGroupName")

.Filter("Contains")

.IgnoreCase(true)

.DataSource(source =>{

source.Read(read =>

{

read.Action("GetFacilityName", "ManageFacilityGroup")

.Data("onAdditionalData");

})

.ServerFiltering(true);

})

)

<script type="text/javascript">

function onAdditionalData() {

return {

text: $("#FacilityGroupName").val()

};

}

</script>

</p>

</td>

<td align="left">

<span><b>Status:</b></span>

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("chkStatus")

.DataTextField("Text")

.DataValueField("Value")

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "All",

Value = "-1"

},

new SelectListItem() {

Text = "Active",

Value = "true"

},

new SelectListItem() {

Text = "InActive",

Value = "false"

}

})

.Value("1")

)

</td>

<td align="right">

<p>

<input id="Submit1" type="submit" value="Search" />

</p>

</td>

</tr>

</table>

</fieldset>

}

</td>

</tr>

<tr>

<td align="center" >

@(Html.Kendo().Grid(Model)

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.CustomerName).HtmlAttributes(new { style = "text-align:left;" }).Width(150);

columns.Bound(p => p.FacilityGroupName).HtmlAttributes(new { style = "text-align: left;" }).Width(170).Title("Facility Group Name");

columns.Bound(p => p.StatusName).HtmlAttributes(new { style = "text-align: center;" }).Width(90).Title("Status");

columns.Bound(p => p.CreationDate).HtmlAttributes(new { style = "text-align: right;" }).Width(110).Format("{0:MM/dd/yyyy}");

columns.Command(command => { command.Edit(); }).Width(85);

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FacilityGroupPopUp").Window(window => window.Title("Edit Facility Group").Name("editwindow1")))

.Scrollable()

.Pageable(p => p.PageSizes(true))

.Sortable()

.DataSource(datasource => datasource

.Ajax()

.ServerOperation(false)

.Model(model => model.Id(p => p.FacilityGroupId))

.Read(read => read.Action("ManageFacilityGroup", "ManageFacilityGroup"))

.Update(update => update.Action("Update", "ManageFacilityGroup"))

)

</td>

</tr>

</table>

</td>

</table>

As u can u see i am using a Custom Pop Up editor to edit the records on my Grid.
Here is my Custom Pop Up

@model Ami.WebRole.Models.FacilityGroupModel

@using Kendo.Mvc.UI

<fieldset>

@* <legend>Edit Facility Group</legend>*@

<table border="10" cellpadding="0" cellspacing="0" style="border-color:Black; width:350px;" >

<tr>

<td colspan="2">

@if (ViewData["FailureMessage"] != null)

{

<div id="divFailureMsg" style="height:25px; background-color:#fffeff;visibility:visible ;color:Red" align="center">

@Html.Label(ViewData["FailureMessage"].ToString())

</div>

}

else

{

<div id="divFailureMsg" style="visibility:hidden; height:0px;">

</div>

}

</td>

</tr>

<tr>

<td style="width:150px;">

@Html.LabelFor(model => model.CustomerName)

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("CustomerName")

.DataTextField("CustomerName")

.DataValueField("CustomerName")

//.DataValueField("CustomerId")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetCustomer", "ManageFacilityGroup");

});

})

)

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.FacilityGroupName)

</td>

<td>

@Html.TextBoxFor(model => model.FacilityGroupName, new { style = "width:156px;" })

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.Description)

</td>

<td>

@Html.TextAreaFor(model => model.Description, new { style = "width:163px;" })

</td>

</tr>

<tr>

<td>

@Html.LabelFor(model => model.status)

</td>

<td>

@(Html.Kendo().DropDownList()

.Name("StatusName")

.DataTextField("StatusName")

.DataValueField("StatusName")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetStatus", "ManageFacilityGroup");

});

})

)

</td>

</tr>

</table>

</fieldset>

Now on my popup i am letting the user edit "Customer Name" ,"Facility Group Name" and "Description" and the "Status".
While updating i am checking whether the updated facility group name doesnt match with any of the already existing names,
Now what i want to achieve is once the facility group name is checked for any duplicacy the name should be updated but if there is any duplicacy the record should not get updated and the edit popup window should remain intact with the proper error message.
In my case the record is not being updated on duplicacy but the edit pop up window gets closed automatically.
Help!!!

Grid

asked on 12 Sep 2012

0 answers

151 views

Update Editor content on paste

Hello,

I have an Editor where I have setup with the "paste" event. I am having no problem with the event firing it is that I can't get it to replace the content correctly. Here is a working example of the problem http://jsfiddle.net/WgvNr/3/. To test paste in some Microsoft Word content with some formatting. The paste event will strip the Word formatting. This works also, but it leaves the original content and the edited content. How can I just have the edited content show in the editor?

$("#txtActions").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"insertUnorderedList",

"insertOrderedList",

],

paste: function (e) {

var editor = $("#txtActions").data("kendoEditor");

editor.value(CleanWordHTML(e.html));

//console.log(editor);

}

});

Editor

asked on 12 Sep 2012

2 answers

146 views

"interpolate" not working for stacked charts if CategoryAxis is of type Date

I have the following code:

var threshold = 100;

var throughputPer10min = [ 15, 26, 21, 40, 63,

16, 38, 79, 120, 54,

12, 56, 75, 102, 110,

130, 90, 75, 50, 5];

var startDate = new Date();

var chartData = [];

for (i = 0; i < throughputPer10min.length; i++) {

var date = new Date(startDate);

date.setMinutes(startDate.getMinutes() + (10 * i));

chartData.push({

"time": date,

"threshold": threshold,

"actual": throughputPer10min[i],

"below": Math.min(throughputPer10min[i], threshold),

"above": Math.max(0, throughputPer10min[i] - threshold)

});

}

var endDate = chartData[chartData.length - 1].time;

chartData[chartData.length - 1].threshold = threshold;

$("#testGraph").kendoChart({

dataSource:

{

data: chartData

},

valueAxis:

{

majorUnit: 50,

min: 0,

max: 150

},

categoryAxis:

{

field: "time",

baseUnit: "minutes",

type: "Date",

majorGridLines:

{

visible: false

},

majorTicks:

{

visible: false

},

labels:

{

step: 20

}

},

series: [

{

type: "area",

stack: true,

missingValues: "interpolate",

field: "below",

color: "#55F",

line: { color: "blue" },

},

{

type: "area",

stack: true,

missingValues: "interpolate",

field: "above",

color: "green"

},

{

type: "line",

field: "actual",

missingValues: "interpolate",

width: 1,

markers:

{

size: 0

},

name: "Actual Throughput"

},

{

type: "line",

field: "threshold",

missingValues: "interpolate",

name: "threshold",

color: "red",

dashType: "dash",

width: 1.5,

markers:

{

size:0

},

name: "Threshold line"

}

],

legend: {

visible: false

}

});

if I replace the date.setMinutes(startDate.getMinutes() + (10 * i)); with getMinutes() + i, everything looks fine, otherwise, it looks as if I had used missingValues: "zero"

Is this a bug or intended ?

Charts