Questions on UI for ASP.NET MVC Forum

3 answers

71 views

Need help on a grid problem after server validation

Hi,

I had spent a few days on debugging this problem on my Kendo Grid, but I couldn't figure out why my grid data in the grid is broken after the server returns a validation error. I have deployed this sample to the cloud and was hoping that someone could help to take a look.

Here are my repro steps:

1. Go to this website in the cloud at http://mandala.cloudapp.net
2. Click "Add New Character" to add one new record. Type anything on character and actor. Put a bad Url such as "http://<>".
3. Click "Submit Changes" to save the changes
4. Server will validate the bad URL and return an error. Dismiss the error dialog.
5. Now fix the bad URL and put in a good one.
6. Click "Submit Changes" again. This time it won't work.

I spent hours to debug this. Even the editing stays, I noticed the pending data in the datasource got erased after the validation. I don't know if there is a bug on my side, but I could use some help here.

Thanks in advance.

Grid

answered on 29 May 2014

1 answer

260 views

Multiple EditorFor

Hi,

i have problems with multiple editors on the same page:

01.@model IEnumerable<SampleViewModel>

02. [...]

03.@foreach (var item in Model)

04.{

05. <div class="form-horizontal">

06. <div class="form-group">

07. @Html.LabelFor(modelItem => item.Html, new { @class = "control-label col-md-2" })

08. <div class="col-md-10">

09. @Html.Kendo().EditorFor(modelItem => item.Html).Tools(tools=>tools.ViewHtml()).Encode(false)

10. </div>

11. </div>

12. </div>

13.

} [...]

I know that each editor needs a unique name, but than a post to the controller with the correct model doesn't work... what is the best practice here?

Editor

answered on 29 May 2014

3 answers

159 views

Do Windows work on mobile?

I am currently using a window to function as a modal popup. While the window works without issue on the desktop, it does not seem to open on Android - Chrome. Does the window not support mobile browsers, or is there a bug in my code?

The view code:

<nav class="navbar navbar-default" role="navigation">

<ul class="nav navbar-nav">

<li

>@Html.ActionLink(Resources.NavigationLink_Feedback, "Index", "Feedback", routeValues: null, htmlAttributes: new { @class = "feedbackmodallink" })</

li>

</ul>

</nav>

@(Html.Kendo().Window()

.Name("FeedbackWindow")

.Title(Resources.Title_Feedback)

.LoadContentFrom("Index", "Feedback")

.Actions(action => action.Maximize().Close())

.Modal(true)

.Iframe(true)

.Visible(false)

.AutoFocus(true)

.Events(events => events.Refresh("FeedbackWindow_Refresh"))

)

with the following javascript:

