Questions on Kendo UI for jQuery Forum

4 answers

699 views

Hi,

i am implementing an copy button for a grid. Thats my code. The click handler is implemented at the end. I can insert the new record to the grid but when i call

dataSource.sync();

no request is made to the server. Can i call the create function manually? I tested the code with

Kendo UI Web v2012.1.322
and
Kendo UI Complete v2012.1.515

$(document).ready(function() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "/rentingtenants/?property_id=#{@property.id}",

dataType: "json"

},

update: {

url: "#{update_attribute_rentingtenants_url}",

dataType: "json",

type: "GET",

complete: function(e) {

$("#grid").data("kendoGrid").dataSource.read();

}

},

destroy: {

url: "#{remove_rentingtenants_url}",

dataType: "json",

type: "GET"

},

create: {

url: "#{rentingtenants_url(:property_id => @property.id )}",

type: "POST",

complete: function(e) {

$("#grid").data("kendoGrid").dataSource.read();

}

},

parameterMap: function(options, operation) {

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

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

}

},

batch: true,

schema: {

model: {

id: "id",

fields: {

renter: { editable: true, type: "string", validation: { required: true } },

useright: { editable: false, type: "string" },

rentablespace: {

editable: true,

nullable: false,

type: "number",

validation: {

min: 1,

rules: {

required: true

},

messages: {

required: "Bitte geben Sie eine Mietfläche ein."

}

},

vacant: { editable: true, type: "boolean" },

monthlyrent: { editable: true, type: "number" },

rental_end: { editable: true, type: "date"

},

indexfree: { editable: true, type: "boolean" },

option: { editable: true, type: "boolean" },

comments: { editable: true, type: "string" }

}

},

aggregate: [ { field: "rentablespace", aggregate: "sum" }, { field: "monthlyrent", aggregate: "sum" }]

});

$('#grid').kendoGrid({

sortable: true,

dataSource: dataSource,

navigatable: true,

dataBound: onDataBound,

remove: function(e) {

handleRemoveChanges(e, this);

},

saveChanges: function (e) {

handleSaveChanges(e, this);

},

toolbar: [

{ name: "create", text: "Neue Mieteinheit" },

{ name: "save", text: "Änderungen speichern" },

{ name: "cancel", text: "Änderungen verwerfen" }

],

columns: [

{ field: "renter", title: "Mieter", width: 100, editor: renterDropDownEditor },

{ field: "useright", title: "Nutzungsrecht", width: 120},

{ field: "rentablespace", title:"Mietfläche", template: "#= kendo.toString(rentablespace, 'n2') # m²", footerTemplate: "#= kendo.toString(sum, 'n2') # m²", width: 110 },

{ field: "vacant", template: "#= vacant == true ? 'Ja' : 'Nein' #", title:"Leerstehend", width: 80 },

{ field: "monthlyrent", title:"Monatsmiete", format: "{0:c}", footerTemplate: "#= kendo.toString(sum, 'c2') #", width: 90 },

{ field: "rental_end", title:"Vertragsende", width: 90, template: "#= rental_end != 'null' && rental_end != '' ? kendo.toString(rental_end, 'dd.MM.yyyy') : '' #", width: 90 },

{ field: "indexfree", title:"Indexfrei", template: "#= indexfree == true ? 'Ja' : 'Nein' #", width: 60 },

{ field: "option", title:"Option", template: "#= option == true ? 'Ja' : 'Nein' #", width: 50 },

{ field: "comments", title:"Kommentar", width: 100 },

{ title: "", width: 100, command: [{ name: "copy", text: "Kopieren", className: "copy-button"}, { name: "destroy", text: "Löschen" }] },

],

editable: {

update: true,

confirmation: "Wollen Sie die Mieteinheit wirklich löschen?",

save: true,

mode: "incell"

}

});

$("#grid").delegate(".copy-button", "click", function(e) {

var row = $(this).closest("tr"),

grid = $(this).parents("[data-role=grid]").data("kendoGrid"); //gets child grid

var model = grid.dataItem(row);

dataSource.insert(0, model);

dataSource.sync();

e.preventDefault();

});

});

Grid

answered on 23 Aug 2012

1 answer

105 views

Compatibility with RhoMobile

Hi,

Can anyone tell me if Kendo UI Mobile can be used in conjunction with the RhoMobile framework, instead of the JQuery Mobile UI it uses as standard?

Any info/examples would be greatly appreciated.

Thanks.

General Discussions

answered on 23 Aug 2012

0 answers

138 views

Kendo MVC Grid - rowindex on row selection (not in script)

Hi,

I have a column in Kendo grid as a hyper link to Edit that row in another page. I have defined the link to get the "Id" of that row data as

columns.Template(@<text>

@Html.ActionLink(@item.Id.ToString(), "Edit", "CompanyDtails", new { companyId = @item.Id, currentIndex = 0 })

</text>)

.ClientTemplate("<a href='/CompanyDetails/CompanyDetail?companyId=#=Id#&currentIndex=#=0#'>Edit</a>")

.Title("Edit").Width("4%");

My requirement is, on Edit click, I need to pass the rowindex in the grid to the controller. I don't know how to define that. In the above code I have mentioned the currentIndex as 0, which should be the actual rowindex. Please let me know how to defind the rowindex in the template.

