Questions on UI for ASP.NET MVC Forum

1 answer

164 views

Validation for Dropdown on click of submit is not working for IE9. Screenshot attached.

Hi ,

I have a problem with validation for dropdown on click of submit. The validation triggers in Chrome but IE9 doesnt support, so could any one suggest a work around for IE.

Here is the dropdown UI

<div id="ModalMaterialCodeMappingForm">
    <div class="editor-row" style="padding-bottom: 1em;">
        <div class="selector-type-column">
            @(Html.Kendo().DropDownList().Name("editMappingTerminalSearchTypeDropDownList")
                  .DataTextField("Text").DataValueField("Value").BindTo(Model.TerminalSearchType))
        </div>
        <div class="float-left editor-label" style="width: 80px;">
            @Html.LabelFor(model => model.TerminalName)
        </div>
        <div class="float-left">
            @Html.TextBoxFor(model => model.TerminalName, new {selectedValue = "0", @class = "selector"}) <span style="color:red">*</span><span class="k-invalid-msg" data-for="TerminalName"></span>
        </div>
        <div class="clear"></div>
    </div>

the dropdown is an autocomplete which has a placeholder, if i remove the place holder the validation triggers.

textBoxField.kendoAutoComplete({
        minLength: 1,
        dataTextField: "Value",
        dataValueField: "Key",
        filter: "contains",
        placeholder: placeHolderText
});

I have attached the screenshots.

DropDownList

answered on 26 Feb 2013

1 answer

96 views

First action called on grid

Am I correct in saying that the grid calls the Read operation on its datasource by default? I am looking at some examples and I can't see where there is an explicit call to read the data from the datasource. If I am right, is there a way to prevent that and wait for the user to initiate the load?

Thanks

Grid

answered on 26 Feb 2013

1 answer

141 views

Object properties / methods undefined with MVC

We are creating an MVC 4 application using the Kendo.Mvc helper assembly. The code is working well; however, we appear to be missing something when we try to obtain a reference to a kendo control.

Example:
Our application has an ActionLink on a toolbar. When the user clicks on the ActionLink, we call into a JS function to validate if the displayed grid has a row selected. Within the function we attempt to obtain a reference to the grid and get the selected row. Unfortunately, the select() function throws an error ("Value is undefined").

I have included the code below. Most of our logic will be based on controls having the ability to communicate with each other from events, etc. Are we able to receive the functionality using the MVC assembly, or are we only able to use the API when code in JS?

Any comments or assistance would be much appreciated.

Thanks,
Todd

@(Html.Kendo().Grid(Model.Transaction)

.Name("grid")

.Columns(columns => {

columns.Bound(o => o.EntityId)

.Hidden().Visible(false);

columns.Bound(o => o.EntityName)

.Sortable(true)

.Title("Entity Name")

.ClientTemplate(@Html.ActionLink("#=EntityName#", "Details", "Entity", new { id = "entityId" }, null).ToHtmlString().Replace("entityId", "#=EntityId#"));

columns.Bound(o => o.TransactionType);

columns.Bound(o => o.Name)

.ClientTemplate(@Html.ActionLink("#=Name#", "Details", "Engagement", new { id = "engId" }, null).ToHtmlString().Replace("engId", "#=ID#"));

columns.Bound(o => o.TransactionStatus);

columns.Bound(o => o.Initiator);

columns.Bound(o => o.Reason);

})

.Pageable(p => p.PageSizes(true))

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

))

)

.Navigatable()

.Resizable(resize => resize.Columns(true))

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(p => p.ID))

.Read(r => r.Action("Search", "Transaction")))

)

getSelectedRowId: function (gridId) {

var grid = jQuery(gridId).kendoGrid().data("kendoGrid");

var row = grid.select();

if (row.length > 0)

return grid.dataItem(row).id;

else

return null;

}

General Discussions

answered on 26 Feb 2013

1 answer

112 views

DataSource.sync() doesn't call create after adding a model to a dataSource generated by ASP.NET MVC ListView Helper

Hi Kendo,

I tried this on http://jsfiddle.net/rusev/E3vYH/ and it works fine. Now I have a listView generated by ListView Kendo Helper and I add a model by calling DataSource.add() method, but when I call DataSource.sync() it doesn't call create and I don't see any http activity on my browser's network tab. I copied the code generated by the kendo helper and pasted it into a test html file and it doesn't work neither. It did add the model to the listView but never calls create. Here is my test file:

