Questions on UI for ASP.NET MVC Forum

7 answers

277 views

Hi,
We are using a kendo treeview as our main menu in our MVC app. It's in our default layout.
The question is, how do we keep the currently selected menu item selected and showing as they navigate from controller/view to controller/view? Should we use cookies? Session? Any sample code would be great!
We are trying to get up to speed on Kendo and want to do thing "right" from the get go.
Any help would be great.
Thanks ... Ed

TreeView

answered on 26 Feb 2014

1 answer

101 views

Custom templates that allow editing?

Anyone know if this grid can have custom layouts that allow inline editing, but don't cause a popup? I would like to just rearrange the rows to be stacked, but still be editable. Here is an simple layout example below:

LastName Phone
FirstName Email

Grid

answered on 26 Feb 2014

1 answer

357 views

[Solved] Whole-Grid Client-Side Validation

I am trying to implement a custom validator to require that a user enter a certain number of rows in my grid. I am applying the validation attribute to the IEnumerable<T> that provides the rows for my grid. The validation code gets called on the server side, but on the client side I don't see the data- properties anywhere in the page. Is it possible to run a client-side validator for the grid as a whole? If so, what do I need to do so that the client-side code is run? I'm guessing that because there is no direct reference from the grid to the property, that the client-side validation is not being wired up. Is there a way to work around this? Could I bind the grid directly to the property somehow instead of going through the .Read() AJAX method to get the data?

Here is my validation attribute:

[AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = false, Inherited = true)]

public class RequiredCountAttribute : ValidationAttribute, IClientValidatable

{

public const int NotRequiredCount = -1;

private int minCount;

private int maxCount;

public string MinErrorMessage { get; set; }

public string MaxErrorMessage { get; set; }

public RequiredCountAttribute(int minCount, int maxCount = NotRequiredCount)

: base()

{

this.minCount = minCount;

this.maxCount = maxCount;

}

protected override ValidationResult IsValid(object value, ValidationContext validationContext)

{

if (value != null)

{

IEnumerable list = (IEnumerable)value;

int count = 0;

foreach (object o in list)

count++;

if (count < minCount)

{

string errorMessage = FormatErrorMessage(validationContext.DisplayName);

return new ValidationResult(errorMessage);

}

if (maxCount != NotRequiredCount && count > maxCount)

{

string errorMessage = FormatErrorMessage(validationContext.DisplayName);

return new ValidationResult(errorMessage);

}

return ValidationResult.Success;

}

public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)

{

var rule = new ModelClientValidationRule();

rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());

rule.ValidationType = "requiredcount";

rule.ValidationParameters.Add("mincount", minCount);

if (maxCount != NotRequiredCount) rule.ValidationParameters.Add("maxcount", maxCount);

yield return rule;

}

Here is the JavaScript piece:

(function ($, kendo) {

$.extend(true, kendo.ui.validator, {

rules: { // custom rules

requiredCount: function (input, params) {

//check for the rule attribute

if (input.filter("[data-val-requiredcount]").length && input.val()) {

var minCount = $(input).attr('data-val-requiredcount-mincount');

var maxCount = $(input).attr('data-val-requiredcount-maxcount');

if (input.val() < minCount)

return false;

if (maxCount !== undefined && input.val() > maxCount)

return false;

}

return true;

}

},

messages: { //custom rules messages

requiredCount: function (input) {

// return the message text

return input.attr("data-val-requiredcount");

}

});

})(jQuery, kendo);

Here is my grid definition:

@(Html.Kendo().Grid<AccountManagement.Business.ViewModels.Areas.DM.RehireDocumentSettingViewModel>()

.Name("DocumentSettings")

.Columns(columns =>

{

columns.Bound(ds => ds.Form)

.ClientTemplate("#= data.Form.Description #" +

"<input type='hidden' name='DocumentSettings[#= index(data)#].Form.FormID' value='#= data.Form.FormID #' />"

);

columns.Bound(ds => ds.DocumentDateType)

.ClientTemplate("#= DocumentDateType.Description #" +

"<input type='hidden' name='DocumentSettings[#= index(data)#].DocumentDateType.RehireDocumentDateType' value='#= DocumentDateType.RehireDocumentDateType #' />"

);

columns.Bound(ds => ds.RemoveIfOlderThanDays)

.ClientTemplate("#= RemoveIfOlderThanDays #" +

"<input type='hidden' name='DocumentSettings[#= index(data)#].RemoveIfOlderThanDays' value='#= RemoveIfOlderThanDays #' />"

);

columns.Command(command => command.Destroy());

}

)

.ToolBar(toolbar =>

{

toolbar.Create().Text(AccountManagement.Resources.AccountManagementResources.AddRehireDocumentSettingButtonText);

})

.Navigatable()

.Sortable()

.Scrollable()

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

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

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

.Model(model =>

{

model.Id(ds => ds.Form.FormID);

model.Field(ds => ds.Form).DefaultValue(

ViewData["defaultForm"] as AccountManagement.Business.ViewModels.Areas.DM.FormViewModel);

model.Field(ds => ds.DocumentDateType).DefaultValue(

new AccountManagement.Business.ViewModels.Areas.DM.RehireDocumentDateTypeViewModel() {

RehireDocumentDateType = AccountManagement.Models.RehireDocumentDateType.DateTypeNotSpecified

}

);

}

)

.Read("RehireDocumentSetting_Read", "RehireSetup")

)

Any help would be appreciated.

Thanks,
Brian

Grid

answered on 24 Feb 2014

4 answers

216 views

Where is my listview data

Hi. New here.

Below is a ListView and a DropDownList, as simple as possible, calling the same Web API for their data.

The DropDownList works well. The ListView does show anything. What am I doing wrong?

The ListView API call is: http://localhost/api/vehicles?sort=&group=&filter=
The DropDownList API call is : http://localhost/api/vehicles

I would have assumed the .ServerOperation(false) would have removed the sort&group&filter from the Get. In any case, the JSON returned by both Gets is exactly the same.

Thanks

PS: in case this is relevant, the Web API controller was generated by the Telerik Data Access Wizard and unmodified

<script type="text/x-kendo-template" id="vehicletemplate">

<div>

<p>Dummy Placeholder</p>

</div>

</script>

<div class="col-md-4">

@(Html.Kendo().ListView<Object>().Name("VehicleList")

.ClientTemplateId("vehicletemplate")

.TagName("div")

.DataSource(ds => ds

.ServerOperation(false)

.Read(read => read

.Url("/api/vehicles").Type(HttpVerbs.Get)

)

@(Html.Kendo().DropDownList()

.Name("ddList")

.DataTextField("Registration")

.DataSource(ds => ds

.Read(read => read

.Url("/api/vehicles").Type(HttpVerbs.Get)

)

</div>

ListView

answered on 24 Feb 2014

1 answer

346 views

Splitter RenderPartial

What is the correct way to use RenderPartial in a splitter?

@(Html.Kendo().Splitter()

.Name("vertical")

.Orientation(SplitterOrientation.Vertical)

.Panes(verticalPanes =>

{

verticalPanes.Add()

.Size("100px")

.HtmlAttributes(new { id = "top-pane" })

.Collapsible(false)

.Content(

@Html.RenderPartial("HeaderPartialView");

);

Splitter

answered on 21 Feb 2014

3 answers

125 views

Custom Edit

Custom Edit issue with Child Object.
I have a grid with a Custom Editor. The object that I want to edit has a child object.
When I select update in the editor it updates both objects.
If I select edit again on the same object it brings up the editor in the current state as expected.
This time when I select update in the controller it shows the data for the child object in the original state.

What I am looking for at this point is an example of using the grid and update that actually updates a child object.
I've see lots of examples that update the parent object, of display a child detail but nothing that actually updates both the parent and child.
Do I need to create a separate update on the child inside of my Custom Editor?

Editor

answered on 20 Feb 2014

1 answer

210 views

[Solved] Load different content based on selected id

Hello,

I use a panel bar to load content from a partial view which receives an id to display some informations based on it. Is it possible to reload a pane with different id using? I want something like this:

<script>
function loadDetails(id) {
// get a reference to the panel bar
var panelBar = $("#panelbar").data("kendoPanelBar");
// reload the panel bar
panelBar.reload("#paneWithAjax", new {id = id});
}
</script>

The panel bar has a pane added with
.LoadContentFrom("ShowDetails", "Controller", new {id = id})

Regards

PanelBar

answered on 20 Feb 2014

1 answer

109 views

Don't display folder if it has no children

Hi, Is this possible?

TreeView

answered on 20 Feb 2014

2 answers

277 views

Date Formatting

I have a ListView control which uses a client template something like:

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

...

<div>${kendo.toString(PublicationDate, "dd MMMM yyyy")}</div>

...

</script>

If I construct the ListView using:

@(Html.Kendo().ListView(Model.Papers)...

everything works fine and the dates display correctly. Model.Papers is an IEnumerable<PaperListItem>. PaperListItem.PublicationDate is a C# DateTime.

However, if I construct the ListView using:

@(Html.Kendo().ListView<IEnumerable<PaperListItem>>()...

the dates come out like "/Date(1382050800000)/".

Why is that?

ListView

answered on 20 Feb 2014

1 answer

103 views

Editor Justify Buttons don't Work

As the title says, the 'Justify' buttons on the editor don't work. They show up, but when I click them, nothing happens. All the other toolbar buttons work perfectly, it's only the justify buttons that have a problem.

Here's my editor configuration:
@(Html.Kendo().Editor().Name("Description")
.Encode(true)
.Tools(t => t.Clear().Bold().Italic().Underline()
.FontSize().FontName()
.InsertOrderedList().InsertUnorderedList()
.Indent().Outdent()
.JustifyLeft().JustifyRight()
.JustifyCenter().JustifyFull()))

Kendo Version: 2013.3.1119
Browser: IE10

Editor

answered on 19 Feb 2014