Questions on Kendo UI for jQuery Forum

0 answers

60 views

Adding a new Listview item using a template calls the Create action multiple times!

Hi,
I have an MVC4 application and am trying to use the Listview using the MVC wrappers. I am using an edit and a view template.
If there are 4 items in my list and I add a new one the Create action is called 5 times, thus 5 records get added.

I am using the latest Q2 trial version. However I previously had downloaded the beta trial version which included an MVC example project which showed the exact same behavour. Is this a bug?
(Note the same issue occurs for other actions as well)

<div class="k-toolbar k-grid-toolbar">

<a id="addRoleButton" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new Role</a>

</div>

@(Html.Kendo().ListView<iProjX.Models.RoleModel>(Model.Roles)

.Name("rolesListView")

.TagName("div")

.ClientTemplateId("rolesList")

.Editable()

.Pageable()

.DataSource(dataSource => dataSource

.Model(model =>

{

model.Id("RoleId");

model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);

model.Field(f => f.Title);

model.Field(f => f.Description);;

})

.Events(e => e

.Error("rolesListViewData_error")

.Change("rolesListViewData_change")

.RequestStart("rolesListViewData_requestStart"))

.Create(create => create.Action("createRole", "Project"))

.Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))

.Update(update => update.Action("updateRole", "Project"))

.PageSize(30)

)

.Events(e => e

.Change("rolesListView_change")

.Edit("rolesListView_edit")

.DataBound("rolesListView_databound"))

)

View Template

//View template

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

<div class="roleView" >

<div> ${Title} </div>

<div> ${Description} </div>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>

<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>

</div>

</script>

Edit template

@model iProjX.Models.RoleModel

<div class="roleView" id = "newRoleForm2" >

@Html.ValidationSummary(true)

@Html.HiddenFor(model => model.ProjectId)

@Html.HiddenFor(model => model.RoleId)

<div class="editor-label">

@Html.LabelFor(model => model.Title)

</div>

<div class="editor-field">

@Html.TextBoxFor(model => model.Title, new { style = "width:99%", maxlength = 100 })

<span data-for="Title" class="k-invalid-msg"></span>

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Description)

</div>

<div class="editor-field">

@Html.TextAreaFor(model => model.Description, new { style = "width:100%; height:100px"})

<span data-for="Description" class="k-invalid-msg"></span>

</div>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" onclick="updateClick()" href="\\#"><span class="k-icon k-update"></span>Save</a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>

</div>

ListView

asked on 23 Jul 2012

5 answers

300 views

Modal animation settings

Just updated to the 2012.2.710 drop. A lot of great improvements! However the modal animation appears to have changed. It's fading from 100% to 50% which gives the impression of a sharp flash. Is there a way to configure this? I would like it to fade from 0% to 50%.

Thanks

Jonathan

Window

answered on 23 Jul 2012

0 answers

138 views

kendoGrid Custom Popup Edit Template function anonymous(data) { var o,e=kendo.htmlEncode;with(data){o='

Please see here for details, as the following post should not be marked with a correct answer. No solution has been presented.

http://www.kendoui.com/forums/ui/grid/custom-popup-editor-with-additional-fields.aspx

Dan

Templates

asked on 23 Jul 2012

0 answers

64 views

Line Chart Tool tip to display on left rather than right.

Hey there,

Quick question, when working with the charts the tool tips appear on the right side of the data point by default it seems is there a way I can reverse to display on the left hand side of the point instead? Appreciate and possible help , Thanks!

Charts

asked on 23 Jul 2012

0 answers

113 views

knockout.js using datasource binding - how to format money and datetime data

Hi,

I am using MVC4 single page application on VS 2010 together with upshot.js and knockout.js.
I am using the following MVVM javascript (as my view-model js):

var dsCharges = upshot.RemoteDataSource({
providerParameters: { url: constants.serviceUrlItem, operationName: "UpdateCharge" },
provider: constants.provider,
entityType: "Charge:#My.Models"
}).refresh();
ko.applyBindings(new ChargeViewModel(dsCharges));

As you can see above, I am using a datasource binding to populate my grid. Data is displayed on my grid.
I need help to format my data which are of type money and datetime.
How do I format it using knockout.js? Can you please show me an example code snippet on how to do this?

Many thanks,

MVVM

asked on 22 Jul 2012

0 answers

77 views

Easier way to style

Am I missing something? If I pass in July 25th & 26th into the dates field, aside form a custom template is there no way to decorate those days?? Not even a class or anything added?

Calendar

asked on 22 Jul 2012

0 answers

96 views

Area Chart

Hi,
I want to display an area chart but i couldn't. The framework is rendering a column chart every time.
Here's my code :
$('#chart_div').kendoChart({
theme: $(document).data('kendoSkin') || 'default',
legend: {
position: 'top'
},
chartArea: {
background: 'transparent'
},
seriesDefault: {
type: 'area'
},
dataSource: {
transport: {
read: {
url: source,
dataType: 'json'
}
},
sort: {
field: 'year',
dir: 'asc'
}
},
valueAxis: {
labels: {
format: '{0}'
}
},
tooltip: {
visible: true,
format: '{0}'
},
series: [{
field: 'calls',
name: 'Calls',
},{
field: 'limit',
name: 'Limit' ,
}],
categoryAxis: {
field: 'day',
labels: {
rotation: -90
}
}
});

Thanks.

Charts

asked on 22 Jul 2012

2 answers

172 views

Custom filtering?

The default grid filters are OK, but we'd really like to be able to customize them. For example, I want to be able to set a simple filter for a column that consists of a drop down list of all items that exist in that column. Excel does this quite well. Is it possible to add out own filtering UI?

Grid

answered on 22 Jul 2012

0 answers

135 views

Autocomplete with additional filter criteria

I am using an Autocomplete and a listview bound to the same datasource. The autocomplete allows the user to filter the data in the listview, and things work just great. But now I need to add an Active criteria to the filter, this is a boolean which additionally allows the user to view records which are marked InActive. The problem I'm having is that it seems that it seems that if the autocomplete is bound to a datasource it thinks it owns the datasource where filtering is required in that the search function sets the datasource's filter. I thought about using two datasources so that the autocomplete just has it's own datasource but I would like the autocomplete to also use the Active criteria but I don't see any available hooks.

Is there a way to have the autocomplete use additional criteria when calling to the datasource?

Thanks,
Shane Holder

AutoComplete

asked on 21 Jul 2012

1 answer

220 views

Binding swipe events on data bound mobile listview

I have a mobile listview bound to a model array.
I would like to bind the swipe events on the list view items to display a delete button (the iOS way).
I have implemented the swipe events as explained at http://demos.kendoui.com/mobile/swipe/index.html.
Unfortunately I cannot specify the function that binds the events in the data-init attribute of the view because my listview is dynamic.
1) Which event shall I use (change event on the model? how can I be sure that it is called after the listview is updated?)
2) How to unbind the handlers before binding them again?

Optionally:
3) Is there any way to make the items in the list view draggable to be reordered?

ListView (Mobile)

answered on 21 Jul 2012