Questions on UI for ASP.NET MVC Forum

1 answer

508 views

Passing grid dataitem to another view (ASP.NET MVC).

Hi.

I currently have the following Model:

public class AwesomeDTO

{

public string ID {get;set;}

public string Name {get;set;}

public string Description {get;set;}

}

I currently have a following partial view with a grid.

@model IEnumerable<AwesomeDTO>

@(Html.Kendo().Grid(Model)

.Name("AwesomeGrid")

.Columns(columns =>

{

columns.Bound(u => u.Name).Title("Name").Filterable(true).Width(200);

columns.Bound(u => u.Description).Title("Description").Filterable(false).Width(200);

columns.Command(command => command.Custom("Manage").Click("manageUser").Text("Manage")).Title("Manage");

}

)

.Pageable()

.Filterable(filter => filter.Enabled(true))

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(10)

.Model(model => model.Id(u => u.ResourceID))

.Events(events => events.Error("onError"))

.Read(read => read.Action("GetAwesome", "Awesome"))

)

The custom command calls the following Javascript function "manageUser" defined as follows:

function manageUser(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

var result;

debugger;

$.ajax({

url: '@Url.Action("ManageAwesoem", "Awesome")',

type: 'POST',

data: JSON.parse(JSON.stringify(dataItem)),

content: 'text/html',

success: function (data) {

alert(data);

},

error: function (data) {

alert('error:' + data);

}

});

}

My Controller is as follows:

public ActionResult ManageAwesome(AwesomeDTO userToManage)

{

return View(userToManage);

}

I would like the View to render with the AwesomeDTO properties. The step where I am not quite understanding is when and how to call the ManageAwesome view so that it renders in a new location in the browser. I do not want to expose the ID of the AwesomeDTO in the URL string and so I am looking for an alternative way to achieve this from the Kendo Grid.

Any help would be appreciated.

Thanks,
Navin

Grid

answered on 14 Aug 2013

2 answers

1.8K+ views

GridEditMode.PopUp with TemplateName("customEdit") fails

I've been looking around and found a few examples, this one for example.

But I cant get it to work, if I set it to use the standard Kendo popup editor, it works as expected.

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

But when I use my template, it does not run/call the action defined in .update(), although I can see the change in the grid behind it, but nothing happens when "updated" button is clicked, cancel works, and that of course cancels changes.

I've probably missed something basic... Below is my code!

GarbageRouteIndex.cshml:

01.@(Html.Kendo().Grid<GarbageRouteViewModel>()

02. .Name("garbageRoutes")

03. .DataSource(dataSource => dataSource

04. .Ajax()

05.

.ServerOperation(false) // Needs to be used if Grouping or filtering is done in linq-qry(on WeekSchedule or Season), cos ToDataSourceResult() won be able to revers from VM. //uni0jh

06. .Model(model => model.Id(x => x.ID))

07. .Read(read => read.Action("GetGarbageRoutes", "GarbageRoute"))

08. .Update(update => update.Action("UpdateGarbageRoute", "GarbageRoute"))

09. .Group(groups => groups.Add(model => model.WeekSchedule))

10. //.PageSize(2)

11. )

12. .Columns(columns =>

13. {

14. columns.Bound(x => x.ID).Visible(false);

15. columns.Bound(x => x.SortOrderIndex).Width(10).Title("^");

16. columns.Bound(x => x.ObjectName);

17. columns.Bound(x => x.Season);

18. columns.Bound(x => x.WeekSchedule);

19. columns.Bound(x => x.Description);

20. columns.Bound(x => x.PartAreaName);

21. columns.Bound(x => x.PartAreaId).Visible(false);

22. columns.Command(command => command.Edit().UpdateText("Uppdatera").CancelText("Avbryt"));

23. })

24.

25. .ToolBar( toolbar => {

26. toolbar.Template(@<text>

27. <div class="toolbar">

28. <label class="partArea-label" for="partArea">PartArea:</label>

29. @(Html.Kendo().DropDownList()

30. .Name("partAreaFilter")

31. .OptionLabel("Alla")

32. .DataTextField("Name")

33. .DataValueField("ID")

34. .AutoBind(false)

35. .Events(e => e.Change("partAreaFilterChange"))

36. .DataSource(ds =>

37. {

38. ds.Read("GetPartAreas", "PartArea");

39.

40. })

41. )

42. </div>

43. </text>);

44. })

45. //.HtmlAttributes(new { style = "height: 460px" })

46. //.Editable(editable => editable.Mode(GridEditMode.PopUp)) //detta är kendos built in-variant.

47. .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("GarbageRouteEdit"))