Thank you.
.

Grid

asked on 23 Aug 2012

1 answer

88 views

hybrid app

hi everyone..i'm a new in kendo ui. well i want build a hybrid mobile app that works on both andoid and iOS, and i know that u've got to define a variable in the javascript portion to define on which OS you want to test u'r app like this:

var app = new kendo.mobile.Application(document.body);

Now if want to test my hybrid app on both android and iphone emulators at the same time, do i need to declare two variables??

General Discussions

answered on 23 Aug 2012

0 answers

152 views

Chart + Ajax + PartialView not redrawing/refreshing

Hi,

I have a chart (built with the mvc helper) in a strongly typed partial view. The model in my partial view serves as the datasource for my chart.

The partial view's parent contains a form which triggers an ajax call to my controller. The partial view itself resides in a div which is the updatetargetid for my ajax form. The controller returns my partial view (containing the chart) with an updated model. The initial page load works fine. However when I post my ajaxified form, the chart will not redraw.

When looking at the response returned from my controller I see that the category/series arrays are filled with values from my updated model. However...the chart itself is not drawn.

Obviously I want my chart to be redrawn with the new updated values. Preferebly I do not want to use jQuery as I like the mvc helpers.
Any help regarding this issue is much appreciated!

Charts

asked on 23 Aug 2012

1 answer

248 views

Making a tab active

I have a tabstrip that works for hash urls, but one of the tabs does a refresh but should stay on the same view.

<div data-role="tabstrip" id="tabstripMainApp">
<a href="#viewJobs" data-icon="home">Current</a>
<a href="#viewJobsCompleted" data-icon="more">Completed</a>
<a href="#viewSettings" data-icon="about">Settings</a>
<a class="btnRefreshView" data-icon="refresh">Refresh</a>
</div>

The said tab fires this event successfully:

$('.btnRefreshView').bind('click', function () {
console.log('Refresh view :', window.location.hash)
if (window.location.hash == '#viewJobsCompleted') {
dsviewJobsCompleted.read();
} else {
dsviewJobs.read();
}
})

But then the btnRefreshView tab shows as active when I want the prior tab that was active to be active.

How do I make a different tab active please?

TabStrip (Mobile)

answered on 23 Aug 2012

3 answers

404 views

Parent/child windows

I have a scenario where I want parent and child windows. The fiddle http://jsfiddle.net/tDfSP/3/ mimics the scenario. I.e. I want to open a modal (parent) window. From this window I'll open a new modal (child) window. However, it doesn't work.

Markup from fiddle:
<div id="sub">
  sub vindue
</div>

<div id="dialog">
<input type="button" id="btn" value="Click" />
</div>

Script from fiddle:
$("#dialog").kendoWindow({
  modal: true,
  title: "Indbakke emne",
  minHeight: 300,
  width: 700,
  });
var dialog = $("#dialog").data("kendoWindow");
dialog.center();
$("#sub").kendoWindow({
  visible: false,
  modal: true, // <-- breaks parents modal state if sub window is modal, in addition the sub window is not properly modal because the parent window is not blocked
  title: "Sub",
  minHeight: 300,
  width: 70,
  });
$("#btn").click(function() {
  $("#sub").data("kendoWindow").center().open();
});

Window

answered on 23 Aug 2012

4 answers

345 views

Selecting Node On First Load Using HierarchicalDataSource

Hello,

I am using the HierarchicalDataSource to bind data to my tree.
I would like to set a node selected when the data is returned from the server on the initial load.
I am currently trying the following.

Please note: in the initialization of tree, I am trying the set the attribute "selected" to the value of a property in my model object.

data = new kendo.data.HierarchicalDataSource({

transport: {

read: {

url: "/Controller/Action",

dataType: "json"

}

},

schema: {

model: {

id: "Id",

hasChildren: "HasChildren"

}

});

$("#tree").kendoTreeView({

dataSource: data,

dataTextField: "Alias",

selected: "Selected"

});

Is this possible, what I am trying to achieve?

TreeView

answered on 23 Aug 2012

1 answer

632 views

How to disable default striped background.

I'm probably missing something simple here, but when you add a ListView to a view the entire background becomes striped. Is there a way to disable this (or alternatively, have the same striped background on all views, even if they don't contain a ListView).

Thanks

ListView (Mobile)

answered on 23 Aug 2012

10 answers

377 views

Window does not seem to center correctly in IE and FireFox 3.6

Hi,

I am using the kendoUI window with the following code:

var window = $(".productAddedToCartModalDialog").kendoWindow({
                draggable: false,
                resizable: false,
                width: "300px",
                height: "100px",
                title: "Shopping Cart Notification",
                modal: true,
                actions: ["Close"],
                visible: false
            }).data("kendoWindow");

window.center();
window.open();

However in IE 7 and 8 as well as Firefox 3.6, the window is centered on the current view port only the first time it is open. When I scroll for example further down the page and trigger the action which executes the code above, the window, just shows in the place it was shown before, which is somewhere up the page, where the user cannot see it.
I tested this in Chrome and Firefox 8 and it works fine. Firefox 3.6 does not bother me as much as the IE situation.
Is there a workaround for this problem.

Thanks!

Window

answered on 23 Aug 2012