Questions on Kendo UI for jQuery Forum

3 answers

294 views

Hi,

I use Ajax.BeginForm to add new article. How can I pass uploaded files together with Save action
to save new Article firts and after that save files into database?
I use
@(Html.Kendo().Upload()
.Name("file")
)
inside form.

Thx
Tomaz

Upload

answered on 13 Nov 2012

0 answers

225 views

Grid editing values with a dropdown selection

I just got started with Kendo UI - thinking about switching from Telerik MVC controls. Right off the bat, editing in grids seems like a nightmare. Hopefully someone can help me out here.

Lets say I have a simplified domain model of:

public class User

{

public Guid UserId { get; set; }

public string Name { get; set; }

public Guid TimeZoneId { get; set; }

}

And then I try to make a view model that has to serve as both an EditModel and ViewModel (because of a Kendo limitation? see further below)

public class UserViewModel

{

public Guid UserId { get; set; }

public string Name { get; set; }

public Guid TimeZoneId { get; set

; }

   public string TimeZoneName { get; set; }

}

Okay, so lets say I pass a list of UserViewModels to the view and sneak in a list of TimeZoneModels to the ViewBag.

I then add this to my view:

<%: Html.Kendo().Grid(Model.Users)

.Name("Grid")

.Columns(columns =>

{

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

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

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

columns.Bound(p => p.TimeZoneId).EditorTemplateName("TimeZoneId");

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

})

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