48. //.Groupable()

49. .Pageable()

50. .Sortable()

51.

52.)

GarbageRouteIndex.cshtml:

001.@model Roa.Common.DTO.GarbageRouteViewModel

002.

003.@Html.HiddenFor(model => model.ID)

004.

005. <div class="span8">

006. <div class="span3">

007. <div class="editor-label">

008. Beskrivning

009. </div>

010. <div class="editor-field">

011. @Html.TextAreaFor(model => model.Description, new { @required="*", @placeholder="Beskrivning här..." } )

012. @Html.ValidationMessageFor(model => model.Description)

013. </div>

014. <div class="editor-label">

015. Veckodag

016. </div>

017. <div class="editor-field">

018. @Html.TextBoxFor(model => model.Weekday, new { @required="*" })

019. @Html.ValidationMessageFor(model => model.Weekday)

020. </div>

021.

022. <div class="editor-label">

023. Start månad

024. </div>

025. <div class="editor-field">

026. @Html.TextBoxFor(model => model.StartMonth, new { @required="*" })

027. @Html.ValidationMessageFor(model => model.StartMonth)

028. </div>

029. <div class="editor-label">

030. Start dag

031. </div>

032. <div class="editor-field">

033.@* @(Html.Kendo().DateTimePickerFor(model => model.StartDay)

034. .Value(DateTime.Now)

035. .Max(DateTime.Now)

036. .Events(e => e.Change("startChange"))

037. )*@

038. @Html.TextBoxFor(model => model.StartDay, new { @required="*" })

039. @Html.ValidationMessageFor(model => model.StartDay)

040. </div>

041.

042. <div class="editor-label">

043. Start timma

044. </div>

045. <div class="editor-field">

046. @Html.TextBoxFor(model => model.StartHour, new { @required="*" })

047. @Html.ValidationMessageFor(model => model.StartHour)

048. </div>

049. </div>

050. <div class="span4">

051.

052.

053. <div class="editor-label">

054. Slut månad

055. </div>

056. <div class="editor-field">

057. @Html.TextBoxFor(model => model.EndMonth, new { @required="*" })

058. @Html.ValidationMessageFor(model => model.EndMonth)

059. </div>

060.

061. <div class="editor-label">

062. Slut dag

063. </div>

064. <div class="editor-field">

065. @Html.TextBoxFor(model => model.EndDay, new { @required="*" })

066. @Html.ValidationMessageFor(model => model.EndDay)

067. </div>

068.

069. <div class="editor-label">

070. Slut timma

071. </div>

072. <div class="editor-field">

073. @Html.TextBoxFor(model => model.EndHour, new { @required="*" })

074. @Html.ValidationMessageFor(model => model.EndHour)

075. </div>

076.

077. <div class="editor-label">

078. Ojämn vecka

079. </div>

080. <div class="editor-field">

081. @Html.CheckBoxFor(model => model.OddWeeks, new { @required="*" })

082. @Html.ValidationMessageFor(model => model.OddWeeks)

083. </div>

084.

085. <div class="editor-label">

086. Jämn vecka

087. </div>

088. <div class="editor-field">

089. @Html.CheckBoxFor(model => model.EvenWeeks, new { @required="*" })

090. @Html.ValidationMessageFor(model => model.EvenWeeks)

091. </div>

092. </div>

093. <div class="span8">

094. <input type="file" name="files" id="files" multiple="multiple" value=" " />

095. <p>

096.

097. </p>

098.

099. </div>

100. </div>

101.

Grid

answered on 14 Aug 2013

1 answer

176 views

How to customize validation in pop-up editor?

Additionally to out of the box Kendo Validator features I need to:
1. style whole Kendo widgets when they are invalid
2. style labels when associated input\widget is invalid
3. and some other features...

I wan't modify Kendo source code so far as possible. So I wrote my own jQuery plugin "xxxValidator" that internally uses (applies) Kendo validator and initializes MutationObserver to react to Kendo Validator activity and perform additional tasks.

Is there "legal" and "elegant" way to attach my customized validator to pop-up\inline editor in the Grid? I look at kendoEditable and the first idea is to "override" "refresh()" function: call original refresh() and then call xxxValidator(). And in this case xxxValidator() should not call kendoValidator on the container again if it's already present.

Grid

answered on 14 Aug 2013

4 answers

678 views

[Solved] HTTP Post request from Kendo MVC UI menu item

