Questions on Kendo UI for jQuery Forum

1 answer

370 views

I was trying to format the date in the grid.
The grid uses a editortemplate for editing date.
@model DateTime
@{

}
@Html.TextBoxFor(model => model, string.Format("{0:d}", Model), new { disabled="true" })

The date never gets formatted.
It always defaults to this format in the grid:
17 2012 13:36:07 GMT-0500 (Central Daylight Time)

On postback, this causes ModelState to return error.

Grid

answered on 18 Aug 2012

1 answer

512 views

Refresh/Replace DataSource of Foreignkey DropDown List

I am attempting to refresh a foreign key DropDownList after the list of available foreign keys has changed. I have a grid of holiday schedules with a custom action in the toolbar to allow for the CRUD of holidays. The custom action brings up a popup form to allow this. My challenge is that when the grid is first created, the list of foreign keys for the holidays is statically assigned. What I have attempted to do is react to the edit event on the grid and at that time assign a new DataSource object to the DropDownList, update the DataTextField, DataValueFied, execute read on the dataSource object, then refresh the DropDownList. This is not working. Any help would be greatly appreciated!

APS.NET MVC 3

@using ePN.Core.Domain

@using Kendo.Mvc.UI.Fluent

@model VW_HolidayDatesGridDisplay

@{

ViewBag.Title = "Holiday Schedule";

}

