Questions on UI for ASP.NET MVC Forum

1 answer

156 views

Kendo MVC validator always gives postback?

Hi,

Maybe I just do not understand or I made some mistakes but:

When using the validator in combination with a plain MVC form, the page always posts to the server. That kinda surprised me. I assumed with the correct annotations on the model, the client side validation should occur first and the page should never do a postback when the form is invalid.

I solved that by setting the required attribute on each html input element.
It seems a little strange I have to add on both the model and in the view a required flag. Or am I missing something?

Here is my example: (attached is my project)

@model Gusto.Web.ViewModels.LoginViewModel

@{

ViewBag.Title = @Resources.Resource.Login_Page_Title;

}

<div class="form-vertical login">

<div class="logo">

<h1>Bluefox</h1>

</div>

@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl }))

{

<div id="login-form">

@Html.AntiForgeryToken()

@Html.ValidationSummary(true)

<div class="status"></div>

<fieldset>

<legend>@Resources.Resource.Login_Page_Title</legend>

<div class="control-group">

@Html.LabelFor(m => m.Model.UserName, new { @class="control-label"})

<div class="controls">

@Html.EditorFor(m => m.Model.UserName, new { @required="required" })

@Html.ValidationMessageFor(m => m.Model.UserName)

</div>

<div class="control-group">

@Html.LabelFor(m => m.Model.Password)

@Html.PasswordFor(m => m.Model.Password, new { @required="required" })

@Html.ValidationMessageFor(m => m.Model.Password)

</div>

<div class="control-group">

@Html.CheckBoxFor(m => m.Model.RememberMe)

@Html.LabelFor(m => m.Model.RememberMe, new { @class = "checkbox" })

</div>

<input type="submit" class="btn green pull-right" value="Login" id="btnSubmit" />

</fieldset>

</div>

}

<p>

@Html.ActionLink("Register", "Register") @Resources.Resource.Login_Register

</p>

</div>