Is is possible to specify a POST action when defining items in the Kendo MVC UI Menu?

For example, I would like to include a menu item for the user to logout, which is supported by the following controller action:
(AccountController)

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult LogOff()

{
_webSecurityService.Logout();

return RedirectToAction("Index", "Home");

}

(sample.cshtml)

@(Html.Kendo().Menu()

.Name("menu")

.Items(items =>

{

items.Add().Text("Home").Action("Index", "Home");

//...

items.Add().Text(User.Identity.Name)

.Items(children =>

{

//...

// this results in a 404 error

children.Add().Text("Sign out").Action("LogOff", "Account");

});

})

)

I'm trying to replicate the out-of-box MVC sample project that looks similar to this:
(_LoginStatus.cshtml)

<text>

Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new {           @class = "username", title = "Manage" })!

@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {

@Html.AntiForgeryToken()

<a href="javascript:document.getElementById('logoutForm').submit()">Sign out</a>

}

</text>

Menu

answered on 14 Aug 2013

1 answer

1.2K+ views

DateTime Value setter not working when Date Kind is Local

Hello.

I'm using the Datepicker, but it will not work when the Date has a Kind of type Local.

It renders as :

<input data-val="true" data-val-date="The field FechaInicio must be a date." data-val-required="El campo FechaInicio es obligatorio." id="FechaInicio" name="FechaInicio" type="date" value="2013-07-20T15:00:00.000Z" />

Instead of the proper way which works that is :

<input data-val="true" data-val-date="The field FechaInicio must be a date." data-val-required="El campo FechaInicio es obligatorio." id="FechaInicio" name="FechaInicio" type="date" value="15/07/2013" />

I'm using the Kendo UI MVC Wrapper, and I'm getting this weird behaviour when posting the date to the controller from javascript with:

date.toISOString()

DatePicker

answered on 13 Aug 2013

1 answer

203 views

How to configure KendoUIMvc project as intranet app

By default the KendoUI MVC project template for VS 2012 is an internet project. After I create the project, I want to make it an intranet project(window integrated authentication). I have done the following on the project properties:

1. Disabled the Anonymous Authentication
2. changed Managed Pipeline Mode to Integrated.
3. Enabled Windows Authentication

but it always redirects me to http://localhost:55063/login.aspx?ReturnUrl=%2F. Of course, the file doesn't exist. It works when I refresh with the url.
Please let me know how to remove this redirect.

Thanks.

Yingyi

Installer and VS Extensions

answered on 13 Aug 2013

3 answers

234 views

[Solved] Modifying Grid EditorTemplate result with the viewmodel

Hi,

What I'm trying to do is relatively close to the Grid Editing custom editor sample. The difference in my case is that the list of categories must not be the same for all products. In fact, depending on the product properties, I want to display only a subset of all categories.
In the EditorTemplate ClientCategory.cshtml a model is defined "@model Kendo.Mvc.Examples.Models.ClientCategoryViewModel" but this model is always null. Is there a way to access the ClientCategoryViewModel in the EditorTemplate partial view ?
Or is there another way to acheive this ?

Thank you,
Regards,

General Discussions

answered on 13 Aug 2013

1 answer

99 views

Summation with Multi-row select

Hi there,

I have a grid which contains "Quantity" and "Amount" columns. When the user selects multiple rows from the grid, they can then click a "Sum" button which will calculate the Total Quantity and Total Amount based on the current selected rows. How can I achieve this?

Grid

answered on 13 Aug 2013

1 answer

2.0K+ views

DatePicker value is empty when valid value is set to the input on the server side

Test case:
1. I type "March 2015" into DatePicker
2. Kendo validator accepts this value, i.e. "kendo.parseDate(input.val()) !== null". So the form can be submitted.

The first problem: pop-up calendar does not show the date 03/01/2015. Why?

3. On the server side I have model property correctly binded from the incoming value "March 2015" (so it has value "03/01/2015"). And I return the same view with the same model. That value is again rendered as <input value="March 2015"...>

The second problem: I have empty value in datepicker in browser. Is there a way to get value in datepicker in this situation? I'm awared about parseFormats parameter. But why the default behavior is so strange? Why you do not use kendo.parseDate(input.value) when no parse formats are given explicitly?

The same problem is here when I type date in some other formats - '2013/02/13' for example. Kendo Validator accepts this value, MVC default model binder accepts this value, but widget does not. It seems to me you use ""format" property of DatePicker options to parse a value when parseFormats are not given explicitly.

DatePicker