Questions on UI for ASP.NET MVC Forum

5 answers

3.6K+ views

Required field

How can I add a required field in edit/create mode? I see that you can enable validation on the grid in the JS examples but I see no direct examples of doing this in the Complete for MVC examples/demos. Essentially I have a drop down list for AdmissionMilestoneID and I want to make it required that the user clicks the drop down and picks a value. I am having issues when setting a default value as it seems to keep triggering the create event after I add the record fully and go to edit a new row. It tries to recreate the new record even though it was already created.

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

.Name("AdmissionMilestones")

.Columns(columns => {

columns.ForeignKey(p => p.AdmissionMilestoneID, Model.academicMilestones, "AdmissionMilestoneID", "MilestoneName")

.Title("Milestone");

columns.Bound(p => p.IsKeyMilestone);

columns.Bound(p => p.RecieveReminders);

columns.Bound(p => p.StudentRelativeDeadline);

})

.ToolBar(toolbar =>

{

toolbar.Save();

toolbar.Create();

})

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

.Sortable()

.Reorderable(reorder => reorder.Columns(true))

.Resizable(resize => resize.Columns(true))

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

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

.Model(model =>

{

model.Id(p => p.AdmissionMilestoneID);

model.Field(p => p.MilestoneName).Editable(false);

model.Field(p => p.FederationID).DefaultValue(Model.FederationID);

})

.Update("Editing_Update_Milestones", "Admin")

.Create("Editing_Add_Milestones", "Admin")

)

Grid

answered on 29 Jul 2013

1 answer

299 views

Q2 2013 Upgrades break projects

Hi there,

After I simply copy/paste the updated css/js files into my MVC4 project and rebuild I start to receive really nasty runtime errors.

Such as this error when the CSS is updated

Exception of type 'System.OutOfMemoryException' was thrown.
Description: An unhandled exception occurred during
the execution of the current web request. Please review the stack trace
for more information about the error and where it originated in the
code.

Exception Details: System.OutOfMemoryException: Exception of type 'System.OutOfMemoryException' was thrown.
Source Error:
Line 6: <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
Line 7: <meta name="viewport" content="width=device-width" />
Line 8: @Styles.Render("~/Content/kendo")
Line 9: @Styles.Render("~/Content/css")
Line 10:

Stack Trace:
[OutOfMemoryException: Exception of type 'System.OutOfMemoryException' was thrown.]
System.Text.StringBuilder.ToString() +35
System.String.Format(IFormatProvider provider, String format, Object[] args) +72
Microsoft.Ajax.Utilities.AjaxMinExtensions.FormatInvariant(String format, Object[] args) +44
Microsoft.Ajax.Utilities.CssScanner.ReportError(Int32 severity, CssErrorCode error, Object[] args) +76
Microsoft.Ajax.Utilities.CssScanner.GetString() +665
Microsoft.Ajax.Utilities.CssScanner.ScanString() +16
Microsoft.Ajax.Utilities.CssScanner.NextToken() +751
Microsoft.Ajax.Utilities.CssParser.NextToken() +17
Microsoft.Ajax.Utilities.CssParser.SkipSpace() +17
Microsoft.Ajax.Utilities.CssParser.ParseDeclaration() +441
Microsoft.Ajax.Utilities.CssParser.ParseDeclarationList(Boolean allowMargins) +90
Microsoft.Ajax.Utilities.CssParser.ParseDeclarationBlock(Boolean allowMargins) +348
Microsoft.Ajax.Utilities.CssParser.ParseRule() +586
Microsoft.Ajax.Utilities.CssParser.ParseStylesheet() +463
Microsoft.Ajax.Utilities.CssParser.Parse(String source) +528
Microsoft.Ajax.Utilities.Minifier.MinifyStyleSheet(String source, CssSettings settings) +248
System.Web.Optimization.CssMinify.Process(BundleContext context, BundleResponse response) +88

and additionally this error when the kendo js files are updated:

Server Error in '/' Application.

Length cannot be less than zero.
Parameter name: length

Description: An unhandled exception occurred during
the execution of the current web request. Please review the stack trace
for more information about the error and where it originated in the
code.
Exception Details: System.ArgumentOutOfRangeException: Length cannot be less than zero.
Parameter name: length

Source Error:
Line 12:
Line 13: @Scripts.Render("~/bundles/jquery")
Line 14: @Scripts.Render("~/bundles/kendo")
Line 15: @Scripts.Render("~/bundles/knockout")
Line 16:

