Questions on UI for ASP.NET MVC Forum

0 answers

222 views

Use Change event to reload a grid with new date value

Coming from an .ASPX background I have had great difficulty in figuring out how I can use the DatePicker's javascript Change event to call an MVC action on a controller for the same page where a Grid is also bound.

My thinking is load the ViewBag with a value for the DatePicker when the page and Grid are first loaded and then use the Change event of the DatePicker to call an action on the controller with the new value of the DatePicker and refresh the grid with the new data.

But I can't figure out how to do it. Any guidance would be appreciated.

DatePicker

asked on 18 Jul 2012

1 answer

381 views

Returning Success State to the client

I'm using the Upload extension to upload an image, pretty straighforward. On the server I give the image file my own custom name (a guid) and then save it to server storage. Great so far, this all works fine. However what I would like to do is pass this new image url back to the client on the success event. The problem is that from what I've seen so far, returning anything other than an empty string is interpreted by the upload control on the client as an error and is routed to the "onError" handler.

Is there a way that I can pass this state back to the client and still handle it in the "onSuccess" event? Basically I want to give this path to another control on my page so that it can refresh itself with the new URL. The only other ways I can think to make this happen is to:

Handle "onError" and fudge it to also handle a success by looking at what was returned. (pretty stinky)

Have the second control perform an ajax postback "onSuccess" and reload it's own state from the server, but of course this would add an extra postback for each upload that happens. Was hoping to avoid this if possible.

Any ideas are appreciated, thanks!

Eric

Upload

answered on 18 Jul 2012

0 answers

171 views

Installation of required files

We are a little confused as to which files to include if we do not want to include the complete kendo.web.min.js
For example to include the Upload control (assuming we already have JQuery 1.7.1)
1- Include - kendo.aspnetmvc.min.js
2- Include - kendo.upload.min.js
And for the css (legacy themes
1- Include telerik.common.css
2- Include telerik.webbluse.css

Do we also need kendo.core.min.js in this case if we do not use the kendo.web.min.js ?

Would appreciate your help.

General Discussions

asked on 18 Jul 2012

3 answers

182 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

410 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

139 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

872 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

822 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

193 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

111 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