Questions on UI for ASP.NET MVC Forum

1 answer

251 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:

public class LoginViewModel : BaseViewModel

{

public LoginModel Model { get; set; }

}

public class LoginModel

{

[Required(ErrorMessageResourceName="Generic_Error_IsRequired", ErrorMessageResourceType=typeof(App_GlobalResources.Resource))]

[Display(Name="Login_Username", ResourceType=typeof(App_GlobalResources.Resource))]

public string UserName { get; set; }

[Required(ErrorMessageResourceName = "Generic_Error_IsRequired", ErrorMessageResourceType = typeof(App_GlobalResources.Resource))]

[DataType(DataType.Password)]

[Display(Name = "Login_Password", ResourceType = typeof(App_GlobalResources.Resource))]

public string Password { get; set; }

[Display(Name = "Login_Remember_me", ResourceType = typeof(App_GlobalResources.Resource))]

public bool RememberMe { get; set; }

}

@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 05 Nov 2013

1 answer

125 views

Revert Multiselect to original state?

I have a multiselect widget that gets its initial values from my model and then reads from a datasource to get options. What i'd like to do provide users a button they can click to revert all changes made to the multiselect.

My Multiselect definition is below:

@(Html.Kendo().MultiSelect()

.Name(AMultiName)

.DataTextField("PrettyText")

.DataValueField("MapAbbreviation")

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

.Filter(FilterType.Contains).MinLength(3)

.AutoBind(false)

.DataSource(

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

.Value(ASelectedOptions)

.Events(e =>

{

e.Change("onChangeEvent");

e.DataBound("saveInitialMultiValues");

})

)

On the databound I invoke a function where i copy the existing value and _dataItems array into new arrays (this way i have what the original state of the widget was). Then in my function that is invoked by my cancel button i try to set the .value and .dataItem properties of the multiselect and refrech them but the UI doesn't update. Can someone see my flaw?

 //function invoked by dataBound

function saveInitialMultiValues(multi) {

multi.sender._originaldataItems = multi.sender._dataItems.slice(0);

multi.sender._originalValues = multi.sender._values.slice(0);

}

//function invoked by my cancel button

function cancelMultiSelectUpdates(multiId) {

var multi = $('#' + multiId);

var temp = multi.data("kendoMultiSelect");

temp._dataItems = temp._originaldataItems;

temp._values = temp._originalValues;

refresh();

}

Ive debugged it and my array values are copied to my placeholder arrays and then back into the _values and _dataItems array properly but the UI doesn't reflect the change....

MultiSelect

answered on 05 Nov 2013

1 answer

262 views

show paging buttons at top of grid

Is there any way to have the paging buttons for a pageable grid appear at the top instead of the bottom?

Grid

answered on 05 Nov 2013

1 answer

115 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

555 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

107 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

179 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

376 views

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

Chart

answered on 04 Nov 2013

2 answers

329 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

171 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