@section Scripts {

<script type="text/javascript">

$(document).ready(function () {

var validator = $("#login-form").kendoValidator().data("kendoValidator"), status = $(".status");

$("#btnSubmit").click(function () {

if (validator.validate()) {

save();

} else {

status.text("@Resources.Resource.Generic_Error_Form")

.removeClass("valid")

.addClass("invalid");

}

});

</script>

}

General Discussions

answered on 04 Nov 2013

3 answers

599 views

How to retain the new row on top in grid

I am attempting to create a new, inline editable row on the first page of
our kendo grid. On sort and filter we would like the row to remain on the top
of the grid. It is currently getting shuffled into the table. The code which
created the new row is included below. Full cshtml attached.

//add the new record row if we are on page 1
        dataSource.bind("requestEnd", function(e) {

            setTimeout(function() {
                var grid = $("#grid").data("kendoGrid");
                console.log("requestEnd - " + grid.dataSource.hasChanges());
                if (grid.dataSource.page() == 1) {

                    //has an empty row already been added
                    if(grid.dataSource.hasChanges()) {

                        grid.dataSource.cancelChanges();

                    }

                    newGuy = grid.dataSource.insert(0, { });
                    grid.editRow($("tr:nth(0)", grid.tbody));
                }
            });
        });

Grid

answered on 04 Nov 2013

1 answer

134 views

grid hover and virtual scrolling

CSS

<style>

#grid,

#splitter { border-width: 0; height: 100%; }

html,

body { margin: 0; padding: 0; height: 100%; }

html { overflow: hidden; }

.k-grid-content > table > tbody > tr:hover { background-image: url("textures/brushed-metal.png"), linear-gradient(to bottom, rgb(238, 159, 5) 0px, rgb(244, 175, 3) 100%); }

.k-grid-content > table > tbody > tr .k-button { visibility: hidden; }

.k-grid-content > table > tbody > tr:hover .k-button { visibility: visible; }

</style>

view

.Scrollable(c=>c.Virtual(true))

Grid

answered on 04 Nov 2013

3 answers

229 views

initial values never populated

I'm having issues getting my initial values to be populated in the multiselect widget. The ajax request works for filtering just fine, however i can never get the initial values to populate even if i hard code them as below:

Im using v 2013.2.918.340 of Kendo.Mvc.dll

<div class="container-div grid-tab-content-pane">

@(Html.Kendo().MultiSelect()
.Name(AMultiName)
.DataTextField("PrettyText")
.DataValueField("MapAbbreviation")
.Placeholder("Edit EMR maps...")
.Filter(FilterType.Contains)
.MinLength(3)
.AutoBind(false)
.HighlightFirst(true)
.DataSource(ds => ds.Read(r=>r.Action("ReadMapOptions","EmrMappingKendo", new {Area="Messaging"})).ServerFiltering(true))
.Value(new List<EmrMapping>()
{
new EmrMapping(){PrettyText = "Abcdef",MapAbbreviation = "s01"},
new EmrMapping(){PrettyText = "2nde obn", MapAbbreviation = "asdf012"}
})
)

</div>

What am i doing wrong?

Edit:

I even tried hardcoding the value as a dynamic type like the example shows but I get the same result. No js errors on the page and the widget appears to work except the initial values aren't displayed..

<div class="container-div grid-tab-content-pane">

@(Html.Kendo().MultiSelect()

.Name(AMultiName)

.DataTextField("PrettyText")

.DataValueField("MapAbbreviation")

.Placeholder("Edit EMR maps...")

.Filter(FilterType.Contains)

.MinLength(3)

.AutoBind(false)

.HighlightFirst(true)

.Value(new []

{

new {PrettyText = "Abcdef",MapAbbreviation = "s01"},

new {PrettyText = "2nde obn", MapAbbreviation = "asdf012"}

})

.DataSource(ds => ds.Read(r=>r.Action("ReadMapOptions","EmrMappingKendo", new {Area="Messaging"})).ServerFiltering(true)).MinLength(3)

)

</div>

MultiSelect

answered on 04 Nov 2013

1 answer

444 views

how do I make chart responsive to screen resize like grids are?

Chart

answered on 04 Nov 2013

2 answers

403 views

Validation event handler e.errors is undefined

I have a kendo grid with two sub grids. The last subgrid has inline edit. (See code below for grids)

I have the following error method. The first error message displays: "In the error handler method." The second alert says "object [Object]" and the third message says "undefined." Since its undefined the
if(e.errors) statement is not run and no errors are displayed.

I break on the controller and the ModelState.IsValid = false and I see two items that have Errors Count = 1. I have even hardcoded an error like: ModelState.AddModelError("From", "From is required");.

function error_handler(e) {

alert("In the error handler method.");

alert(e);

alert(e.errors);

if (e.errors) {

alert("Has errors.");

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

alert("Errors:" + key + value);

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

Here is the code for the grids:

@(Html.Kendo().Grid<HtramDivision>()

.Name("grid")

.Columns(columns => columns.Bound(d => d.Name).Title("Divisions"))

.ClientDetailTemplateId("templateSub")

.HtmlAttributes(new { style = "height:800px;" })

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Divisions", "Division", new { projectID = Model.ProjectID }))

)

.Scrollable()

)

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

@(Html.Kendo().Grid<HtramSubDivision>()

.Name("grid_#=DivisionID#")

.Columns(columns =>

{

columns.Bound(s => s.Name).Title("SubDivisions");

})

.ClientDetailTemplateId("templateCat")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("SubDivisions", "SubDivision", new { projectID = Model.ProjectID, divisionID = "#=DivisionID#" }))

)

.Sortable()

.Scrollable(sc=>sc.Height(""))

.ToClientTemplate()

)

</script>

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

@(Html.Kendo().Grid<HtramProjectCategoryResults>()

.Name("grid_#=SubDivisionID#")

.Columns(columns =>

{

columns.Bound(pcr => pcr.From).Width(80);

columns.Bound(pcr => pcr.To).Width(80);

columns.ForeignKey(pcr => pcr.CategoryID, (System.Collections.IEnumerable)ViewData["categories"],

"CategoryID", "Name").EditorTemplateName("CategoriesDropDownList").Width(300);

columns.ForeignKey(pcr => pcr.CategoryValueID, (System.Collections.IEnumerable)ViewData["categoryValues"],

"CategoryValueID", "Name").EditorTemplateName("CategoryValueDropDownList").Width(300);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { @title = "Add" }))

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

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

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

.Model(model =>

{

model.Id(pcr => pcr.ProjectsCategoryResultsID);

model.Field(pcr => pcr.ProjectsCategoryResultsID).Editable(false);

})

.Read(read => read.Action("CategoryResultsRead", "Category", new { projectID = Model.ProjectID, subDivisionID = "#=SubDivisionID#" }))

.Create(create => create.Action("CategoryResultsCreate", "Category"))

.Update(update => update.Action("CategoryResultsUpdate", "Category"))

.Destroy(destroy => destroy.Action("CategoryResultsDestroy", "Category"))

)

.Sortable()

.Scrollable(sc=>sc.Height(""))

.ToClientTemplate()

)

</script>

Grid

answered on 04 Nov 2013

1 answer

209 views

Autocomplete - Horizonal scroll bar

Is there anyway to have autocomplete has a horizonal scroll bar if the text is longer than the width of the Autocomple so it can avoid text wrap.

Thanks!

AutoComplete

answered on 01 Nov 2013

1 answer

162 views

[Solved] Display Distinct Values in Parent Node Of TreeView

Hello,

I have been having issues displaying distinct values for the parent nodes. I have attached some sample files to show you what it is doing.

Thanks

BT

TreeView

answered on 01 Nov 2013

1 answer

252 views

Automatically show centered loading image on Kendo Web ListView, as the Grid does?

Is there any setting for the ListView (Web / MVC) that would show the same loading image / spinner as the Grid does by default?

Why should it behave any differently when loading its content via ajax?

Thanks,
-Dave

ListView

answered on 01 Nov 2013

1 answer

271 views

Kendo Mobile ASP MVC Tutorial

Would anyone be able to point me in the direction of a tutorial on how to set up and configure a basic mobile website in Visual Studio using the Kendo UI? I can find examples for Kendo Mobile and examples for Kendo ASP MVC, but none that seem to combine the two. Other examples I've found relate more to how to package the apps for publishing to the app store which is not really what I'm looking for either. Even a pre-configured sample project that I could download and run in VS would be useful as a starting point.

Thanks for any help!

General Discussions

answered on 31 Oct 2013