Questions on Kendo UI for jQuery Forum

1 answer

248 views

Inline editing buttons without create command.

Hi,

I have a grid that has a column with a destroy button but no create button. I want the user to be able to delete or add new records but not change them. The problem is the grid won't create the update and cancel buttons because it is looking for a create button in my command column. I fixed it by changing the line looking for the create column to this:

command = getCommand(column.command, "edit") || getCommand(column.command, "destroy");

Is there a better way to do this without modifying the kendo code? Or could this be added in an upcoming release so I don't have to modify the code again when updating?

Thanks!

Grid

answered on 24 Dec 2012

1 answer

128 views

Best practice for modeling collection properties

Hello all,

I am struggling with the best way to model collection properties for a kendo.data.Model used in a kendo.data.DataSource, and configure it is such a way that data-bind attributes understand. For example, say my view model looks like this:

var entityModel = kendo.data.Model.define({

id: 'Id',

fields: {

Id: { editable: false, defaultValue: '00000000' },

Name: {},

Created: { type: 'date' },

Contract: {

StartDate: { type: 'date' },

EndDate: { type: 'date' },

Received: { type: 'date' }

},

Vendor: {

Name: {},

Street: {},

City: {},

State: {},

Zip: {},

Phone: {},

Email: {}

},

Invoices: []

}

});

var entityDataSource = new kendo.data.DataSource({

schema: {

model: entityModel

},

transport: {

...

}

});

As you can see, the Invoices property is an array - a collection of invoices. How do I get the DataSource to understand this, and how would I bind Invoices to the view? Would this work?

<div data-template="invoiceTemplate" data-bind="source: Invoices"></div>

What if I wanted to represent this collection of Invoices as a kendoGrid which I could add, edit, and delete from? Is this functionality supported out-of-the-box or will I need to create a separate Invoice DataSource?

Thanks for any assistance you can provide.

Data Source

answered on 24 Dec 2012

1 answer

116 views

Window Error: Microsoft JScript runtime error: Invalid template

i have a error in window .
my solution:

Person:

@{

ViewBag.Title = "Index";

}

<script src="@Url.Content("~/scripts/models/personModel.js")" type="text/javascript"></script>

<script src="@Url.Content("~/scripts/stores/personStore.js")" type="text/javascript"></script>

<script src="@Url.Content("~/scripts/views/personView.js")" type="text/javascript"></script>

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

@Html.Partial("PersonDetail")

</script>

<div class="k-rtl">

<div id="PersonGrid"></div>

</div>

and PersonDetail:

@*

@(Html.Kendo().TimePicker()

.Name("timepicker")

.Value("10:00 AM")

)

*@

and PersonView.js:

$(function () {

$("#PersonGrid").kendoGrid({

dataSource: personStore,

height: "600px",

sortable: {

mode: "multiple",

allowUnsort: true

},

pageable: true,

//groupable: true,

scrollable: true,

selectable: "row",

filterable: true,

columns: [

{ command: [{ name: "edit", text: "edit" }, { name: "destroy", text: "del" }], title: "", width: 150 },

{ field: "FName", title: "First Name", width: 50 },

{ field: "LName", title: "Last Name", width: 100 }

],

editable: { mode: "popup",confirmation: "Are you sure?", template: kendo.template($("#PersonDetail").html()) },

edit: function (e) {

var title = $(e.container).parent().find(".k-window-title");

var update = $(e.container).parent().find(".k-grid-update");

var cancel = $(e.container).parent().find(".k-grid-cancel");

$(title).html('<div>Edit</div>');

$(update).html('<span class="k-icon k-update"></span>Save');

$(cancel).html('<span class="k-icon k-cancel"></span>Cancel');

},

toolbar: [{ name: "create", text: "Add"}]

});

after click edit button in grid, i see this error:

Microsoft JScript runtime error: Invalid template:'

if remove this

@(Html.Kendo().TimePicker()

.Name("timepicker")

.Value("10:00 AM")

)

in persiondetail is working!

please help me.

Window

answered on 24 Dec 2012

3 answers

331 views

Replace Tab HTML

Hello,

Is there a way to replace Tab's HTML? So far, the only solution I have is to remove the existing tab and then create a new tab with the updated HTML.

Best regards,

Simon

TabStrip

answered on 24 Dec 2012

5 answers

549 views

Datepicker not working at all in Chrome

Hey there,

I'm having a problem with the datepicker in google chrome. It builds the input and calendar icon, but if I click the calendar icon, nothing happens. It's even a problem on the demo page on the KendoUI website: http://demos.kendoui.com/web/datepicker/index.html

The version of Chrome i'm using is: Version 23.0.1271.64 m

Has anyone else got this problem?

Cheers,
Ben

Date/Time Pickers

answered on 24 Dec 2012

1 answer

125 views

Not able to bind dynamic json data to Kendo UI

I tried the same thing explained in other thread. But I am not able to bind the json data to Kendo UI grid.
<div id="grid"></div>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="../../Scripts/kendo/kendo.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var jData = new kendo.data.DataSource({
transport: {
read: {
url: "/Test/IndexTest",
dataType: "json"
}
},
});

