Questions on UI for ASP.NET MVC Forum

1 answer

600 views

Kendo ComboBox is not display error in validation summary

I am able to display validation messages in our validation summary for any standard html control (textbox, drop down, etc).
When I replace my drop down with a Kendo ComboBox, the validation error will display next to the combobox, but will not display within the validation summary. Is there something the needs to be done to get the ComboBox behave the same as the other controls on the page?

Please see the example view below. I have two html textboxes, a kendo combobox, and a standard html drop down. The two html textboxes and the drop down display validation messages within the summary as well as next the field. The Kendo ComboBox validation message only displays a message next to the field - it's message does not appear in the summary.

@{
ViewBag.Title = "Home Page";
}
@model ValidationSummaryComboBox.Models.Customer
　
@section featured {
<div class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>@ViewBag.Title.</h1>
<h2>@ViewBag.Message</h2>
</hgroup>
<p>
To learn more about ASP.NET MVC visit
<a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
If you have any questions about ASP.NET MVC visit
<a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
</p>
</div>
</div>
}
@using (Html.BeginForm())
{
@Html.ValidationSummary(false, "Fix these errors, please:")
@Html.TextBoxFor(m => m.FirstName)
<br />
@Html.TextBoxFor(m => m.LastName)
<br />

@( Html.Kendo().ComboBox()
.Name("FavoriteColor")
.Value(Model.FavoriteColor)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>()
{ new SelectListItem() { Text = "Blue", Value = "1" },
new SelectListItem() { Text = "Red", Value = "2" },
new SelectListItem() { Text = "Green", Value = "3" },
new SelectListItem() { Text = "Yellow", Value = "4" } }))

<br />

@Html.DropDownListFor(m => m.FavoriteFood, new List<SelectListItem>()
{ new SelectListItem() { Text = "", Value = "" },
new SelectListItem() { Text = "Pizza", Value = "1" },
new SelectListItem() { Text = "Steak", Value = "2" },
new SelectListItem() { Text = "Raspberries", Value = "3" },
new SelectListItem() { Text = "Ice Cream", Value = "4" }})
　
<br />
<br />
<input type="submit" value="Save" id="save" class="k-button" />

<br />
}
　
<script>
// Initialize the Kendo UI Validator on your "form" containervar validator = $('form').kendoValidator().data("kendoValidator");
</script>

Please advise.
Thanks!

ComboBox

answered on 19 Mar 2014

1 answer

232 views

Force load and expand of node with LoadOnDemand(true)

I'm trying to force the load and expand of a node when using LoadOnDemand. I've seen several examples of this in the forums, but I can't get it to work. This is my code:



var tv = $("#FolderTree").data('kendoTreeView');
 
var selectedItem = tv.dataItem(tv.select());
 
var selectedDataItem = tv.dataItem(tv.findByUid(selectedItem.uid));
 
selectedDataItem.loaded(false);
 
selectedDataItem.load();
 
tv.expand(selectedItem)