<!DOCTYPE html>
<html>
<head>
<title>Testing Kendoui dataSource</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script type="text/x-kendo-tmpl" id="template">
<div data-id = ${CountryCode}>
<p>${CountryName}</p>
</div >
</script>
<script>
$(function () {
$("#target").kendoListView ({
"dataSource": {
"transport": {
"prefix": "",
"read": function () {
alert("reading...");
},
"create": function () {
alert("creating...");
},
"destroy": function () {
alert("destroying...");
},
"update": function () {
alert("updating...");
}
},
"type": "aspnetmvc-ajax",
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "SubaccountId",
"fields": {
"SubaccountId": {
"type": "number"
},
"CountryCode": {
"type": "string"
},
"CountryName": {
"type": "string"
}
}
}
}
},
"template": kendo.template($('#template').html()),
"selectable": "single"
});
$('#addButton').bind("click", function () {
var ds = $('#target').data('kendoListView').dataSource;
ds.add({

SubaccountId: 1,
CountryCode: 'US',
CountryName: 'United States'

});
ds.sync();
});
});
</script>
</head>
<body>
<div>
<button id="addButton">Add Country</button>
</div>
<div id="target"></div>
</body>
</html>

I tried with different jquery and kendo version too. No luck.

How do I make this work.

Thanks

D

General Discussions

answered on 26 Feb 2013

1 answer

257 views

Required validation not fireing client-side

Hi,
I have a box:

@(Html.Kendo().NumericTextBoxFor(m => m.FilterParticipants).Format("n0").Min(1).Decimals(0))

with a required attribute:

[Required(ErrorMessageResourceName = "ValidationRequired", ErrorMessageResourceType = typeof(Resources.Global))]



//[Min(1, ErrorMessageResourceName = "ValidationRequired", ErrorMessageResourceType = typeof(Resources.Global))]



public

int FilterParticipants { get; set; }

and if I clear the box I can still submit the form.
But: I also have a datepicker in the form and if I clear that control and tries to submit, then the validation fires (on both controls).

Regards,
Mattias

NumericTextBox

answered on 26 Feb 2013

9 answers

349 views

grid.hideColumn hides correct header but incorrect data

I have a grid that I toggle the visibility of a column on when a button is pushed.

It hides the column header just fine, but with the data it hides is one column to the left.

I'm hiding the column NMFC, and when that is hidden, the NMFC column header disappears.

However, the data under the Weight column ("lbs") is the data that is hidden and the value under NMFC ("test") is now visible underneath the Weight column.

Here's the code for the columns:

columns.Bound(i => i.WeightUOM)

.EditorTemplateName("ItemGrid_RefUOMListingWeight")

.Width(50);

columns.Bound(i => i.NMFC).Width(50);

Here's the script code:

var itemGrid = $("#QuoteItemGrid").data("kendoGrid");

itemGrid.hideColumn("NMFC");

I am using a detail template on this grid, so maybe it is throwing the index off by one? Not sure, but any tip would be helpful. I can provide more code if needed. I thought I would try and keep it simple for this first post and only put critical code in.

Thanks!

Grid

answered on 25 Feb 2013

1 answer

148 views

Hierarchy - Is it possible to have 2 tabs on hierarchy each refering to a separate table?

Hi Experts,
Can we display two sets of hierarchy on the same level on a tab strip? Something like Employee(Main Table) with Orders received (Hierarchy table 1) and orders fullfilled (Hierarchy table 2)?

Grid

answered on 25 Feb 2013

7 answers

170 views

[Solved] Can desktop applications be developed using html5 and javascript in Kendo UI?.

Hi,

Could you please tell me whether desktop applications can be developed using html5 and javascript in Kendo UI?.

Thanks.

General Discussions

answered on 25 Feb 2013

1 answer

716 views

Nullable Datepicker

Hi,

I have editable grid which opens a popup when editing, this is opening a template page.

In this template page I have a kendo datepicker

<div class="editor-label">
@Html.LabelFor(model => model.DateInvoiced)
</div>
<div class="editor-field">
@(Html.Kendo().DatePickerFor(model => model.DateInvoiced))
@Html.ValidationMessageFor(model => model.DateInvoiced)
</div>

