Questions on Kendo UI for jQuery Forum

2 answers

124 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

160 views

[Solved] 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

504 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

174 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

108 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

168 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

713 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

861 views

[Solved] 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

5 answers

851 views

[Solved] Declarative vs Constructor and template data-bind elements

As I understand, there are two (equal ?) ways to declare widget initialization: constructor and data attributes. However, I am seeing two different behaviors (in regard to templates specifically) depending on how I initialized say the ListView widget.

Constructor:

$('#listView_C').kendoListView({

selectable: true,

template: kendo.template($("#template").html()),

change: viewModel.onChange,

mousedown: viewModel.onMouseDown,

dataSource: {

data: viewModel.listSource,

pageSize: 10

}

});

vs. Declarative:

<div id="listView_D" data-role="listview" data-selectable="true" data-bind="source: listSource, events: { change: onChange, mousedown: onMouseDown }" data-template="template"></div>

See my jsFiddle it shows both flavors of ListView's above:
The listview via constructor renders the LastName as undefined from the template span data-bind?

<script type="text/x-kendo-tmpl" id="template">

<div class="customers">

<dl>

<dt>First Name</dt>

<dd>#=FirstName#</span></dd>

<dt>Last Name</dt>

<dd><span data-bind="text: LastName" ></span></dd>

</dl>

</div>

</script>

I think this is related, as the demo for editing a listview uses two templates (display and edit) and constructor initialization. The edit template does use data-bind elements, but it only works while in edit mode?. If you try the same on the display template, that does not work - not sure what or why the difference is to the control or data?

<dd>