Questions on Kendo UI for jQuery Forum

1 answer

126 views

I tried doing the scatter chart date axis example locally (http://demos.kendoui.com/dataviz/scatter-charts/date-axis.html) and instead of the dates on the x-axis displaying nicely MM-YYYY form like in the example it just looks like a bunch numbers as can be seen in my screenshot.

Is there something special that has to be done to format the x-axis date labels that isn't being shown in the example?

My version of Kendo.DataViz is 2011.3.1129

Thanks

Charts

answered on 12 Sep 2012

2 answers

77 views

Format Array for CRUD so MVC ModelBinder can read it

I am sending over an array to my MVC Controller and it seems to match the signature. However the array from my data source maps the value as such:

allocations[0][key]=value

The model is looking for the following: allocation[0].key=value.

Is there a way to rewrite the way the array will send out its value to the controller?

Data Source

answered on 12 Sep 2012

5 answers

1.1K+ views

Kendo Widgets MVVM validationMessage binding (multi-language site)

Hi all,

I'm wondering if anybody founds a work around for the binding of custom attributes to kendo widgets.

A very useful scenario for me would be the binding of the validator attributes like validaitonMessage or pattern. I'm working in a site that must be displayed in multiple languages, and I'm binding every label and localized rules to a model that controls the translation and how that input would behave based on the language.

Thanks

MVVM

answered on 12 Sep 2012

1 answer

183 views

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

1.9K+ views

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

241 views

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

127 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

134 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

764 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

367 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