Questions on UI for ASP.NET MVC Forum

9 answers

1.0K+ views

Regular Expression Validator not working in Grid Popup

Hello!

I habe a problem in the Kendo Grid with the validation via regular expression annotation from mVC

My model has a property Email with following definition:

[RegularExpression(@

"([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-zA-Z0-9]{1}[a-zA-Z0-9\-]{0,62}[a-zA-Z0-9]{1})|[a-zA-Z])\.)+[a-zA-Z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)"

, ErrorMessage = "Not a valid email")]

[DataType(DataType.EmailAddress)]

public string Email { get; set; }

When I set the edit style of the grid to inline the regular expression validator is rendered ok:

<input type="text" value="" name="Email" id="Email" data-val-required="Das Feld wird benötigt." data-val-regex-pattern=

"([\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+\.)*[\w\!\#$\%\&\'\*\+\-\/\=\?\^\`{\|\}\~]+@((((([a-zA-Z0-9]{1}[a-zA-Z0-9\-]{0,62}[a-zA-Z0-9]{1})|[a-zA-Z])\.)+[a-zA-Z]{2,6})|(\d{1,3}\.){3}\d{1,3}(\:\d{1,5})?)"

data-val-regex="Not a valid email" data-val="true" class="text-box single-line" data-bind="value:Email">

When the edit mode is set to popup the regular expression is wrong:

<input type="text" value="" name="Email" id="Email" data-val-required="Das Feld wird benötigt." data-val-regex-pattern=

"([w!#$%&'*+-/=?^`{|}~]+.)*[w!#$%&'*+-/=?^`{|}~]+@((((([a-zA-Z0-9]{1}[a-zA-Z0-9-]{0,62}[a-zA-Z0-9]{1})|[a-zA-Z]).)+[a-zA-Z]{2,6})|(d{1,3}.){3}d{1,3}(:d{1,5})?)"

data-val-regex="Not a valid email" data-val="true" class="text-box single-line" data-bind="value:Email">

Can someone tell me where is the problem??

Thanks!

Luis

General Discussions

answered on 30 May 2014

5 answers

295 views

How to catch the event of StockChart navigator range change

I love the navigator of storkchart. Now I want to catch the event when user change the navigator's selected range. Can anyone tell me what is the api?

$("#stock-chart").kendoStockChart({
navigator: {
series: {
type: "line",
field: "volume"
},
select: {
from: "2012/01/01",
to: "2012/03/01"
}
},
...
})

take this for example, I want do do something when user change the select range.

Chart

answered on 30 May 2014

3 answers

80 views

[Solved] 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

288 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

186 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

149 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

372 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>

DatePicker

answered on 28 May 2014

2 answers

177 views

[Solved] 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

162 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

359 views

[Solved] 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