It is binding to a viewmodel where the DateInvoiced is a nullable datetime.
When we add a record we don't want to provide this value yet, but when we hit the save button, the kendo datepicker is asking us to provide the value and is making this required.

The model is nullable and does not have required attribute.

[Display(Name = "Received")]
public Nullable<DateTime> DateInvoiced { get; set; }

How do we make the datepicker allow blank value?

DatePicker

answered on 25 Feb 2013

1 answer

829 views

ASP .NET MVC - Kendo Grid with Cascading DropDown List - Need Dropdown Text

Hi Experts,
I had downloaded the KendoGridWithCascadingCombo boxes example posted by admin and used the same concept in my code. I need help with the following

1. I need to show the dropdown text instead of the value on the grid after editing. The client template does not seem to work for InLineEditing

Here is the code on my razor file

@using System.Web.Mvc.Html
@using Kendo.Mvc.UI
@model ModelSelectionViewModel

@section Head {
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}

function rowindex(dataItem) {
var data = $("#ModelSelectionSearchCriteriaList").data("kendoGrid").dataSource.data()
return data.indexOf(dataItem);
}

function filterCategory() {
return {
media: $("#Media").data("kendoDropDownList").value()
};
}

function filterSubCategory() {
return {
categoryId: $("#Category").data("kendoDropDownList").value()
};
}

</script>
}

<div class="container">
<div class="row-fluid">
<div class="span12">
<ul class="breadcrumb">
@Html.MvcSiteMap().SiteMapPath()
</ul>
</div>

</div>

<div class="row">
<div class="span12">
<div class="widget">
<div class="widget-header">
<i class="icon-star"></i>
<h3>
Model Selection Criteria Panel</h3>
</div>
<div class="widget-content">
@using (Html.BeginForm("GetData", "ModelSelection"))
{
@(Html.Kendo().Grid(Model.ModelSelectionCriteriaList)
.Name("ModelSelectionSearchCriteriaList")
.HtmlAttributes(new { style = "width:100%;" })
.Columns(columns =>
{
columns.Bound(c => c.Media).HeaderHtmlAttributes(new { @title = "Media" }).Width(300).ClientTemplate("#=Media#" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Media' value='#= Media #' />"
//);
columns.Bound(c => c.Category).Title("Category").HeaderHtmlAttributes(new { @title = "Category" }).Width(300);
// .ClientTemplate("#=Category #" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].Category' value='#= Category #' />"
//);

columns.Bound(c => c.SubCategory).Title("SubCategory").HeaderHtmlAttributes(new { @title = "SubCategory" }).Width(300);
// .ClientTemplate("#=SubCategory#" +
// "<input type='hidden' name='ModelSelectionSearchCriteriaList[#= rowindex(data)#].SubCategory' value='#= SubCategory #' />"
//);

columns.Command( command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New Criteria");
})
.Editable(editable => editable
.Mode(GridEditMode.InLine)
.DisplayDeleteConfirmation(false)
)
.Scrollable()
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(c => c.Id))
.Create(update => update.Action("EditingInline_Create", "ModelSelection").Type(HttpVerbs.Post))
.Destroy(update => update.Action("EditingInline_Destroy", "ModelSelection").Type(HttpVerbs.Post))
.Update(update => update.Action("EditingInline_Update", "ModelSelection").Type(HttpVerbs.Post))
// .Read(read => read.Action("EditingInline_Read", "ModelSelection").Type(HttpVerbs.Post))
)
)

<input id="save" type="submit" class="btn btn-primary" name="button" value="Search" />
@:   
@Html.ActionLink("Reset Criteria", "Index", "ModelSelection", new { }, new { id = "btnReset", @class = "btn" })
}
</div>
</div>
</div>
</div>
------------------------------------

Editor Templates

1. category.cshtml

@model long


@(Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Select Category...")
.DataTextField("CategoryText")
.DataValueField("CategoryId")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetModelCategory", "ModelSelection")
.Data("filterCategory");
})
.ServerFiltering(true);
})
.AutoBind(false)
.CascadeFrom("Media")
)
@Html.ValidationMessageFor(m => m)

--------------------------------------------------------------
2. media.cshtml
@model long

@(Html.Kendo().DropDownListFor(m => m)
.OptionLabel("Select Media..")
.DataTextField("MediaText")
.DataValueField("MediaId")
.DataSource(source => {
source.Read(read => {
read.Action("GetModelMedia", "ModelSelection");
});
})
)
@Html.ValidationMessageFor(m => m)

