Questions on Kendo UI for jQuery Forum

0 answers

213 views

Hi,
I have a model call Route, and in its create page there are multiple inputs to fill in and there are two grids, one is the available locations and the other is the selected locations, and user can move rows from one to another.

Now, I need to have the list of selected locations when handling create action in the controller. My question is, when a user clicks Save button, is there a way to bind the list of selected locations to a property in Route model (SelectedLocations which is
list of locations), or is it possible to post the datasource of the selected locations grid along with the rest of input fields?

I know the other way around, which is using jquery to create a string containing the selected locations ids and bind that string to some property in Route model, but I was wondering if KendoUI could post back the whole list.

Here is the empty selected location grid:

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

.Name("selectedLocations")

.BindTo((IEnumerable<Location>)ViewBag.Route.SelectedLocations)

.Columns(columns =>

{

columns.Bound(p => p.Id).Title("ID");

columns.Bound(p => p.StopLocation).Title("Stop Location");

})

.Selectable(s => s.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource.Server().Model(model => model.Id(p => p.Id)))

)

And here is how I move items from the available to the selected location grid:

$("#addStopBtn").click(function () {

var sourceGrid = $('#availableLocations').data('kendoGrid');

var destinationGrid = $('#selectedLocations').data('kendoGrid');

sourceGrid.select().each(function (e) {

var dataItem = sourceGrid.dataItem($(this));

destinationGrid.dataSource.add(dataItem);

sourceGrid.dataSource.remove(dataItem);

});

sourceGrid.refresh();

destinationGrid.refresh();

});

Thanks in advance.

Grid

asked on 09 Jul 2012

0 answers

102 views

Examples don't run

Requirements
Kendo UI Suite and Version
jQuery Version
Supported Browsers and Platforms
Components/Widgets used

PROJECT DESCRIPTION
[When running the project, with the connectionstring as it is in the web.config, no data is ever displayed from the grid. The Northwind db is in the App_Data folder, but nothing happens.

<add name="ApplicationServices" connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnetdb.mdf;User Instance=true" providerName="System.Data.SqlClient"/>
<add name="Northwind" connectionString="metadata=res://*/App_Code.Northwind.csdl|res://*/App_Code.Northwind.ssdl|res://*/App_Code.Northwind.msl;provider=System.Data.SqlClient;provider connection string=&quot;data source=.\SQLEXPRESS;attachdbfilename=|DataDirectory|\Northwind.mdf;integrated security=True;user instance=True;multipleactiveresultsets=True;App=EntityFramework&quot;" providerName="System.Data.EntityClient"/>

]

Grid

asked on 08 Jul 2012

0 answers

124 views

Expanded propery not working if using ViewModel

I was using your datasource expample for binding to my treeview and it picked up the expanded property:true no problem.
Then I switched to using your viewodels and the tree bound fine except for the epanded property.
It seems to ignore the epxanded property if you use ViewModel.

I am using the beta version 2012 Q2.

Is there soemthing different you have to do if using viewmodels?

TreeView

asked on 08 Jul 2012

3 answers

98 views

Events

Hi

is there any page that can show all the events that I can lisent to it with Kendo Mobile?

I'm looking for a way to run a function only when the view is loaded and completed (similar to ready in Jquery).

Thanks

General Discussions

answered on 07 Jul 2012

1 answer

109 views

calling internal link view from itself

Hi everyone

I have a view (lets call it "search-view") when user click a link like <a href="#search-view?q=Yahoo"> it will open the view and run fine without any issue

now inside the view "search-view" I have a link called <a href="#search-view?q=Google"> , when I try to click it simply the app will not respond and no error in the browser console.

I'm trying this using chrome so I'm not sure its it because chrome or this method is not allowed.

Thanks

General Discussions

answered on 07 Jul 2012

0 answers

136 views

Grid-I want to set a dynamic value to the field in edit mode.

I want to set a dynamic value to the field in edit mode.i define a function in edit event.
kendoGrid({ edit : function (e) {
e.model.set("type","aaaaa");
}})

