Questions on Kendo UI for jQuery Forum

1 answer

150 views

Nested values trigger events more than once

The viewmodel's 'change' (and possibly other events) trigger more than once if a nested value is changed. The event appears to be triggered once per nested level. So changing 'nested.value' triggers twice and changing 'very.deeply.nested.value' triggers four times.

I prepared a very simple example at http://jsfiddle.net/eMATB

Am I doing it wrong or is it a kendo bug?

MVVM

answered on 21 Feb 2013

6 answers

297 views

TreeView - incorrect checkbox behavior

In TreeView control checkboxes.checkChildren property is set to false. If you select children checkboxes, the parent checkbox is selected automatically. It works this way regardless of the checkChildren property is set to true or false.

$(tree).kendoTreeView({

dataSource: new kendo.data.HierarchicalDataSource({

transport: {

read: {

url: groups_api_url,

dataType: "jsonp"

}

},

schema: {

model: {

id: "key",

hasChildren: "hasChildren"

}

}),

checkboxes: {

checkChildren: false

},

dataTextField: "title"

});

What I would like is just a "simple" behavior of the control without dependencies between parent and child nodes, i.e. if a checkbox is checked, nothing should happen with other checkboxes.

For example, on the screenshot1, if "Job" checkbox is selected, "Test by w_admin" should not be selected automatically.

KendoUI: 2012.3.1315
OS: Windows 7
jQuery: 1.7.1
jQueryUI: 1.8.16

TreeView

answered on 21 Feb 2013

2 answers

105 views

ListView hang after opening external link on native browser

In a ListView, a script to open an external link by native browser is called when a link is clicked.

On Android:
navigator.app.loadUrl(link, { openExternal:true } );
On iOS:
window.open(link, '_system');

The link can be opened on the corresponding native browser.

When the user try to switch back to the app, some problems happen after that.

On Android, the screen hung on the original view, when the back button is pressed again, the screen is un-freezed and can be refreshed.

On iOS, however, the screen is also hung on the original view. When tapped on the screen, the complete view (with the layout) is moved. There is no way to un-freeze this screen.

How to fix this so that the screen can be un-frezzed after switching back from the native browser to the app?

Thank you very much for your help.

ListView (Mobile)

answered on 21 Feb 2013

6 answers

120 views

How can I upload documents and then link to them like DocumentBrowser in ajax Editor?

Hi,

The new imagebrowser enhancement is great - I just need a document browser that is similar in functionality like the current imagebrowser but allows me to link to the documents that a user has uploaded - similar to DocumentBrowser used in the ajax Editor. Is this possible or is it a feature that is soon to be added?

Thank you,
David A.

Editor

answered on 20 Feb 2013

3 answers

467 views

Centering Issues

Hello,

I am trying to center a Kendo UI Window on screen, but I just cant.

I tried with dynamic content, static content, and always the same result, the window dont get centered.

http://jsfiddle.net/X7qxs/

¿What I am doing wrong?

Thanks

Window

answered on 20 Feb 2013

1 answer

143 views

Foreign Key Question

I have a editable grid where the first column is ProjectID

function updateGrid() {

if ( $("#grid").data("kendoGrid") != undefined ) {

$("#grid").empty();

}

var lob = $("#lob").data("kendoComboBox").value();

var queryurl = "./grid_projectselections.php?delob=" + escape(lob);

var updateurl = "./grid_projectselections.php?delob=" + escape(lob);

var element = $("#grid").kendoGrid({

dataSource: {

pageSize: 200,

type: "json",

batch: true ,

serverSorting: false,

transport: {

read: {

url: queryurl,

dataType: "json",

cache: false,

data: {

q: lob

}

},

update: {

url: updateurl,

dataType: "json"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

},

schema: {

data: "data",

total: "total",

model: {

fields: {

ProjectID: { editable: true },

HR_LEVEL_5: { editable: false },

HR_LEVEL_6: { editable: false },

HR_LEVEL_7: { editable: false },

HR_LEVEL_8: { editable: false },

HR_LEVEL_9: { editable: false },

ExecDescr: { editable: false },

OrgDescr: { editable: false },

GroupDescr: { editable: false },

RegionDescr: { editable: false },

SectionDescr: { editable: false }

}

},

selectable: true,

filterable: true,

resizable: true,

editable: true,

groupable: false,

pageable: {

numeric: true,

refresh: true,

previousNext: true,

input: true,

info: true

},

columns: [

{ field: "ProjectID", editor: ProjectDropDownEditor, values: projectDS },

"HR_LEVEL_5" ,

"HR_LEVEL_6" ,

"HR_LEVEL_7" ,

"HR_LEVEL_8" ,

"HR_LEVEL_9" ,

"ExecDescr" ,

"OrgDescr" ,

"GroupDescr" ,

"RegionDescr" ,

"SectionDescr"

]

});

}

inside this grid when in edit mode the first column should be a drop down

function ProjectDropDownEditor(container, options) {

$('<input required data-text-field="ProjectName" data-value-field="ProjectID" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

autoBind: false,

dataSource: {

type: "json",

transport: {

read: { url: "./grid_projectsdropdown.php"},

}

});

}

The grid is initially populated when a user makes a selection from a combobox placed above the grid

$("#lob").width(360).kendoComboBox({

placeholder: "Select LOB...",

dataTextField: "LineOfBusiness",

dataValueField: "LineOfBusiness",

width: 360,

dataSource: {

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

serverFiltering: true,

transport: { read: "./ajax/lobs.php" },

schema: { data: "data", total: "total" }

},

change: function() {

var value = this.value();

if (value) {

if (value == '') {

return;

}

updateGrid();

} else {

}

});

The populating the grid is based off the choice make in the combo... that part works. The problem I am having is ... the dropdown editor needs to be based off the combobox value also and the datasource for the project names

var projectDS = new kendo.data.DataSource({

transport: {

read: { url: "./grid_projectsdropdown.php"},

dataType: "json"

},

schema: { data: "data", total: "total" }

});

which I have returning all records instead of filtering just on the ones from that lineofbusiness

What I want to do in (pseudo code)
select ProjectID, ProjectName from projects where lineofbusiness = combobox.value()

to build the dropdown editors options and the datasource I am using the same datasource for each if I could just get the LineofBusiness to be sent in the read call

also the ProjectID column shows the ProjectID not the ProjectName like I assume it would if they were linked?

I need a push in the right direction... my brain is fried...

Grid

answered on 20 Feb 2013

1 answer

86 views

Validations messages appearing below controls in popup edit window

right now my popup edit windows shows validation message just below thier respective controls, is there any example showing the right approach?

Grid

answered on 20 Feb 2013

1 answer

137 views

Paging controls overlapp/distorted inside a master page

I have a grid in normal asp.net page and when make this grid part of ajax collapsible panel and master page
, facing the following issues

1> Search is not working for every column.
2> The dropdown values in search dialog is moved away.
3> The paging controls are distorted

How do i troubleshoot this?

Grid

answered on 20 Feb 2013

2 answers

622 views

Working with ManyToMany relations

I'v finally been able to do som more work with Kendo and have been fiddling more with my ManyToMany relations. I'v set ut a test project with a two really simple models Movies and Actors

[Table("Movies")]

public class Movie

{

[Key]

[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]

public int MovieId { get; set; }

public string Name { get; set; }

public List<Actor> Actors { get; set; }

}

And

[Table("Actor")]

public class Actor

{

[Key]

[DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]

public int ActorId { get; set; }

public string Name { get; set; }

[ScriptIgnore]

public List<Movie> Movies { get; set; }

}

Code first migrations have kindly generated a ActorMovie table for me in the database and using normal MVC4 controllers and views this is working as expected. I'm able to both add one or more actors to a movie. And add one or movie to an actors.

Now, I would like to be able to display the lists of Actors or Movies in the row of the respective Movie or Actor in a Grid.
I'd also like to be able to add both Actors and Movies (one or more) using an editable Grid.

Since the Grid build up and controllers will be the same for both I'm only going to add the code for the movies.
This is my Grid so far:

@(Html.Kendo().Grid<KendoUi.ViewModels.MovieViewModel>()

.Name("Grid")

.Columns(columns =>

{

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

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

columns.ForeignKey(p => p.Actors, (System.Collections.IEnumerable)ViewBag.Actors, "ActorId", "Name");

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

})

.ToolBar(toolbar => toolbar.Create())

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

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

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

.Model(model =>

{

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

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

})

.Create(update => update.Action("EditingInline_Create", "Movie"))

.Read(read => read.Action("EditingInline_Read", "Movie"))

.Update(update => update.Action("EditingInline_Update", "Movie"))

.Destroy(update => update.Action("EditingInline_Destroy", "Movie"))

)

And this is my controller:

public class MovieController : Controller

{

private readonly KendoContext context;

public MovieController()

{

context = new KendoContext();

}

public ActionResult Index()

{

ViewBag.Actors = context.Actors;

return View();

}

public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request)

{

return Json(context.Movies.Include("Actors").ToDataSourceResult(request));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, MovieViewModel movie)

{

if (movie != null && ModelState.IsValid)

{

var toAdd = new Movie() {Name = movie.Name};

context.Entry(toAdd).State = EntityState.Added;

context.SaveChanges();

}

return Json(new[] { movie }.ToDataSourceResult(request, ModelState));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, MovieViewModel movie)

{

if (movie != null && ModelState.IsValid)

{

var target = context.Movies.Single(x => x.MovieId == movie.MovieId);

if (target != null)

{

target.Name = movie.Name;

context.Entry(target).State = EntityState.Modified;

context.SaveChanges();

}

return Json(ModelState.ToDataSourceResult());

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, MovieViewModel movie)

{

if (movie != null)

{

var target = context.Movies.Single(x => x.MovieId == movie.MovieId);

context.Entry(target).State = EntityState.Deleted;

context.SaveChanges();

}

return Json(ModelState.ToDataSourceResult());

}

And finally the MovieViewModel(I realize that as the code is now, the MovieViewModel isn't necessary:

public class MovieViewModel

{

public int MovieId { get; set; }

public string Name { get; set; }

public List<Actor> Actors { get; set; }

}

Since the logic to add ManyToMany relations are the same for MVC4 controllers using normal Views I assume I'm going to be able to use that code for this too.
I just need som guidance into what changes I need to do to the actual Grid code and ViewModel to be able to retrieve the data needed from the Grid to add/remove objects in the controller.

Grid

answered on 20 Feb 2013

5 answers

787 views

possible to make Kendo calendar act like a "full sized wall calendar" -- as big as the browser window?

My users would like a full-screen calendar-view, with cells capacious enough to display short blurbs of text, rather like a personal wall-calendar. It would occupy 100% of its container div, like a grid, so it could grow as wide as the browser window. Is it possible for the developer to modify the Kendo calendar to behave like this, or would it be better to search for such a dedicated widget?

Calendar

answered on 20 Feb 2013