The children are being retrieved from the server, but the node is not expanded and the children of the node (which I'm trying to access) are not available in the datasource.

Why is the node not expanding?

Thanks in advance.

TreeView

answered on 19 Mar 2014

1 answer

245 views

'HasChildren = false' ignored

I have the following declaration:

@(Html.Kendo().TreeView()

.Name("FolderTree")

.TemplateId("treeviewtemplate")

.Events(e => e

.Select("tvOnSelect")

.DataBound("tvOnDataBound")

.DragEnd("tvOnDragEnd")

)

.BindTo(Model.Folders, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>

{

mappings.For<PriMate.Web.Models.FolderModel>(bound => bound.ItemDataBound((node, item) =>

{

node.Text = item.name;

node.Id = item.id.ToString();

node.HasChildren = false;

})

.Children(item => item.folders));

})

)

I want to override the 'HasChildren' property with a property from my own model/class and display an image next to the tree item if HasChildren is false. This is my (part of) my template:

# if (item.hasChildren) { #

<input type="image" src="Content/images/trash.png" class="delete-node" onclick="return confirmDelete('folder', '${item.text}', '${item.id}')" title="delete ${item.text}">

# } #

However, I've noticed that:

1. When the property is hard-coded true, it behaves as expected - the image is hidden for all nodes
2. When the property is hard-coded false, it is ignored, and the image is shown only if the the node does not have children (default)
3. When I set the property using my own class property, (node.HasChildren = item.hasChildren;), all images are hidden, despite the fact that this bool value varies.

Is it possible to override this property successfully? If not, can I add my own custom fields to the mappings?

TreeView

answered on 19 Mar 2014

6 answers

121 views

Basic Question.

index.cshtml

@(Html.Kendo().MobileView()
       .Title("Scroll down to load")
       .Content(obj =>
            Html.Kendo().MobileListView<Tree.Models.TreeDBModel>()
                .Name("endless-scrolling")
                .TemplateId("template")
                .EndlessScroll(true)
                .ScrollTreshold(30)
                .Filterable(filter =>
                        filter.Field("Name")
                    .Operator("startswith")
                )
                .DataSource(ds =>
                {
                    ds.Read(read =>
                        {
                            read.Action("TReeList_Read", "TreeDB");
                        });                })))
<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <h3>#:Name#</h3>
    </div>
</script>

Controller(public class TreeDBController : Controller)
        public ActionResult TReeList_Read([DataSourceRequest] DataSourceRequest request)
        {
            IQueryable<TreeDBModel> query = from c in db.TreeList
                                            select new TreeDBModel
                                            {
                                                ID = c.GeoId,
                                                Name = c.Name,
                                                Unit = c.Unit,
                                                GeoID = c.GeoId,
                                                Price = c.Price,
                                                MaxPrice = c.MaxPrice,
                                                qty = c.Qty,
                                                CompanyName = c.Geo.CompanyName,
                                                Phone = c.Geo.Phone
                                            };            return Json(query.ToDataSourceResult(request));         }

output.html
<!DOCTYPE html>
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta charset="utf-8" />
        <title> - test </title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/site.css" rel="stylesheet"/>        <script src="/Scripts/modernizr-2.6.2.js"></script>    



    <link href="/Content/kendo.compatibility.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.bootstrap.min.css" />


    <script src="http://cdn.kendostatic.com/2013.3.1324/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.aspnetmvc.min.js"></script>



<script src="/Scripts/kendo.modernizr.custom.js"></script>
</head>
    <body>

            <div class="content-wrapper">
                <div class="float-left">
                    <p class="Menu"></p>
                </div>
                          <div class="float-right">
                    <section id="login">
                            <ul>
        <li><a href="/Account/Register" id="registerLink">register</a></li>
        <li><a href="/Account/Login" id="loginLink">login</a></li>
    </ul>
                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="/">geo</a></li>
                            <li><a href="/TreeDB">search</a></li>
                            <li><a href="/Home">about</a></li>                                                    </ul>
                    </nav>
                </div>
            </div>

        <div id="body">

            <section class="content-wrapper main-content clear-fix">

<div data-reload="false" data-role="view" data-stretch="false" data-title="Scroll down to load" data-use-native-scrolling="false" data-zoom="false"><div data-role="content"><ul data-endless-scroll="true" data-filterable="{"autoFilter":true,"field":"Name","ignoreCase":false,"operator":"startswith"}" data-role="listview" data-scroll-treshold="30px" data-source="{"transport":{"prefix":"","read":{"url":"/TreeDB/TReeList_Read"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ID":{"type":"number"},"Name":{"type":"string"},"Unit":{"type":"string"},"qty":{"type":"number"},"Price":{"type":"number"},"MaxPrice":{"type":"number"},"GeoID":{"type":"number"},"CompanyName":{"type":"string"},"Phone":{"type":"string"}}}}}" data-template="template" id="endless-scrolling"></ul></div></div>
<script type="text/x-kendo-tmpl" id="template">
    <div class="product">
        <h3>#:Name#</h3>
    </div>
</script>            </section>
        </div>        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>© 2014</p>
                </div>
            </div>
        </footer>



<script type="application/json" id="__browserLink_initializationData">
    {"appName":"InternetExplorer","requestId":"55ca8e2b6c0349f29d26a3b9859d41d5"}
</script>
<script type="text/javascript" src="http://localhost:9308/1da8a992d4e74d81818c2cf92074605d/browserLink" async="async"></script>
</body>
</html>

