or
2 answers
335 views
Hi,
I have a rather large form which is spread over a series of tabs to break it down into sections. I have a single "Save" button that uses ajax to post the form. This all works fine, and the validator shows errors next to the controls that fail validation. The issue i have is that if i try and save something on one tab it isn't immediately clear which tab might be showing a control that fails validation, and therefore isn't clear to the user why the form hasn't submitted.
What i'd like to do is use the validationsummary or a simple div to display the errors above the tabs in a list form. I've been experimenting with the KendoValidator and can see the list or errors under validator._errors. but is it possible to access the _errors values to append to a div using a foreach on validator_errors?
Thanks
Ant
I have a rather large form which is spread over a series of tabs to break it down into sections. I have a single "Save" button that uses ajax to post the form. This all works fine, and the validator shows errors next to the controls that fail validation. The issue i have is that if i try and save something on one tab it isn't immediately clear which tab might be showing a control that fails validation, and therefore isn't clear to the user why the form hasn't submitted.
What i'd like to do is use the validationsummary or a simple div to display the errors above the tabs in a list form. I've been experimenting with the KendoValidator and can see the list or errors under validator._errors. but is it possible to access the _errors values to append to a div using a foreach on validator_errors?
Thanks
Ant
Ant
Top achievements
Rank 1
Rank 1
answered
on
02 Jun 2014
3 answers
209 views
Hi
I have an issue when binding both a MultiSelecr and ListView to the same properties in a ViewModel but in different views. Here is an example:
In my ViewModel I have the following public properties
Cars and SelectedCarsValues are populated from a db context.
On one view i have my MultiSelect
And on another view I have my ListView
This all works fine. But when i submit the form containing my multiselect the validation fails (ModelState.isvalid) as it is trying to convert a selecteditem to a string. So what i did was change my ViewModel for SelectedCars to be an IEnumerable<string> instead:
Now when i submit my form with the multiselect the validation passes. Yet, when i use my view i now have [object][object] showing as my ListView. I can change this to ${data} but it obviously only shows the code and not the description.
Therefore. How can i reuse the public properties from my ViewModel for both the MultiSelect and Listview without causing validation to fail when the MultiSelect is submitted? Or, am i binding either the MultiSelect or ListView (or both) incorrectly. Note that the Listview is not within a form and is not submitted to the controller.
Thanks for taking the time to have a look at this for me.
Anthony
I have an issue when binding both a MultiSelecr and ListView to the same properties in a ViewModel but in different views. Here is an example:
In my ViewModel I have the following public properties
//Select List of all cars public IEnumerable<System.Web.Mvc.SelectListItem> AllCars { get { if (Cars != null) { var _sacts = Cars.Select(f => new System.Web.Mvc.SelectListItem { Value = f.code, Text = f.description }); return _sacts; } else return null; } }public IEnumerable<CarTypes> Cars { get; set; }//Select List of previous saved carspublic IEnumerable<System.Web.Mvc.SelectListItem> SelectedCars { get { if (SelectedCarsValues != null) { var _sacts = SelectedCarsValues.Select(f => new System.Web.Mvc.SelectListItem { Value = f.code, Text = f.description }); return _sacts; } else return null; } }public IEnumerable<CarTypes> SelectedCarsValues { get; set; }Cars and SelectedCarsValues are populated from a db context.
On one view i have my MultiSelect
@(Html.Kendo().MultiSelectFor(m => m.SelectedCars) .BindTo(Model.AllCars) .DataTextField("Text") .DataValueField("Value"))And on another view I have my ListView
<script type="text/x-kendo-tmpl" id="CarsTemplate"> ${Text}</script>@(Html.Kendo().ListView(Model.SelectedCars) .Name("Cars") .TagName("p") .ClientTemplateId("CarsTemplate") .BindTo(Model.SelectedCars))This all works fine. But when i submit the form containing my multiselect the validation fails (ModelState.isvalid) as it is trying to convert a selecteditem to a string. So what i did was change my ViewModel for SelectedCars to be an IEnumerable<string> instead:
public IEnumerable<string> SelectedCars{ get { if (SelectedCarsValues != null) { return SelectedCarsValues.Select(a => a.code); } else return null; }}Now when i submit my form with the multiselect the validation passes. Yet, when i use my view i now have [object][object] showing as my ListView. I can change this to ${data} but it obviously only shows the code and not the description.
Therefore. How can i reuse the public properties from my ViewModel for both the MultiSelect and Listview without causing validation to fail when the MultiSelect is submitted? Or, am i binding either the MultiSelect or ListView (or both) incorrectly. Note that the Listview is not within a form and is not submitted to the controller.
Thanks for taking the time to have a look at this for me.
Anthony
Ant
Top achievements
Rank 1
Rank 1
answered
on
31 May 2014
1 answer
93 views
Hi Kendo,
Once a user has filtered the data in a Kendo Grid, is it somehow possible to pass only the filtered data to an MVC Controller action? Can I only pass the data that is being displayed in the Grid to a routine that processes the users choices? What might be the best way to deal with this scenario? Thanks for any suggestion
-Carl
Once a user has filtered the data in a Kendo Grid, is it somehow possible to pass only the filtered data to an MVC Controller action? Can I only pass the data that is being displayed in the Grid to a routine that processes the users choices? What might be the best way to deal with this scenario? Thanks for any suggestion
-Carl
Alexander Popov
Telerik team
answered
on
31 May 2014
7 answers
310 views
Hello,
We're currently using version 2014.1.318.
We have a chart containing two valueAxis's:
valueAxis: [{
name: "volumeAxis",
title: { text: "@GlobalResources.BCount", font: "16px Segoe UI, Arial", color: "#6f6f6e" },
labels: { format: "{0}", skip: 2, step: 2, opacity: 1 },
color: '#adadad'
}, {
name: "time",
visible: false
}]
I'm trying to dynamically obtain the max and majorUnit value for the "volumeAxis".
I've tried:
var maxValueAxis = chart.options.series[0].valueAxis.max;
but the chart.options.series[0].valueAxis is undefined, the hint to use this came from http://www.telerik.com/forums/dynamic-value-axes-for-multi-axis-chart
The reason we're trying to do this is to dynamically increase the chart's volumeAxis by one unit (majorUnit), so eventually achieving something like this:
var maxValueAxis = kchart.options.series[0].valueAxis.max;
var majorUnit = kchart.options.series[0].valueAxis.majorUnit;
valueAxis = [{
name: "volumeAxis",
title: { text: "@GlobalResources.BCount", font: "16px Segoe UI, Arial", color: "#6f6f6e" },
labels: { format: "{0}", skip: 2, step: 2, opacity: 1 },
color: '#adadad',
max: maxValueAxis + majorUnit
}, {
name: "time",
visible: false
}];
chart.setOptions({ valueAxis: valueAxis });
chart.redraw();
Thanks advance.
We're currently using version 2014.1.318.
We have a chart containing two valueAxis's:
valueAxis: [{
name: "volumeAxis",
title: { text: "@GlobalResources.BCount", font: "16px Segoe UI, Arial", color: "#6f6f6e" },
labels: { format: "{0}", skip: 2, step: 2, opacity: 1 },
color: '#adadad'
}, {
name: "time",
visible: false
}]
I'm trying to dynamically obtain the max and majorUnit value for the "volumeAxis".
I've tried:
var maxValueAxis = chart.options.series[0].valueAxis.max;
but the chart.options.series[0].valueAxis is undefined, the hint to use this came from http://www.telerik.com/forums/dynamic-value-axes-for-multi-axis-chart
The reason we're trying to do this is to dynamically increase the chart's volumeAxis by one unit (majorUnit), so eventually achieving something like this:
var maxValueAxis = kchart.options.series[0].valueAxis.max;
var majorUnit = kchart.options.series[0].valueAxis.majorUnit;
valueAxis = [{
name: "volumeAxis",
title: { text: "@GlobalResources.BCount", font: "16px Segoe UI, Arial", color: "#6f6f6e" },
labels: { format: "{0}", skip: 2, step: 2, opacity: 1 },
color: '#adadad',
max: maxValueAxis + majorUnit
}, {
name: "time",
visible: false
}];
chart.setOptions({ valueAxis: valueAxis });
chart.redraw();
Thanks advance.
4 answers
135 views
Hello Telerik Team, hello Community
I have a grid with two columns that have a similar name: Leadauditor (decimal) and Leadauditor_DisplayName (string). I initially designed it this way so that the user can search the Name in the Leadauditor_DisplayName field and then I programmatically write the ID into the (hidden) Leadauditor field (using e.g. model.set('Leadauditor', 3).
Since I upgraded from 2013.2.716 to 2014.1.318 this does not work any more. My assumption is that the validation fails because it validates the wrong field...
Kindly refer to my attached screenshots:
in the Kendo.min.js, _validate Method, there are 4 elements when it searches with :Input[data-bind*=\"value:Leadauditor\"]. The data() from the jquery.min.js function returns the [0] Position, which is actually the Leadauditor_DisplayName. Now the validation fails because this contains actually a string but the rules for an mvcdecimal are applied...
If the search string is changed to :Input[data-bind=\"value:Leadauditor\"] then it should work because it only returns one search result (kindly refer to the third screenshot).
best regards,
Rainer
I have a grid with two columns that have a similar name: Leadauditor (decimal) and Leadauditor_DisplayName (string). I initially designed it this way so that the user can search the Name in the Leadauditor_DisplayName field and then I programmatically write the ID into the (hidden) Leadauditor field (using e.g. model.set('Leadauditor', 3).
Since I upgraded from 2013.2.716 to 2014.1.318 this does not work any more. My assumption is that the validation fails because it validates the wrong field...
Kindly refer to my attached screenshots:
in the Kendo.min.js, _validate Method, there are 4 elements when it searches with :Input[data-bind*=\"value:Leadauditor\"]. The data() from the jquery.min.js function returns the [0] Position, which is actually the Leadauditor_DisplayName. Now the validation fails because this contains actually a string but the rules for an mvcdecimal are applied...
If the search string is changed to :Input[data-bind=\"value:Leadauditor\"] then it should work because it only returns one search result (kindly refer to the third screenshot).
best regards,
Rainer
9 answers
1.0K+ views
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:
When I set the edit style of the grid to inline the regular expression validator is rendered ok:
When the edit mode is set to popup the regular expression is wrong:
Can someone tell me where is the problem??
Thanks!
Luis
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; }<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"><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">Thanks!
Luis
Daniel
Telerik team
answered
on
30 May 2014
5 answers
277 views
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.
$("#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.
T. Tsonev
Telerik team
answered
on
30 May 2014
3 answers
71 views
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.
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.
1 answer
264 views
Hi,
i have problems with multiple editors on the same page:
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?
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?
Alex Gyoshev
Telerik team
answered
on
29 May 2014
3 answers
160 views
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:
with the following javascript:
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(); }};
Kiril Nikolov
Telerik team
answered
on
29 May 2014