$(document).ready(function () {

var tFeedbackWindow = $("#FeedbackWindow").data("kendoWindow");

$("a.feedbackmodallink").click(function (e) {

// Was the middle button clicked?

// (allow link to still be opened in new tab with middle click should user choose)

if (e.which != 2)

{ // No

e.preventDefault();

// Show feedback modal

MyNameSpace.TelerikWindow.OpenWindow(tFeedbackWindow);

}

});

$(window).resize(function (e) {

// Is feedback modal currently visible?

if (tFeedbackWindow.options.visible) {

// Yes, resize modal to new browser size

MyNameSpace.TelerikWindow.ResizeWindow(tFeedbackWindow);

}

});

function FeedbackWindow_Refresh() {

// Resize window to content

MyNameSpace.TelerikWindow.ResizeWindow(this);

}

MyNameSpace.TelerikWindow = {

OpenWindow: function (tWindow) {

/// <summary>Opens a Telerik Window after ensuring the window is refreshed back to its original URL and resized to its contents.</summary>

/// <param name="tWindow" type="kendoWindow">The Telerik Window to open.</param>

// Does the window have an iframe?

if (tWindow.options.iframe) {

// Yes

// Get iframe document

var iframe = tWindow.element.children("iframe")[0];

// Get iframe's original and current urls

var originalURL = iframe.src;

var currentURL = iframe.contentDocument.location.href;

// Do the urls match?

if (originalURL !== currentURL) {

// No, refresh window back to original url

tWindow.refresh();

} else {

// Yes, ensure window is sized to contents

this.ResizeWindow(tWindow);

}

// Open window

tWindow.open();

},

ResizeWindow: function (tWindow, minWidth, minHeight) {

/// <summary>Resizes a Telerik Window to its contents while keeping window within screen bounds.</summary>

/// <param name="tWindow" type="kendoWindow">The Telerik Window to resize.</param>

/// <param name="minWidth" type="int">The desired min width of window (defaults to 800px to keep bootstrap small columns from wrapping)</param>

/// <param name="minHeight" type="int">The desired min height of window (defaults to 375px to keep intial IE load from being too short)</param>

// Ensure minWidth and minHeight are defined

minWidth = (typeof minWidth === "undefined" ? 800 : minWidth);

minHeight = (typeof minHeight === "undefined" ? 375 : minHeight);

var oldWidth = tWindow.options.width;

var oldHeight = tWindow.options.height;

var newWidth = oldWidth;

var newHeight = oldHeight;

// Does the window have an iframe?

if (tWindow.options.iframe) {

// Yes

// Get iframe content size (adding 40px height buffer)

var $iframeBody = tWindow.element.children("iframe").contents().find("body");

var iframeWidth = $iframeBody.width();

var iframeHeight = $iframeBody.height() + 40;

// Initialize set new width and height to iframe dimensions

newWidth = (iframeWidth > minWidth ? iframeWidth : minWidth);

newHeight = (iframeHeight < minHeight ? minHeight : iframeHeight);

}

// Ensure window fits within screen bounds (using 50px buffer)

var browserWindowWidth = window.innerWidth - 50;

var browserWindowHeight = window.innerHeight - 50;

newWidth = (newWidth >= browserWindowWidth ? browserWindowWidth : newWidth);

newHeight = (newHeight >= browserWindowHeight ? browserWindowHeight : newHeight);

// Resize window, if needed

if (newWidth !== oldWidth || newHeight !== oldHeight) {

tWindow.setOptions({ width: newWidth, height: newHeight });

}

// Ensure window is still centered

tWindow.center();

}

};

Window

answered on 29 May 2014

1 answer

131 views

Grid as an Excel sheet

Hello,

Is it possible for the MVC grid control to parameter/render as an Excel sheet, with formulas in cells, etc. ?
Besides, does it exist an Excel UI theme ?

Thanks

Grid

answered on 29 May 2014

1 answer

283 views

DatePicker

Hi,
I am using Kendo MVC DatePicker. I am trying to disable all the dates except few for the user to select. It is working fine on initial view. When I change the month the dates are getting enabled. I not able to catch the change event for month.(when month is changed).Below is the code. Can you please let me know if you have questions.

<div id="email-settings">
<div style="margin-top: 59px; margin-left: 180px">
@(Html.Kendo().DatePicker()
.Name("calendar")
.Value(DateTime.Today)
.Footer(" ")
.Min(DateTime.Today)
.Depth(CalendarView.Month)

.Events(e =>
{
e.Open("Checkthis");
e.Change("Calender_change");
e.Close("Checkthis");

})
.MonthTemplate("# if ($.inArray(+data.date, events) != -1) { #" +
"#= data.value #" +
"# } else { #" +
"<div class='disabled'>#= data.value #</div>" +

"# } #")

)
</div>
</div>
<script>

var today = new Date(),
events = [
+new Date(today.getFullYear(), today.getMonth(), 29),
+new Date(today.getFullYear(), today.getMonth(), 28)
];

function Checkthis(e) {

$(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
$(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
}
function Calender_change(e) {

$(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
$(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
}

</script>

Date/Time Pickers

answered on 28 May 2014

2 answers

137 views

Backspace and Enter when Editor is disabled

Hi,

We're using an Editor and due to a flag it occasionally needs to be disabled. Disabling works fine using $($('#Content').data().kendoEditor.body).attr('contenteditable', false); but there is still one issue.

Even after its disabled, highlighting text and hitting either backspace or enter removes the text. I've tried catching keydown, keyup and keypress and preventing default, but that doesn't prevent the behaviour.

Any help would be appreciated!

Thanks,
Kevin

Editor

answered on 28 May 2014

3 answers

147 views

Scheduler w/ SignalR

Hello

I'm having an issue trying to bind my SignalR DataSource to the CRUD methods in my SignalR hub. Can you tell me where I am going wrong? When debugging the ScdLoad method isn't hit. However when this does work when it is a KendoGrid

My hub:

01.public IEnumerable<LogSchedulerModel> ScdLoad() {

02. var logs = _entityProvider.QueryLogs(x => x.Where(l => l.CheckInExpected > DateTime.Now));

03. var scdLogs = logs.Select(log => new LogSchedulerModel

04. {

05. ID = log.ID,

06. CheckInExpected = log.CheckInExpected,

07. StartDate = log.StartDate,

08. CheckInActual = log.CheckInActual,

09. ContactNumber = log.ContactNumber,

10. UserName = log.UserName,

11. Location = log.UserName,

12. Start = log.StartDate,

13. End = log.CheckInExpected,

14. EmergencyContactName = log.EmergencyContactName,

15. EmergencyContactNo = log.EmergencyContactNo

16. });

17.

18. return scdLogs;

19. }

My View:

@(Html.Kendo().Scheduler<LogSchedulerModel>()

.Name("scheduler")

.Date(DateTime.Now)

.StartTime(DateTime.Now)

.Height(600)

.Views(views =>

{

views.DayView();

views.WorkWeekView(workWeekView => workWeekView.Selected(true));

views.WeekView();

views.MonthView();

views.AgendaView();

})

.DataSource(source => source

.SignalR()

.Events(events => events.Push(@<text>

function(e) {

var notification = $("#notification").data("kendoNotification");

notification.success(e.type);

}

</text>))

.Transport(tr => tr

.Promise("hubStart")

.Hub("hub")

.Client(c => c

.Create("scdcreate")

.Read("scdload")

.Update("scdupdate")

.Destroy("scddestroy")

)

.Server(s => s

.Create("scdcreate")

.Read("scdload")

.Update("scdupdate")

.Destroy("scddestroy")

))

.Schema(schema => schema

.Model(model =>

{

model.Id(m => m.ID);

model.Field(m => m.ID).Editable(true);

})

)

Scheduler

answered on 28 May 2014

4 answers

331 views

Custom DropDown Filter

Hey guys,

I'm actually doin' a project where I use a lot grids having the same column and I use a DropDownList to filter the respective column.
The DropDownList Filter is set like in the demo and works fine:

function CategoryFilter(element) {

element.kendoDropDownList({

dataSource: {

transport: {

read: "/Software/GetSoftwareCategoriesForFilter"

}

},

optionLabel: "--Select Value--"

});

}

Actually I use this function in every single Grid page to load the categories and it's like having the same function n times what makes it redundant. What I want to do is to bring this method into a separate GeneralFunctions.js file, but this isn't working so far.

The file is loaded correctly added to the bundle:

bundles.Add(new ScriptBundle("~/bundles/scripts")

.Include("~/Scripts/GeneralFunctions.js"));

and within the Grid I call the function like this:

columns.Bound(c => c.Software.SoftwareCategory.Name).Title("Software Category").Width(150).Filterable(filterable => filterable.UI("CategoryFilter"));

am I missing something?

thx in advance and kind regards
tom

Grid

answered on 28 May 2014

2 answers

142 views

Popup for Event details does not work in Chrome, Safari or Opera

Visual Studio 2012 Pro MVC 5 Razor views
Kendo DevCraft MVC Web 2014.1.318.545

I have a scheduler with a custom edit template -

In IE and Firefox, double clicking an event in the calendar displays the popup perfectly.

In Chrome, Safari or Opera, the popup does not show up on double click.

Is there any way for me to decipher why? Is there a log to show why it's not working?

Scheduler definition:

01.@(Html.Kendo().Scheduler<HTServices.Models.TaskViewModel>()

02. .Name("scheduler")

03. .Date(new DateTime(2014,4,21,7,0,0))

04. .StartTime(new DateTime(2014,4,21,7,0,0))

05. .Height(600)

06. .Editable(edit =>

07. {

08. edit.TemplateName("ScheduleItemTemplate");

09. edit.Create(false);

10. edit.Destroy(false);

11. })

12. .Views(views =>

13. {

14. views.DayView();

15. views.WeekView(weekView => weekView.Selected(true));

16. views.MonthView();

17. views.AgendaView();

18. })

19. .Timezone("Etc/UTC")

20. .DataSource(d => d

21. .Model(m =>

22. {

23. m.Id(f => f.TaskID);

24. m.Field(f => f.Title).DefaultValue("No title");

25. m.Field(f => f.OwnerID).DefaultValue(1);

26. m.Field(f => f.Title).DefaultValue("No title");

27. m.RecurrenceId(f => f.RecurrenceID);

28. })

29. .Read("Read", "Scheduler")

30. .Create("Create", "Scheduler")

31. .Destroy("Destroy", "Scheduler")

32. .Update("Update", "Scheduler")

33. )

34.)

and the edit item template:

001.@model HTServices.Models.TaskViewModel

002.@{

003. //required in order to render validation attributes

004. ViewContext.FormContext = new FormContext();

005.}

006.

007.@functions{

008. public Dictionary<string, object> generateDatePickerAttributes(

009. string elementId,

010. string fieldName,

011. string dataBindAttribute,

012. Dictionary<string, object> additionalAttributes = null)

013. {

014.

015. Dictionary<string, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<string, object>(additionalAttributes) : new Dictionary<string, object>();

016.

017. datePickerAttributes["id"] = elementId;

018. datePickerAttributes["name"] = fieldName;

019. datePickerAttributes["data-bind"] = dataBindAttribute;

020. datePickerAttributes["required"] = "required";

021. datePickerAttributes["style"] = "z-index: inherit;";

022.

023. return datePickerAttributes;

024. }

025.

026.}

027.<style type="text/css">

028. .panelbarHeader {

029. font-size: 1em;

030. font-weight: normal;

031. }

032.

033. .panelbarItem {

034. text-decoration: none;

035. font-size: .9em;

036. font-weight: normal;

037. padding-left: 20px;

038. }

039. .dutyPanel {

040. height: 200px;

041. }

042.

043. .displayDate {

044.

045. }

046.

047.</style>

048.<div class="k-edit-label">

049. @(Html.LabelFor(model => model.Client))

050.</div>

051.<div data-container-for="client" class="k-edit-field">

052.

@(Html.TextBoxFor(model => model.Client, new { style = "width:100%;", @readonly = "readonly", @class = "k-textbox col-lg-12", data_bind = "text: client" }))

053.</div>

054.<div class="k-edit-label">

055. @(Html.LabelFor(model => model.Address))

056.</div>

057.<div data-container-for="address" class="k-edit-field">

058.

@(Html.TextBoxFor(model => model.Address, new { style = "width:100%;", @readonly = "readonly", @class = "k-textbox", data_bind = "text: address" }))

059.</div>

060.

061.<div class="k-edit-label">

062. @(Html.LabelFor(model => model.Start))

063.</div>

064.<div data-container-for="start" class="k-edit-field">

065.

066. @(Html.Kendo().DateTimePickerFor(model => model.Start)

067. .HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay"))

068. .Enable(false))

069.

070.</div>

071.

072.<div class="k-edit-label">

073. @(Html.LabelFor(model => model.End))

074.</div>

075.<div data-container-for="end" class="k-edit-field">

076. @(Html.Kendo().DateTimePickerFor(model => model.End)

077. .HtmlAttributes(generateDatePickerAttributes(

078. "endDateTime",

079. "end",

080. "value:end,invisible:isAllDay",

081. new Dictionary<string, object>() {{"data-dateCompare-msg", "End date should be greater than or equal to the start date"}}))

082. .Enable(false))

083.</div>

084.

085.<div class="k-edit-label">

086. @(Html.LabelFor(model => model.IsAllDay))

087.</div>

088.<div data-container-for="isAllDay" class="k-edit-field">

089.

@(Html.DisplayFor(model => model.IsAllDay, new { @class = "k-checkbox", @readonly = "readonly", data_bind = "value: isAllDay" }))

090.</div>

091.

092.<div class="k-edit-label">

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

094.</div>

095.<div data-container-for="description" class="k-edit-field">

096.

@(Html.TextAreaFor(model => model.Description, new { @class = "k-textbox", @readonly = "readonly", data_bind = "value: description" }))

097.</div>

098.

099.<div class="k-edit-label">

100. @(Html.LabelFor(model => model.DutyID))

101.</div>

102.<div data-container-for="duties" data-task-id="@Model.TaskID" class="k-edit-field dutyPanel">

103. <div id="dutyPanel" class="dutyPanel"></div>

104.</div>

105.

106.@{

107. ViewContext.FormContext = null;

108.}

The div named DutyPanel is a panelBar that is loaded in JS in the onScheduleEdit event:

01.$(function () {

02.

03. ////bind to the scheduler edit event

04. var scheduler = $("#scheduler").data("kendoScheduler");

05. scheduler.bind("edit", onSchedulerEdit);

06.

07. function onSelect(e) {

08.

09. e.preventDefault();

10. }

11.

12. function onSchedulerEdit(e) {

13.

14. var d = e.event.Duties;

15. $("#dutyPanel").kendoPanelBar({

16. expandMode: "multiple",

17. select: onSelect,

18. dataSource: jQuery.makeArray(d)

19. });

20.

21. var panelBar = $("#dutyPanel").data("kendoPanelBar").expand($("#dutyPanel .k-item"), true);

22.

23. };

24.

25.

26.});

Why would this work in IE and FF, but not Chrome, Safari or Opera?

Is this a bug?

Scheduler

answered on 27 May 2014

3 answers

855 views

Custom command routevalue

Hi,

I'm trying to add a custom command to a grid. The goal is to show me the details of a record, so I need to pass the Id to my controller.
In the help I've found the following syntax:
.Action(actionName, controllerName, routeValues);

How do I add a my record Id to "routeValues"? I can't find an example.

I would like something like this:
....
columns.Bound(c => c.TopChar1);
columns.Command(command => command.Custom("Details").Action("Details", "Pres", new { Id = ????? }));
....

So far, I've only found a workaround using a javascript combined with Custom("Details").Click("function").

Thx

Grid

answered on 27 May 2014