ListView (Mobile)

answered on 19 Mar 2014

3 answers

372 views

Filtering/sorting on bit flag column

Hi,

I'm trying to find out whether Kendo supports filtering and sorting operations (client side) on bit flag columns (i.e enums with the [Flags] attribute).

We'd like to have one column that displays several different icons depending on which bits are set in the column. This can be accomplished easily with a client template, but filtering looks more complex. By default, it looks like Kendo will try and set "equal to" as the operator in the generated filter expression, when we really need a logical and to return records with the selected flag bits set. I've dug through the source code a bit and it doesn't seem that filter expressions can support logical and or logical or as the operator for a single filter (I am not talking about the logic used to combine multiple filters). Is this correct, or is there something I've overlooked?

Thanks,
Nick

Grid

answered on 18 Mar 2014

0 answers

126 views

popup editortemplate dropdownlist selectedindex

Dear Telerik Team,
I'm actually using a Grid with popup edit and an editor template which contains a dropdownlist that looks like this:

@(Html.Kendo().DropDownListFor(model => model.Table)

.OptionLabel(@GeneralConstants.SELECT_VALUE)

.HtmlAttributes(new { style = "width: 200px", id = "TableDropDown", required = "required" })

.SelectedIndex(1)

.Enable(false)

.AutoBind(true)

.Name("Table")

.DataTextField("Name")

.DataValueField("TableID")

.Events(e =>

{

e.Change("onChange");

e.DataBound("bound");

})

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetRegExpressions", "Pattern");

})

.ServerFiltering(true);

})

)

The property Table is an object of type Expressiontable which contains a TableID and a Name. It is disabled, because the value coming out of the database shouldn't be edited.

The thing now is: when the create/update button is clicked the controller doesn't receive the value of the Table property which is delivered as null.
How can I avoid this issue?

Any advice would be helpful.
Thanks in advance and kind regards
Tom

Grid

asked on 18 Mar 2014

2 answers

190 views

Aggregates totals with multiple levels of grouping

Hi,

I'm having a minor issue with showing aggregate totals when using 2 levels of grouping on a Grid. My grid is grouped by Vendor then invoice and the totals show once for each level of grouping. This is what I want but when there is only one invoice in the group it looks quite confusing (please see attached). Is there a way in the ClientGroupFooterTemplate to check which level of grouping is currently being shown so I can change the labelling accordingly? So something like the below but I don't know how I would calculate the function IAmInvoiceTotal().

.ClientGroupFooterTemplate("# if(IAmAnInvoiceTotal()){#Invoice Total : #= kendo.toString(sum, 'c') #}else{#Vendor Total : #= kendo.toString(sum, 'c') #}");

I can use jquery to check the class of the previous row and work out which level of grouping I'm at and dynamically change the label that way but it seems like there is probably an easier way.

Grid

answered on 18 Mar 2014

2 answers

234 views

GroupBy functionality not working correctly with ClientRowTemplate

Hello,
I am trying to implement a grid that uses a ClientRowTemplate and also has GroupBy functionality. The grid renders fine and all other behaviors act appropriately except the GroupBy, when a column is selected to GroupBy the column headers act strangely and an additional column is inserted and the widths are changed as well. If I remove the ClientRowTemplate everything works great. I am new to Kendo so please let me know if my implementation is wrong or could be better code is below:

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

.Name("Grid")

.HtmlAttributes(new { style = "height:450px;font-size:.85em;" })

.Columns(columns =>

{

columns.Template(e => { }).ClientTemplate(" ").Width(30).HtmlAttributes(new { style="vertical-align: middle; text-align: center" });

columns.Bound(p => p.Id).Width(60);

columns.Bound(p => p.Title).Width(250);

columns.Bound(p => p.AssignedUser).Width(120);

columns.Bound(p => p.Status);

columns.Bound(p => p.Priority);

columns.Bound(p => p.Category);

columns.Bound(p => p.Tier);

columns.Bound(p => p.LastModifiedAsString).Title("Last Modified").Width(120);

})