$("#grid").kendoGrid({
dataSource: jData,
columns: [
{
field: "TestDe",
title: "Description"
},
{
field: "Url",
title: "TestStr"

}],
height: 200,
scrollable: true,
pageable: true,
sortable: {
mode: "multiple"
}
});
});
</script>

Json format is {"TestDe":null,"TestList":[],"Url":"dsgyuddufgufh"}

Code behind Controller
public JsonResult IndexTest()
{
TestTableSql t = new TestTableSql();
var a=t.GetTestTableList();
return Json(a, JsonRequestBehavior.AllowGet);
}

Grid

answered on 24 Dec 2012

1 answer

101 views

Dragging splitter causes screen to be dark

Hi I"m using the basic splitter and I am wondering why when I drag to resize there is a dark overlay over the entire viewport. This does not happen in the demos and I've done nothing to implement this? Am i dong something wrong?

<div id="splitter" style="min-height:700px">

<div class="left-panel" style="width:100px">

<div id="cashPanel" class="left-panel"></div>

</div>

<div >

<div id="offsetPanel" class=""></div>

</div>

<div>

<div id="premiumList" style="height:100%">

<div id="searchPremMatchList"></div>

</div>

$("#splitter").kendoSplitter({

orientation: "horizontal",

panes: [

{ collapsible: false, size: "250px" },

{ collapsible: false, size: "700px" },

{ collapsible: false }

]

});

Splitter

answered on 24 Dec 2012

1 answer

242 views

ModalView with input text field, closing on Android when keyboard appears.

Hi There,

I have a ModalView with an input text field, which closes on Android as soon as the onscreen keyboard appears.

In the browser (Chrome) it works ok, here's the source.

<div data-role="modalview" id="modalview-add-to-cart" style="width: 95%; height: 270px;">

<div data-role="header">

<div data-role="navbar">

<span>Add to order</span>

<a data-click="closeModalView" data-role="button" data-align="right">Cancel</a>

</div>

<div class="modal-view-inset">

<div id="modalview-add-to-cart-order"></div>

<div><input type="text"

id="modalview-add-to-cart-customer-note" placeholder="Any special instructions?"></input></div>

</div>

<div data-role="footer">

<a data-click="addToCart" type="button"

data-role="button">Add To Your Order</a>

</div>

I'm invoking it from a function call (triggered by a data-role="touch" data-tap="handler")

$('#modalview-add-to-cart').data("kendoMobileModalView").open();

However, if I launch it using:

<a data-rel="modalview" href="#modalview-add-to-cart" class="menu-item-buy" >+</div>

It works as expected, how can I stop it closing when opened by the javascript?

ModalView

answered on 24 Dec 2012

1 answer

126 views

Shared Layout Contains NavBar. Can I update NavBar title using MVVM inside the View that uses Layout?

I'm attempting set the NavBar title in a shared Layout dynamically using MVVM. I would like to do this within each View that implements that Layout. I know that I can use the data-title attribute on the View to set the NavBar's title at runtime; however, the reason I would like to be able to set it dynamically is so that the NavBar title can represent the application state that will change with each ajax call done within the separate views. Since the ajax calls will update the view-model, it would be convenient to have these change propagated to the NavBar's title automatically. Short of eliminating the layout and putting a separate NavBar within each View, is there a way for the View to update the Layout's NavBar on the fly?

General Discussions