@functions {

private void GridCommandDef(GridColumnFactory<VW_HolidayDatesGridDisplay> columns)

{

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

columns.Bound(p => p.ID).Hidden();

columns.Bound(p => p.Year).Width(50);

columns.Bound(p => p.Month).Width(100);

columns.ForeignKey(p => p.HolidayID, (IEnumerable<BankHoliday>) ViewBag.Holiday, "ID", "Name")

.Title("Name")

.Groupable(false)

.Sortable(false);

columns.Bound(p => p.HolidayDate).Format("{0:MM/dd/yyyy}").Groupable(false).EditorTemplateName("Date").Width(100);

}

private void GridDataSource(DataSourceBuilder<VW_HolidayDatesGridDisplay> dataSource)

{

dataSource.Ajax()

.Model(AjaxDataSourceBuilder)

.Create(create => create.Action("Holidays_Create", "Holiday"))

.Read(read => read.Action("Holidays_Read", "Holiday"))

.Update(update => update.Action("Holidays_Update", "Holiday"))

.Destroy(destroy => destroy.Action("Holidays_Destroy", "Holiday"));

}

private void AjaxDataSourceBuilder(DataSourceModelDescriptorFactory<VW_HolidayDatesGridDisplay> model)

{

model.Id(p => p.ID);

model.Field(p => p.Year).Editable(false);

model.Field(p => p.Month).Editable(false);

model.Field(p => p.HolidayID).DefaultValue(1);

model.Field(p => p.HolidayDate);

}

private void GridToolBarDef(GridToolBarCommandFactory<VW_HolidayDatesGridDisplay> toolbar)

{

toolbar.Create().Text("Schedule a Holiday");

GridToolBarCustomCommandBuilder<VW_HolidayDatesGridDisplay> popup = toolbar.Custom();

popup.Text("Create New Holiday");

popup.Name("NewHoliday");

popup.Url("#");

popup.HtmlAttributes(new {onclick = "void(openModal())", style="float:right"});

}

@section PageScripts

{

<script type="text/javascript">

// <reference path="/Scripts/kendo.all-vsdoc.js" />

var holidayWindow;

var holidayDataSource = new kendo.data.DataSource({

transport: { dataType: "json", cache: false, read: { url: "@Url.Action("BankHolidays_Read","BankHoliday",null,"http")" } },

schema: {

type: "json",

data: function(response) { return response.Data; },

model: {

fields: {

ID: { editable: false, nullable: false, type: "number" },

Name: { editable: false }

}

});

var rowEdit = function(e) {

var ddl = $("#HolidayID").data("kendoDropDownList");

ddl.dataTextField = "Name";

ddl.dataValueField = "ID";

ddl.dataSource = holidayDataSource;

ddl.refresh();

console.log(["DDL",ddl]);

};

var openModal = function () {

var mWindow = holidayWindow || $("#modalWindow").kendoWindow({

actions: ["Refresh", "Close"],

title: "Manage Holidays",

visible: false,

height: "400px",

width: "600px",

modal: true,

draggable: false,

resizable: false,

content : "@Url.Action("Index","BankHoliday",null,"http")"

}).data("kendoWindow");

mWindow.center().open();

};

</script>

}

<h2>Holiday Schedule</h2>

<div id="modalWindow"></div>

@(Html.Kendo().Grid<VW_HolidayDatesGridDisplay>()

.Name("Grid")

.Events(e => e.Edit("rowEdit"))

.Columns(GridCommandDef)

.DataSource(GridDataSource)

.ToolBar(GridToolBarDef)

.Editable(settingsBuilder => settingsBuilder.Mode(Kendo.Mvc.UI.GridEditMode.InLine))

.Scrollable(settingsBuilder => settingsBuilder.Height(400))

.Groupable()

.Sortable()

)

Grid

answered on 17 Aug 2012

1 answer

388 views

Passing Parameters to a WCF WebGet Method

I have created a WCF Data Service that (amongst other things) contains a WebGet Method which accepts a string parameter. How do I send this parameter from kendoUI Mobile?

WebMethod:

[WebGet]
public IEnumerable<T> GetData(string str)
{
    var linqQuery = from x in Products
                             where productName == str
                             select x;
    return linqQuery;
}

I am trying to call the webmethod as follows:

function GetProduct(name) {
    $("#product-listview").kendoMobileListView({
        dataSource: {
            transport: {
                read: {
                    contentType: "application/json; charset=utf-8",
                    url: "http://ProductDataService.svc/GetData",
                    dataType: "json",
                    data: {param: name }
               }
            },
            schema: {
                data: "d"
            },
            parameterMap: function (options) {
                kendo.ui.progress($("#product-listview"), false);
                return kendo.stringify(options);
            }
        },
        template: $("#product_template").text()
    });
}

This returns no data, and no error. Can anyone help?

Data Source

answered on 17 Aug 2012

0 answers

110 views

Official Mobile Framework Demo Issue

Hello there,

I have the Galaxy Nexus with Android 4.1 and when I try the Forms Demo I get a weird screen behavior. When I click on an input element with type email, url, text etc. the android keyboard appears , as in every app, and I type whatever I want and when i click to a different element or click enter and the keyboard disappears I can see a white box for about a sec in the same place where the keyboard was 1 sec before. Is that a FOUC problem? And if yes how can i fix it.

General Discussions

asked on 17 Aug 2012

1 answer

212 views

Possible bug with the upload control inside kendo window

Hello there,

I was trying to use the upload control inside a kendo window and I noticed that when a file is selected, the file name together with a remove button will be listed 4 times under the file list. I'm using the mvc wrapper but it seems like this is the issue with either the window or the upload widget itself. Please let me know if you need more info on this. Below is the code.

Thank you,

@(Html.Kendo().Window()

.Name("window")

.Content(@<text>

@(Html.Kendo().Upload()

.Name("files")

)

</text>)

.Draggable()

.Resizable()

.Width(600)

)

Upload

answered on 17 Aug 2012

0 answers

106 views

IE8 No such interface

I keep getting this exception when I do a kendo.bind
No Such Interface (IE8)
So this exception is triggered while doing a kendo.bind.
The root cause is not in the kendo code is really something in jQuery

Sizzle.contains = function (a, b) {
try {
return a !== b && (a.contains ? a.contains(b) : true); <-- Exception is here
}
catch (err) {
return false;
}
};
I patched my jquery file. It seems to be related to the Kendo Tabs because binding works great in all other pages not using tabs I think is it related with the enabled property of the tab control being bound.
Well I hope this can be fixed, I don't like patching my jquery :)

MVVM

asked on 17 Aug 2012

2 answers

298 views

[Solved] Grid Add/Update field display...

How can I change the fields that display for an Add/Update? For an add I need to have 4 fields display and for an edit I need to only display 2. I tried creating a template usercontrol but it is showing up for both an add/update. I tried modifying the viewmodel and that is applying the changes to both the add/update also.

Grid:

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

.Name("CodeManager")

.Columns(columns =>

{

columns.Bound(p => p.CodeID);

columns.Bound(p => p.Status);

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

})

.ToolBar(toolBar => toolBar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.Sortable()

.Scrollable()

.Groupable()

.Pageable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => events.Error("error_handler"))

.ServerOperation(false)

.Model(model =>

{

model.Id(p => p.CodeID);

model.Field(p => p.CodeID).Editable(false);

model.Field(p => p.Title).Editable(false);

})

//.Read(read => read.Action("GetPersons", "CodeManager", new { classifications = @ViewBag.SelectedCatgory }))

.Update(update => update.Action("EditingCustom_Update", "CodeManager"))

.Create(update => update.Action("EditingCustom_Update", "CodeManager"))

)

.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("_CodeEditor"))

)