.ClientRowTemplate(

"<tr>" +

"<td>" +

"<img style ='margin-top:5px;' src='" + Url.Content("~/Images/") +"#:data.Icon#' alt='#:data.Icon#' />" +

"</td>" +

"<td width='60'>#: Id #</td>" +

"<td width='250'>#: Title #</td>" +

"<td width='120'>#: AssignedUser #</td>" +

"<td>#: Status #</td>" +

"<td>#: Priority #</td>" +

"<td>#: Category #</td>" +

"<td>#: Tier #</td>" +

"<td>#: LastModifiedAsString #</td>" +

"</tr>"

)

.Pageable()

.Sortable()

.Scrollable()

.Groupable()

.Filterable(filterable => filterable

.Extra(false)

.Operators(operators => operators

.ForString(str => str.Clear()

.StartsWith("Starts with")

.IsEqualTo("Is equal to")

.IsNotEqualTo("Is not equal to")

))

)

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("Get", "Grid"))

)

.Events(e => e.Change("onChanged"))

)

<script type="text/javascript">

function onChanged(arg) {

var selected = this.select();

var wiId = this.dataItem(selected).Id;

window.location = '../WorkItem/Edit?Id=' + wiId;

}

var myGrid;

$(function () {

myGrid = $('#Grid').data('kendoGrid');

});

setInterval(DoWork, parseInt(@ViewBag.RefreshInterval));

function DoWork() {

myGrid.dataSource.read();

}

</script>

Grid

answered on 18 Mar 2014

1 answer

165 views

Getting Locations from Sql Server Database

I have been searching documentations but couldnt find any document about adding locations dynamicaly to the map ui. I want to get places locations from my database? I will be glad to see if someone shares knowledge about it.Thanks.

Map

answered on 18 Mar 2014

1 answer

2.1K+ views

DropDownlist Validation is not validating

Hello I'm trying to validate the dropdownlist and it is not validating.. Below is the code i'm trying.. DropDownlist and Date column is required field and when click the button it populate the grid view.. Even though I'm not selecting dropdownlist value it is not validating and populating the empty grid.





@using DWH.WEB.Models.ViewModel

@{

ViewBag.Title = "test";

}

<div style="background-color: #E3F1F7; text-align: left; vertical-align: middle;">

<h2>>>>test</h2>

</div>

<table>

<tr>

<td>

<div class="section"style="width: 350px;">

<h4>Select Entity code</h4>

<div id="ValidateMyContents">

@(Html.Kendo().DropDownList()

.Name("dropdownlist")

.HtmlAttributes(new { style = "width:320px" })

.DataTextField("Text")

.DataValueField("Value")

//.OptionLabel("Please Select")

.OptionLabel(new { Text = "Select Entity", Value = 0 })

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetEntityCode", "GLFINBAL");

});

})

)

<span class="k-invalid-msg" data-for="dropdownlist"></span>

</div>

</td>

<td>

<div class="section"style="width: 250px;">

<h4>Select FiscalYear</h4>

@(Html.Kendo().DatePicker()

.Name("yearpicker")

.Start(CalendarView.Decade)

.Depth(CalendarView.Decade)

.Format("yyyy")

.Value("2014")

.HtmlAttributes(new { style = "width:250px" })

)

</div>

</td>

<td>

<button id="showGrid" class="k-button" type="button" style="width: 150px">View Report</button><br />

<span id="status"></span>

</td>

</tr>

<tr>

<td colspan="3">

</td>

</tr>

</table>

<script>

$("#showGrid").click(function (e) {

e.preventDefault();

$("#status").text("");

var validator = $("#ValidateMyContents").kendoValidator().data('kendoValidator');

if (validator.validate()) {

$("#status").text("Entity was selected");

} else {

$("#status").text("Entity was not selected");

}

$("#AjaxGrid").data("kendoGrid").dataSource.read();

$("#AjaxGrid").css("display", "block");

});

// $("#showGrid").click(function () {

// $("#AjaxGrid").data("kendoGrid").dataSource.read();

// $("#AjaxGrid").css("display", "block");

// });

function additionalInfo() {

var info = $("#dropdownlist").data("kendoDropDownList").value();

var yearpicker = $("#yearpicker").data("kendoDatePicker").value();

return {

dropdownlist: info,

yearpicker: yearpicker

}

</script>

DropDownList

answered on 18 Mar 2014