Questions on UI for ASP.NET MVC Forum

1 answer

56 views

I have an app that was recently developed by someone else, who happens to be on vacation this week. So I am trying to compile it and deploy it into production. However, I am getting an error that is telling me that in the following code, Kendo is undefined. There are about a dozen similar errors throughout the code.

@(Html.Kendo().TimePickerFor(m => m))

I have no experiance with Kendo but I have worked with Telerik's extension to MVC3. But I am not having any luck resolving some issues when trying to compile this application on my local development machine.

When looking at what I have installed, I have Kendo UI for MVC VSExtensions 2013.2.7160, which is the same version as the other developer, as I have access to his laptop. So do I need to add a reference to something or install something to get this to work?

"Kendo" is underlined in red and tells mw that it is undefined. When I execute the app, I get dozens of JavaScript errors.

I suspect I am missing a reference or maybe the developer did not check in all of his code into our source control repository. So now I am working through the getting started documents on the Telerik Kendo website trying to figure out what I might be missing.

Any thoughts or suggestions would be grealy appreciated.

General Discussions

answered on 05 Nov 2013

1 answer

243 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

120 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

261 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

112 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

546 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

104 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

176 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

368 views

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

Chart

answered on 04 Nov 2013

2 answers

325 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