.DataSource(dataSource => dataSource

.Ajax()

           .Model(model => 

           {

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

           })

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

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

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

%>

With an edit template named TimeZoneId.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>

<% Html.Kendo().DropDownList()

.Name("TimeZoneId")

.DataValueField("TimeZoneId")

.DataTextField("Name")

.BindTo(ViewBag.TimeZones).Render();

%>

Okay, here's where it gets fuzzy.

1. First off, when clicking edit for this, It edits inline great. When switching to Popup however, the editor template is not used. What gives?
2. Secondly, how do you manage this properly? I needed a TimeZoneName to show the name in the grid, but in order to preserve a timeZoneId when creating or editing a user, I need to have a TimeZoneId field on the model as well. So, how do you show just the TimeZoneName when displaying while hiding the TimeZoneId. Then hiding the TimeZoneName when editing and showing the TimeZoneId with a dropdown. It doesn't appear this is thought through very well here. How is everyone else handling this?

-Levi

Grid

asked on 13 Nov 2012

2 answers

316 views

Number of elements in the valueAxis

Hi,

I'm using a line graph with one serie:
(piece of the json object)
series:[
{
name:"Orange Tree",
data:[0.981422,0.981422,0.981422,0.981422,0.981422]}],
valueAxis:{labels:{format:{0}%}}

As you can see the value of the data is constant; but when the chart is rendered in the screen I get a lot of labels in the valueAxis:
1.2 1 0.8 0.6 0.4 0.2 0

How can I control the number of labels in the value axis?

Thank

Charts

answered on 13 Nov 2012

1 answer

190 views

Custom edit popup for grid result in "TypeError: source.unbind is not a function"

Hi, All.
Could you help me to resolve the problem "TypeError: source.unbind is not a function" whith popup editor for grid?
I do the page for edit user roles. The row grid present information about user and popup editor is used for editing user properties and user roles.
To show the list of roles in popup editor I add source template for Roles which show roles as list of checkboxes. The problem is that jscript error occur after click cancel button.
Here it is the demonstration of the problem: http://jsfiddle.net/grenal/KGsSL/73/.
To reproduce error. Push edit button in grid and push cancel in pop up dialog. I expected dialog closing, but it does't.

Grid

answered on 13 Nov 2012

1 answer

145 views

Grid - Skip on Edit Tabbing

Is it possible to skip the on edit tabbing. I have a grid with image columns (that are a links). The databound column is a boolean (so normally it would be a checkbox). I want it to click and change the value. I've written code to help me with this but it brings up a side affect that changes the values when I tab through the columns. Here is example of the code I'm using (it's not exact).

OnDataBound:
$("#ReportGrid").keydown(function (ee) {
if (ee.which == 9) { // tab
ee.stopPropagation();
ee.preventDefault();
}
});
$('#ReportGrid').find('td.toggleImages').click(function (ee) {
var grid = $('#ReportGrid').data("kendoGrid");
grid.editCell($(this).parent());
});
OnEdit:
if (e.container.hasClass('toggleImages')) {
var acCell = $(e.container).find('a');
e.model.set(acCell.attr('name'), changeStyle(acCell)); //changeStyle changes the visual and flips the state.
}

If I place a break pint on each of these and hit "tab" to move into the image cell the OnEdit triggers before the KeyDown event.

Thoughts?

Grid

answered on 13 Nov 2012

5 answers

316 views

[Solved] Updating Grouping/Aggregates After the Group Field Has Been Edited

I have a grid that is grouped by an account id. In this case it is valid for the end user to be able to change the account id that each row is associated with. Right now, when the end user updates the account id via inline editing the data is updated but it is still in the previous grouping.

My question is how to do I force the row to move to the correct group, as well as update the group totals, after the account id has been changed?

Thanks,
Kyle Tillman

Grid

answered on 13 Nov 2012

1 answer

115 views

Html.Kendo().TreeView().Checkboxes(false) renders checkboxes

Hi there,

I checked the source code for Checkboxes(bool enabled) in the treeview builder and found the following:

public TreeViewBuilder Checkboxes(bool enabled)
{
return Checkboxes(config => config.Enabled(true));
}

Is it normal that even passing false the checkboxes are enabled? The parameter passed seems to never be used. I'm using 2012.2.913.

TreeView

answered on 13 Nov 2012

0 answers

197 views

PRISM like InteractionRequest

I was looking for a PRISM like InteractionRequest to use modal dialogs with Kendo UI MVVM. I could not find one and ended up creating one. I'll share it here as it would be great if it could be improved on or even adopted in the framework. It's usage is as follows:

<div style="display: none;"

data-role="window"

data-bind='interactionRequest: { path: editOpportunityInteractionRequest, template: editOpportunityTemplate }'

data-title="Edit"

data-modal="true"

data-visible="false">

</div>

I created a custom binding called interactionRequest. You bind it to an InterationRequest object in your view model and you need to provide the id of a template that will be rendered in the window. An InteractionRequest has a raise method that you pass a view model to be bound to the window and returns a promise that will be resolved when a result is set on the view model. I'm using TypeScript for this.

import App = module("./DataContext");

import Interactivity = module("./InteractionRequest");

import Models = module("./Models");

import ViewModels = module("./EditOpportunityViewModel");

export class OpportunitiesViewModel extends kendo.data.ObservableObject {

editOpportunityInteractionRequest = new Interactivity.InteractionRequest();

dataContext: App.DataContext;

constructor (dataContext: App.DataContext) {

super();

this.set("dataContext", dataContext);

}

onCustomCreate(e: JQueryEventObject) {

e.preventDefault();

var opportunity = new Models.Opportunity();

this.dataContext.opportunities.insert(0, opportunity);

var viewModel = new ViewModels.EditOpportunityViewModel(opportunity, this.dataContext);

this.editOpportunityInteractionRequest.raise(viewModel).done((viewModel: ViewModels.EditOpportunityViewModel) => {

if (!viewModel.result) {

this.dataContext.opportunities.remove(viewModel.opportunity);

}

});

}

onCustomEdit(e: JQueryEventObject) {

e.preventDefault();

var opportunity = <Models.IOpportunityModel>e.data;

var viewModel = new ViewModels.EditOpportunityViewModel(opportunity, this.dataContext);

this.editOpportunityInteractionRequest.raise(viewModel).done(viewModel => {

if (!viewModel.result) {

this.dataContext.cancelChanges();

}

});

}

The InteractionRequest itself is very simple:

/// <reference path="..\lib\jquery.d.ts"/>

/// <reference path="..\lib\kendo.web.d.ts"/>

export class InteractionRequest extends kendo.data.ObservableObject {

promise: JQueryPromise;

raise(viewModel: { result: any; }) {

this.trigger("raise", viewModel);

return this.promise;

}

The raise method expects that the raise event it triggers is handled by the interactionRequest custom binding that will set the promise on the InteractionRequest so that it may be returned by the raise method.

This is the custom binding code (which is still in JavaScript)

kendo.data.binders.widget.interactionRequest = kendo.data.Binder.extend({

init: function (element, bindings, options) {

kendo.data.Binder.fn.init.call(this, element, bindings, options);

var that = this,

binding = bindings.interactionRequest;

that.template = kendo.template($("#" + binding.path.template).html());

that.resultHandler = function (e) {

if (e.field === "result") {

that.element.close();

}

};

that.closeHandler = function () {

that.viewModel.unbind("change", that.resultHandler);

var widget = that.element,

container = widget.element.find(".k-edit-form-container");

kendo.destroy(container);

that.deferred.resolve(that.viewModel);

};

that.element.bind("close", that.closeHandler);

},

refresh: function (attribute) {

var that = this,

binding = that.bindings.interactionRequest,

source = binding.source.get(binding.path.path);

if (that.previousSource) {

that.previousSource.unbind("change", that.raiseHandler);

}

that.raiseHandler = function (e) {

that.deferred = new $.Deferred();

source.promise = that.deferred.promise();

if (e instanceof kendo.data.ObservableObject) {

that.viewModel = e;

} else {

that.viewModel = kendo.observable(e);

}

that.viewModel.bind("change", that.resultHandler);

var widget = that.element;

widget.content('<div class="k-edit-form-container"></div');

var container = widget.element.find(".k-edit-form-container");

container.html(that.template(that.viewModel));

that.viewModel.validator = container.kendoValidator().data("kendoValidator");

kendo.bind(container, that.viewModel);

widget.center().open();

};

source.bind("raise", that.raiseHandler);

that.previousSource = source;

},

destroy: function () {

var that = this,

binding = that.bindings.interactionRequest,

source = binding.source.get(binding.path);

that.element.unbind("close", that.closeHandler);

if (that.raiseHandler) {

source.unbind("raise", that.raiseHandler);

}

});

It will open the window when the InteractionRequest triggers its raise event. It will bind the view model passed to the raise method of the InteractionRequest to the template rendered in the window. When a result is set on this view model, the window is closed and the deferred is resolved. In my case I set the result to true when an update button is clicked and to false when a cancel button is clicked.

import App = module("./DataContext");

import Models = module("./Models");

export class EditOpportunityViewModel extends kendo.data.ObservableObject {

result: bool;

validator: kendo.ui.Validator;

constructor (public opportunity: Models.IOpportunityModel, public dataContext: App.DataContext) {

super();

}

update(e: JQueryEventObject) {

e.preventDefault();

if (!this.validator.validate()) {

return;

}

this.dataContext.sync().done(() => {

this.set("result", true);

});

}

cancel(e: JQueryEventObject) {

e.preventDefault();

this.set("result", false);

}

I specifically think the custom binding could be improved with regards to the specification of the template to be rendered in the window. Preferably I set a custom data-template option on the div, but this does not currently get passed into the custom binding. I will also need to figure out how to trigger validation on the dialog before I set the dialog result to true.
EDIT: added validation

MVVM

asked on 13 Nov 2012

2 answers

135 views

Targeting a specific window to hide all buttons

I am looking for a way to target a specific window (in this case a modal pop up that I don't want any buttons on -- it is modal, after all).

I know I can do something like this:

div .k-window-action
{
visibility: hidden;
}

but that gets all <div>s and I really don't want to do that.

The div in question:
<div id="ui-loadingPopUp">test!</div>

I've tried things like "div#loadingPopUp .k-window-action" but that doesn't work either.

Window

answered on 13 Nov 2012

0 answers

315 views

Button click fire twice on ios safari

It works fine, but when you click after event it fires again, on ios safari.
On pc chrome works fine.
Is any bug or just me?
<a id="idMatch" data-role="button" data-click="cancelMatch">Cancel</a>

Button (Mobile)

asked on 13 Nov 2012