Questions on UI for ASP.NET MVC Forum

3 answers

177 views

Grid popup editor window config not being applied

For example

.Editable(x=>x.Mode(GridEditMode.PopUp).Window(w=>w.Title("Edit Client")))

The window title is still the default, "Edit". The other window options aren't applied either.

Grid

answered on 17 Jul 2012

2 answers

404 views

[Solved] Hide grouping header by default

The old Telerik Mvc Extensions code goes something like this..
    .Groupable(grouping => grouping.Groups(groups =>
        {
            groups.Add(p => p.ModuleName);
        }).Visible(false)
   )

Anyone knows the equivalent code for Kendo MVC?

Thanks.

Grid

answered on 17 Jul 2012

0 answers

138 views

Hide select icon and OpenOnFocus?

These options are available in the legacy Telerik MVC Ext.
DatePicker:
ShowButton, OpenOnFocus
TimePicker
ShowButton, OpenOnFocus

It seems Kendo Mvc Date/Time pickers no longer support them?

Thanks.

DatePicker

asked on 17 Jul 2012

1 answer

865 views

MVC Grid ClientTemplate - Invalid Template Error

Using MVC4, trying to load a partial view using a ClientTemplate in the grid and a Kendo Window. I'm getting an Invalid Template error. Any help is appreciated. Thanks!

Grid:

@(Html.Kendo()

.Grid<TestKendoGrid.Models.myTransactions>()

.Name("Grid")

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

.Columns(columns =>

{

columns.Bound(o => o.TranDt).Width(150);

columns.Bound(o => o.Description).Width(300);

columns.Bound(o => o.Category).Width(125);

columns.Bound(o => o.Amount).Width(100).Format("{0:c}");

columns.Bound(o => o.TranID)

.ClientTemplate(

Ajax.ActionLink("Details",

"ShowDetails",

"Home",

new { id = "<#=TranID#>" },

new AjaxOptions

{

UpdateTargetId = "TranDetails",

InsertionMode = InsertionMode.Replace,

OnSuccess = "ShowWindow",

HttpMethod = "POST"

},

new { name = "Details<#=TranID#>" }

).ToString()

);

columns.Command(command => command.Destroy());

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.TranID))

.Events(events => { events.Error("error_handler"); })

.Create(create => create.Action("_CreateTransactionKendo", "Home"))

.Read(read => read.Action("_SelectTransactionsKendo", "Home"))

.Update(update => update.Action("_SaveTransactionKendo", "Home"))

.Destroy(destroy => destroy.Action("_DeleteTransactionKendo", "Home"))

.Batch(true))

Kendo Window:

@{ Html.Kendo().Window()

.Name("DetailWindow")

.Title("Transaction")

.Events(events => events.Close("RefreshGrid"))

.Content(@<text>

<div id="TranDetails">

</div>

</text>)

.Width(425).Height(310).Visible(false).Render();

}

Scripts:

<script>

function ShowWindow() {

$("#DetailWindow").data('kendoWindow').center().open();

}

</script>

Controller:

[HttpPost]

public PartialViewResult ShowDetails(int id)

{

List<myTransactions> list = (List<myTransactions>)TempData["Trans"];

var target = list.Find(p => p.TranID == id.ToString());

return PartialView("_TransDetail", target);

}

Error:

Microsoft JScript runtime error: Invalid template:'<tr data-uid="#=uid#"><td >${TranDt}</td><td >${Description}</td><td >${Category}</td><td >${kendo.format("{0:c\}",Amount)}</td><td ><a data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="ShowWindow" data-ajax-update="#TranDetails" href="/Home/ShowDetails/%3C%23%3dTranID%23%3E" name="Details<#=TranID#>">Details</a></td><td ><a class="k-button k-button-icontext k-grid-delete" href="\#"><span class="k-icon k-delete"></span>Delete</a></td></tr>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<tr data-uid="'+(uid)+'"><td >'+(e(TranDt))+'</td><td >'+(e(Description))+'</td><td >'+(e(Category))+'</td><td >'+(e(kendo.format("{0:c}",Amount)))+'</td><td ><a data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-success="ShowWindow" data-ajax-update="';TranDetails" href="/Home/ShowDetails/%3C%23%3dTranID%23%3E" name="Details<;o+='=TranID';>">Details</a></td><td ><a class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-delete"></span>Delete</a></td></tr>;o+=;}return o;'

Grid

answered on 17 Jul 2012

4 answers

808 views

Date filtering not working with grid

Hi there,

I'm busy migrating from the ASP.Net MVC controls to the Kendo MVC controls and we're having an issue with the date column. For the ASP grid we would do:

columns.Bound(o => o.MyDate).Format("{0:dd MMMM yyyy}");

This worked well. Using the same line in the Kendo grid gave an incorrect date format, so for the Kendo grid we're doing this:

columns.Bound(o => o.MyDate).ClientTemplate("#= kendo.toString(toDate(MyDate),'dd MMMM yyyy') #");

With a bit of Javascript magic this works too. However, the filtering just shows text boxes instead of allowing me to choose a date like the ASP MVC filter does. I've attached a screenshot since I'm probably not explaining this very well...

Is this a bug or am I doing this incorrectly?

Thanks.

Grid

answered on 16 Jul 2012

1 answer

189 views

Editor missing all icons

Theme is picked up (colors etc) but regardless of theme the editor is missing all of the icons. See attached.

Editor

answered on 16 Jul 2012

0 answers

98 views

How to use customized edit box for edit column cammand instead of the default one?

When configuring the grid, I add following to edit the row using a popup box
columns.Command(command => { command.Edit()}
and
.Editable(editable => editable.Mode(GridEditMode.PopUp))

However, kendo is using a default edit box (don't know where it coming from). I want to use a edit box created by myself instead of this default one. How do I achieve it?

Grid

asked on 16 Jul 2012

1 answer

1.3K+ views

[Solved] Date field not rendering correct in browsers that support HTML 5

I've noticed that the Kendo Date control is rendering weird under browsers that support HTML 5. I don't see my selected date and I end up with a down arrow to the left of the calendar graphic. It appears to happen because the input box that is rendered is rendering as a "date" type and not a "text" type, so the browser itself is adding its own support.

Here's an example of the HTML that is rendered:

<input class="k-input" id="CashReceipt_ReceivedOn" name="CashReceipt.ReceivedOn" type="date" value="7/15/2012" data-role="datepicker" style="width: 100%; ">

When I compared that to the one in the example project (which appears to work), I get this (note the type="text" in this version):

<input class="k-input" id="datepicker" name="datepicker" style="width: 100%; " type="text" value="10/10/2011" data-role="datepicker">

I'm not really sure what's triggering the difference or how to change this. Any ideas?

DatePicker

answered on 16 Jul 2012

1 answer

614 views

Dynamically set grid height

I would like to do something like this in the Grid requestStartHandler:

var requestStartHandler = function (e) {
var grid = $("#DefaultGrid").data("kendoGrid").height($(document).height() - 350);
}

What is the Grid Client API to know how to set the height with JavaScript?
Best regards
Jaume Aguiló

Grid

answered on 16 Jul 2012

2 answers

340 views

custom command

Hi! Im new to kendo ui. Please help me on how to implement custom command in server editing... Thanks!

Grid

answered on 15 Jul 2012