Questions on UI for ASP.NET MVC Forum

1 answer

233 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

247 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

122 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

384 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

128 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

194 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

237 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

167 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

1 answer

148 views

Kendo Grid drag and drop with JQueryUI draggable

Hi,

I'm new to Kendo UI and want to implement drag a record from a Kendo Grid and drop to another JQuery controller (http://tux.fi/~jarnok/fullcalendar-resourceviews/). I've managed to implement drag a row using kendo graggable event, but it is not working for the other controller.It support for JQuery UI drop event. How to implement drag a row in a kendo grid using jquery ui drag?

Grid

answered on 17 Mar 2014