Control:

public ActionResult Index(string classifications = "")

{

ViewData["Category"] = classifications;

ViewData["Classifications"] = new SelectList(Classifications.List, "ClassificationText", "ClassificationText", classifications);

var codModels = new List<CodeModel>();

ViewBag.SelectedCatgory = classifications ?? "Type";

if (Request.HttpMethod == "POST")

{

var model = _codeRepository.Search(classifications).ToModel();

return View(model);

}

return View(codModels);

}

Model:

blic class CodeModel

{

public string CodeID { get; set; }

public string Title { get; set; }

public string Status { get; set; }

public bool Active { get; set; }

public string Category { get; set; }

public int UserID { get; set; }

}

Thanks
Dennis

Grid

answered on 17 Aug 2012

1 answer

115 views

Cant access the WCF Web Api Service on Android

Hi There,

I was testing out the demo introduction project for android downloaded from here. As I was thinking that this will be my starting point for a mobile application for my Web application on Telerik MVC 2. But the mobile application cant seems to work. If I access teh Web Api service through Chrome it working fine. attached file has the output of the chrome for service.

But on the emulator I cant access the service and its just keep on loading. I have checked and found that the request is not reaching the service.

Any help will be appreciated.

Thanks Syed

General Discussions

answered on 17 Aug 2012

2 answers

155 views

[Solved] <Object> Tag Hides Sub Menu Items

Hi,

I am currently in the process of migrating from the MVC controls to the Kendo UI.
For the MVC controls, there was a work around to the old IE bug where menu sub items were hidden behind object tags. This work around can be seen below.

if ($.browser.msie) {

var oldFxPlay = $.telerik.fx.play;

$.telerik.fx.play = function () {

var target = $(arguments[1]);

if (target.is(".t-menu .t-group") && !target.find("iframe").length) {

target.append("<li style='width:100%;height:100%;z-index:-1;position:absolute;top:0;left:0;'>" +

"<iframe src='#' frameborder='0' style='width:100%;height:100%;z-index:-1;position:absolute;'></iframe>" +

"</li>");

}

oldFxPlay.apply(this, Array.prototype.slice.apply(arguments));

};

}

I now need something similar for the Kendo UI menu. Is there anything available?

Many thanks in advance for your support.

Menu

answered on 17 Aug 2012

4 answers

1.9K+ views

[Solved] Kendo UI Window, disable background scrolling

I have a model Kendo window that gets displayed on a large page. The window contains a scrollable grid. Whenever I hit the end of scrolling in the grid, the main webpage scrolls and the window stays where it is. Is there anyway that can be fixed?

Window

answered on 17 Aug 2012