Stack Trace:
[ArgumentOutOfRangeException: Length cannot be less than zero.
Parameter name: length]
System.String.InternalSubStringWithChecks(Int32 startIndex, Int32 length, Boolean fAlwaysCopy) +10698969
Microsoft.Ajax.Utilities.JSScanner.ScanString(Char delimiter) +1395
Microsoft.Ajax.Utilities.JSScanner.ScanNextToken(Boolean scanRegExp) +246
Microsoft.Ajax.Utilities.JSParser.ScanNextToken() +33
Microsoft.Ajax.Utilities.JSParser.GetNextToken() +99
Microsoft.Ajax.Utilities.JSParser.SkipTokensAndThrow(AstNode partialAST) +50
Microsoft.Ajax.Utilities.JSParser.ParseLeftHandSideExpression(Boolean isMinus) +5271
Microsoft.Ajax.Utilities.JSParser.ParseUnaryExpression(Boolean& isLeftHandSideExpr, Boolean isMinus) +2065
Microsoft.Ajax.Utilities.JSParser.ParseStatement(Boolean fSourceElement) +1595
Microsoft.Ajax.Utilities.JSParser.ParseBlock(Context& closingBraceContext) +195
Microsoft.Ajax.Utilities.JSParser.ParseStatement(Boolean fSourceElement) +443
Microsoft.Ajax.Utilities.JSParser.ParseBlock(Context& closingBraceContext) +195
Microsoft.Ajax.Utilities.JSParser.ParseStatement(Boolean fSourceElement) +443
Microsoft.Ajax.Utilities.JSParser.ParseIfStatement() +685
Microsoft.Ajax.Utilities.JSParser.ParseStatement(Boolean fSourceElement) +485
Microsoft.Ajax.Utilities.JSParser.ParseBlock(Context& closingBraceContext) +195
Microsoft.Ajax.Utilities.JSParser.ParseStatement(Boolean fSourceElement) +443
Microsoft.Ajax.Utilities.JSParser.ParseIfStatement() +685
Microsoft.Ajax.Utilities.JSParser.ParseStatement(Boolean fSourceElement) +485
Microsoft.Ajax.Utilities.JSParser.ParseFunction(FunctionType functionType, Context fncCtx) +1615
Microsoft.Ajax.Utilities.JSParser.ParseStatement(Boolean fSourceElement) +1250
Microsoft.Ajax.Utilities.JSParser.ParseFunction(FunctionType functionType, Context fncCtx) +1615
Microsoft.Ajax.Utilities.JSParser.ParseLeftHandSideExpression(Boolean isMinus) +5051
Microsoft.Ajax.Utilities.JSParser.ParseUnaryExpression(Boolean& isLeftHandSideExpr, Boolean isMinus) +2065
Microsoft.Ajax.Utilities.JSParser.ParseExpression(AstNode leftHandSide, Boolean single, Boolean bCanAssign, JSToken inToken) +738
Microsoft.Ajax.Utilities.JSParser.ParseStatement(Boolean fSourceElement) +2113
Microsoft.Ajax.Utilities.JSParser.ParseStatements() +309
Microsoft.Ajax.Utilities.JSParser.Parse(CodeSettings settings) +133
Microsoft.Ajax.Utilities.Minifier.MinifyJavaScript(String source, CodeSettings codeSettings) +268

General Discussions

answered on 29 Jul 2013

6 answers

974 views

ToDataSourceResult() method

Hi,
my company purchased Kendo UI for ASP.NET MVC, and i'm trying to use this ToDataSourceResult() extension method in order to make the paging on server for the grid just like the example on the site ,but i cannot find the kendo.UI.extensions namespace,or at least i installed the kendo extensions for VS and no such namespace,only Kendo.MVC.dll ,also i downloaded the telerik extensions for asp.net mvc,but there is no such method in \Extensions directory. What should i have to do in order to use this method?

thanks in advanced.

Grid

answered on 29 Jul 2013

1 answer

340 views

ListView on Change, get "primary key" for selected item

I have a list view that has a change event. When an item in my list view is selected how can I get the "key" that i set for the item instead of the text displayed?

<script type="text/x-kendo-tmpl" id="ItemTemplate">

<div style="margin:5px;">

#:ItemNo# - #:Description#<br />

</div>

</script>

<%: Html.Kendo().ListView<ItemList>()

