Questions on UI for ASP.NET MVC Forum

1 answer

679 views

Event trigger on Grid Editor Pop-up Load

I'm using the Grid Editor with a Partial View. One group of inputs in the editor should only be displayed if a boolean option is true (which has a corresponding checkbox on the form).

How do I configure the Grid Editor to trigger a Javascript event so that the group can be hidden/displayed according to whether the field is set (i.e., the checkbox is set)?

I've tried a couple things:

Calling the javascript method in the <script> block in the CSHTML template. This appears to be run before the values are filled in for the entry being edited, though.
Adding a window open event, but that event is not being triggered.

Thanks!

Grid

answered on 06 Nov 2013

1 answer

251 views

Making a PanelBar - Hide and Pull Out in ASP.NET MVC

Hi,

I'm really enjoying using the PanelBar within a MVC app and I'm using to create a context-sensitive menu; I was wondering if you could point me at any example or useful code the would show me how I could make the whole PanelBar slide away and hide to the side of the screen then animate back in when hovering or click on some sort of tab ?

Thanks in advance

John

PanelBar

answered on 05 Nov 2013

1 answer

51 views

First Time Running app with Kendo Error

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

239 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

114 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

258 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

111 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

533 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

101 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

172 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