3. subcategory.cshtml
@model long
@(Html.Kendo().DropDownListFor(m => m)
.AutoBind(false)
.OptionLabel("Select SubCategory...")
.DataTextField("SubCategoryText")
.DataValueField("SubCategoryId")
.DataSource(source => {
source.Read(read =>
{
read.Action("GetModelSubCategory", "ModelSelection")
.Data("filterSubCategory");
})
.ServerFiltering(true);
})
.CascadeFrom("Category")
)
@Html.ValidationMessageFor(m => m)

-----------------------------------------------------------------------------
My Controller code is below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TIMS.Models;
using TIMS.Areas.Alberta.SearchCriteria;
using TIMS.Areas.Alberta.Services;
using TIMS.Services;
using TIMS.Areas.Alberta.ViewModels;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using TIMS.Controllers;

namespace TIMS.Areas.Alberta.Controllers
{
public class ModelSelectionController : BaseController
{
#region Protected Members
protected IAlbertaLookupService albertaLkService;
protected IAlbertaUserSessionService albertaUserSessionService;


#endregion

#region Constructor
public ModelSelectionController(IAlbertaLookupService albertaLkService, IAlbertaUserSessionService albertaUserSessionService)
{
this.albertaLkService = albertaLkService;
this.albertaUserSessionService = albertaUserSessionService;
}
#endregion

public ActionResult Index()
{
ModelSelectionViewModel modelSelectionViewModel = new ModelSelectionViewModel();

List<ModelSelectionSearchCriteria> sessionCriteria = new List<ModelSelectionSearchCriteria>();
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriteria;
return View(modelSelectionViewModel);
}

public ActionResult EditingInline_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(albertaUserSessionService.ModelSelectionSearchCriteriaData.ToDataSourceResult(request));
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Create([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{

if (criteria != null && ModelState.IsValid)
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
if (sessionCriterias.Count != 0)
criteria.Id = sessionCriterias[sessionCriterias.Count -1].Id + 1;
else
criteria.Id = 1;

sessionCriterias.Add(criteria);
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}

return Json(new[] { criteria }.ToDataSourceResult(request, ModelState));
}


[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Destroy([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{
if (criteria != null )
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
int index = 0;
for (int c = 0; c < sessionCriterias.Count; c++)
if (sessionCriterias[c].Id == criteria.Id)
{
index = c;
break;
}
sessionCriterias.RemoveAt(index);
albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}

return Json(ModelState.ToDataSourceResult());
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, ModelSelectionSearchCriteria criteria)
{
if (criteria != null && ModelState.IsValid)
{
List<ModelSelectionSearchCriteria> sessionCriterias = albertaUserSessionService.ModelSelectionSearchCriteriaData;
int index=0;
for (int c=0; c < sessionCriterias.Count; c++)
if (sessionCriterias[c].Id == criteria.Id)
{
index = c;
break;
}

sessionCriterias[index].Media = criteria.Media;
sessionCriterias[index].Category = criteria.Category;
sessionCriterias[index].SubCategory = criteria.SubCategory;

albertaUserSessionService.ModelSelectionSearchCriteriaData = sessionCriterias;
}


return Json(ModelState.ToDataSourceResult());
}

public JsonResult GetModelMedia()
{
SelectList medias = albertaLkService.GetModelMediaList();

return Json(medias.Select( p => new { MediaId = p.Value, MediaText = p.Text}) , JsonRequestBehavior.AllowGet);
}

public JsonResult GetModelCategory(long media)
{

SelectList categories = albertaLkService.GetModelMatrixCategoryList(media);

return Json(categories.Select(p => new { CategoryId = p.Value, CategoryText = p.Text }), JsonRequestBehavior.AllowGet);
}

public JsonResult GetModelSubCategory(long categoryId)
{
SelectList subCategories = albertaLkService.GetModelMatrixSubCategoryList(categoryId);

return Json(subCategories.Select(p => new { SubCategoryId = p.Value, SubCategoryText = p.Text }), JsonRequestBehavior.AllowGet);
}

public ActionResult GetData(ModelSelectionViewModel viewModel)
{
List<ModelSelectionSearchCriteria> sessionCriteria = albertaUserSessionService.ModelSelectionSearchCriteriaData;




return View("result", viewModel);
}

}
}

Grid

answered on 25 Feb 2013