but if this field is define in the DataSource is required, it can not work.it alway show "type is required", but the value can not be set.but not required is work good.

how can make it work good when the field is define required in the datasource.

Grid

asked on 07 Jul 2012

1 answer

99 views

Contain ActionSheet inside container like in demo

In the demo on this page: http://demos.kendoui.com/mobile/actionsheet/index.html
the ActionSheet stays inside the demo container. In my app, the actionsheet takes over the whole browser window. How is that done in the demo?

ActionSheet

answered on 07 Jul 2012

3 answers

518 views

Kendo Editor inside Kendo Window(s)

I am having issues when trying to combine these two widgets in an application.

The process I want is for a user to be able to:

1) Launch a kendo window
2) FROM the kendo window launch a second kendo window (using custom action) that contains a kendo editor

HTML snippets:

<div id="viewPort"><br><div id="viewPortTools"><input id="zoomSlider" /></div><br><div id="viewer"><br><img id="viewImg" style="zoom: 1.0" alt="graphic" src="http://localhost:1334/GetCachedImage.aspx?GUID=8954aa7f-dfd4-4273-945e-03b0f2a6dee9" /><br><div id="editorPort"><div><textarea id="editor" rows="10" cols="40"></textarea></div></div><br></div>

JavaScript:

$(document).ready(function () {

var viewport = $("#viewPort").kendoWindow({
actions: ["Custom", "Refresh", "Maximize", "Minimize", "Close"],
draggable: false,
visible: false,
height: "95%",
width: "95%",
modal: true,
resizable: false,
title: "ViewPort"
}).data("kendoWindow").wrapper.find(".k-custom").click(function (e) {
console.log(e);
var editport = $("#editorPort").data("kendoWindow");
editport.center();
var editor = $("#editor")
editport.open();
e.preventDefault();
});

//Configure editor used for annotations inside popup modal window.
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"foreColor"
]
});
//Configure editor popup window used by editor
var editport = $("#editorPort").kendoWindow({
actions: ["Close"],
draggable: true,
visible: false,
height: "200px",
modal: false,
resizable: false,
title: "Editor Full Window",
width: "400px"
}).data("kendoWindow");
//Placeholder function to test viewPort
$("#folderTitle").click(function () {

var viewport = $("#viewPort").data("kendoWindow");
viewport.center();
viewport.open();
});
});

However depending on the order of the editor and window declarations and the placement of the div that contains the editor (#editorPort) either of the following occurs:

1) Inline editor - Toolbar is corrupted and buttons displayed one below the other. Edit are works (e.g. contenteditable)
2) outline editor - Toolbar is fine however editor is not well editable. (by outline I mean that the #editorPort is placed outside of #viewPort in the DOM).

Any thoughts/comments?

Thanks,

Mark.

Editor

answered on 06 Jul 2012

10 answers

596 views

KendoUI error on load in a Chrome extension

I wonder if anyone is aware of the fact that adding KendoUI to a html file used in a Chrome extension causes errors on load:

I am getting:

Uncaught Error: Invalid template:'<div class="k-group-indicator" data-#=da...
(line 344 in kendo.web.js)

when inspecting my popup page

If I load the same page directly in the browser (not via an extension) - it loads just fine.

Any chance that a simple extension can be built to track this issue. It's a shame not to use KendoUI when developing extensions.

The issue can be replicated by including kendo.web.js in a popup page - nothing more, no need for any more code. I am using the 515 release.

Ron.

General Discussions

answered on 06 Jul 2012

3 answers

96 views

Issue on drop with last version 2012.1.515

When using Drag & drop control with version 2012.1.515, if the cursor is positioned over the "hint", it seems that the draggable object is trying to drop over the "hint" instead of the div with the "data-role=droptarget" attribute. This feature crashes our web site.

But, if the cursor is next to the "hint" (ex : cursorOffset: {top:10, left:10}), everything works as expected. We do this patch now. If we remove the cursorOffset, the web site crashes.

My question is : why the draggable object is trying to make a drop over the "hint" when it is below the cursor ?

We reproduce on the last version on IE and FireFox.

Drag and Drop

answered on 06 Jul 2012