.Name("Items")<br> .TagName("div"

.

DataSource(ds => 

     ds.Read(read => read.Action("ItemListRead", "Home"))

       .Model(m => m.Id(i => i.ItemKey)))

.ClientTemplateId("ProjectItemTemplate")

.Selectable(s => s.Mode(ListViewSelectionMode.Single))

.Events(events => events.Change("onChange"))

%>

<script type="text/javascript">

function onProjectItemChange(e) {

var selected = $.map(this.select(), function (item) {

return $(item).text();

});

}

</script>

ListView

answered on 29 Jul 2013

1 answer

174 views

[Solved] Issue with recurring events in different time zones.

I have a scheduler control on a page.

Html.Kendo().Scheduler<TaskViewModel>()

.Name("MyScheduler")

.Date(DateTime.Now)

.Height(600)

.Views(views =>

{

views.DayView();

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

})

.DataSource(dataSource =>

dataSource.Model(m =>

{

m.Id(o => o.Id);

})

.ServerOperation(true)

.Read(read => read.Action("ReadSchedules", "Scheduler"))

)

.Editable(false)

Nothing fancy, For the purpose of testing out the control, i'm using the TaskViewModel from the example project. At my company we have people in India who will create recurring schedules on this calendar. When I save the schedule's date/time, i'm storing it as a UTC value (just like your example project). The problem occurs when a user here in the U.S. (Central Standard Time) views a recurring (weekly with specified days) schedule. India would create a 9:30 AM IST, recurring every Tuesday & Thursday and the duration is for 2 hours. When an Indian user reads the data back, the scheduler displays it just fine. When a user in the U.S. (CST) views it, we should expect to see a recurring meeting at 11:00 PM CST on Monday and Wednesday. Instead, the meeting is showing up at 11:00 PM CST on Tuesday and Thursday. Not only is it showing up on the wrong day, but the event shows up on the scheduler as if the duration of the meeting as zero.

I also noticed something else, when I save the schedule, I am able to save the StartTimezone and EndTimezone to the database, however, these fields are not members of the ISchedulerEvent interface. The scheduler control seems to lose these values when it is repopulated with data. How is the client control supposed to know how to properly convert from one timezone to another without that information?

Scheduler

answered on 26 Jul 2013

1 answer

163 views

Grid column edit visual anomaly in aspnetmvc-episode4

Downloaded the Sample projects for getting started with ASP.NET MVC, JSP and PHP Kendo UI Wrappers.
The \wrappers-getting-started-master\aspnetmvc\aspnetmvc-episode4\aspnetmvc-episode4\ site grid has visual anomalies when clicking on the Edit button (row edit). See attached files for before and after clicking the Edit button.
Environment:

Dell XPS 8700 Desktop 4th Gen Intel® Core™ i7-4770 3.4GHz
Windows 8.1 Pro Preview, Build 9431
VS2013 Ultimate Preview
Compiled for .NET 4.5.1
IE11
Google 29.0.1547.22 beta-m
Mozilla 23.0

All OS and other updates are up-to-date as of 07/24/13.

Thx, Ivan

Grid

answered on 26 Jul 2013

1 answer

112 views

AJAX MVC paging is display data instead of binding to the grid.

I am having all kinds of issues with the MVC Grid control.

When I try and page to the next page in the grid I get the raw data instead of the HTML page with the grid displayed..See attachment.

Second, I cannot, for the life of me, get the filtering nor the grouping function to work. When I click the filter icon, nothing happens.

I haven't even got to ALL of the CRUD functionality. This is so frustrating.

I am using the newest release of the Kendo UI toolset and Entity Framework 5. I have created the model from the EDMX.

Please help!

Grid

answered on 26 Jul 2013

2 answers

171 views

Dynamic body width based on grid width

As the subject suggests I'm attempting to alter body width to match the width of the grid in cases where the grid ends up bigger than the body. I'm attempting to do that by wiring up the databound event of the grid and then setting the width of the body. However, the grid's width is returning smaller than it actually is so the body is still left behind.

For example, I have a min-width set on the body element in css. In this case it's 1100px. The grid is reporting its width as smaller than that min-width (1088), yet the grid goes well past that width on the screen. Here is the javascript I am trying to use to accomplish this. Any suggestions?

$(function () {

var grid = $(gridNameForEditors).data("kendoGrid");

grid.bind("dataBound", function () {

var grid2 = $(gridNameForEditors);

alert(grid2.width());

document.body.style.width = grid2.width() + "px";

});

})

Grid

answered on 26 Jul 2013

2 answers

279 views

[Solved] Grid inside BeginForm posts to the wrong action when deleting a row

Having the following code (stripped down version):

@using (Html.BeginForm(@"Store", @"Admin", FormMethod.Post))

{

@(Html.Kendo().Grid((IEnumerable<MyModel>) ViewBag.MyItems)

.Name(@"grid")

.Columns(columns =>

{

columns.Bound(pg => pg.Id).Visible(false);

columns.Bound(pg => pg.Name).Template(

                      c => Html.ActionLink(c.Name, @"Details", new {id = c.Id}));

columns.Command(

                      commands => commands.Destroy().Text("Delete")).Title("Delete");

})

.Pageable()

.Sortable()

.DataSource(

dataSource => dataSource

.Server()

.Model(model => model.Id(p => p.Id))

.Destroy(d => d.Action(@"Item_Destroy", @"Admin")))

)

}

I do experience the following (wrong) behavior:

User clicks the "Delete" button.
The "Store" action of the "BeginForm" is being called, instead of the "Item_Destroy" action.

My question:

What have I done wrong in my view?

Grid

answered on 26 Jul 2013

12 answers

246 views

Filter error in 2013.2.716

See screenshot.

It was working before the update (which I have since rolled back).

The grid itself doesn't even have filter enabled, why is it passing undefined at all, which is what Kendo is hanging up on I'm guessing....

General Discussions

answered on 26 Jul 2013