Questions on Kendo UI for jQuery Forum

2 answers

212 views

tooltip in template not loading properly

want to include a tooltip in template.

<script id="filter-panel-tpl" type="text/x-kendo-template">
<div>
    # if (Type == Single){ #
        <div class="hight-light-box" >
            <div id="name-#= Id#-@ViewBag.Uid" class="small-size-icon icon-margin-right-5" style="float:right;"></div>
            #= Name #
        </div>
    # }else{ #
        <div class="hight-light-box" >
            <div id="name-#= Id#-@ViewBag.Uid" class="small-size-icon edit-icon icon-margin-right-5" style="float:right;" data-bind="click: onEdit"></div>
            #= Name #
        </div>
    # } #
    @(Html.Kendo().Tooltip()
                .For("#name-#= Id#-" + ViewBag.Uid)
                .Width(300)
                .Height(450)
======> .LoadContentFrom("Index", "Search", new { searchType ="#=Name#" })
                .Position(TooltipPosition.Right)
                .ShowOn(TooltipShowOnEvent.Click)
                .AutoHide(false)
                .ToClientTemplate()
         )
</div>
</script>

In Search Controller, I set a break point in Index(string name). The value for name is "#=Name#", not the value of "Name" field from data model. The rendering for <div> part is working though. Can someone please take a look at this?

Thanks.

ToolTip

answered on 06 Jun 2013

3 answers

128 views

Telerik.KendoUI.Mvc.VSPackage.VsPackage warnings when launching a solution

Is anyone else seeing any warnings when opening a solution with VS2010 and Kendo? I get the following when launching a solution:

Failed to query command status: System.Runtime.InteropServices.COMException <br>(0x80004005): Unspecified error (Exception from HRESULT: 0x80004005 (E_FAIL)) at <br>EnvDTE._DTE.get_ActiveSolutionProjects() at <br>Telerik.VSX.Internal.ProjectManagement.ProjectRetriever.GetFirstSelectedProject(DTE <br>dte) at <br>Telerik.VSX.Internal.ProjectManagement.ProjectWrapFactoryBase`1.GetForFirstSelectedProject(DTE <br>dte) at <br>Telerik.KendoUI.Mvc.VSPackage.CommandStateController.GetState(OleMenuCommand <br>menuCommand, DTE dte) at <br>Telerik.VSX.CommandStateResolving.CommandStateControllerBase.GetAsyncState(OleMenuCommand <br>menuCommand, DTE dte) at <br>Telerik.VSX.VSPackage.PackageBase.MenuCommand_BeforeQueryStatus(Object sender, <br>EventArgs e)

It only appears as a warning in the ActivityLog but I've also had VS2010 crash on me which is why I'm investigating. Any assistance would be appreciated. Thanks!

General Discussions

answered on 06 Jun 2013

14 answers

792 views

Grid with Tabstrip with Grid - Server Binding

So I am following the kendo examples for using a Grid with a nested TabStrip with a Grid within the tab. The problem I am having is that the TabStrip is rendering above the Grid instead of within the detailtemplate. I have attached a screenshot to demonstrate the error.

The main difference between my code and the kendo example is that my main grid and the grids with the tabs are editable.

Here is my view code:

@model IEnumerable<PASSLibrary.Laboratory>

@{

ViewBag.Title = "Laboratories";

}

<h2>Laboratories</h2>

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

.Name("gvLaboratories")

.Columns(columns =>

{

columns.Command(command => { command.Edit(); }).Width(50);

columns.Bound(l => l.ID);

columns.Bound(l => l.Description);

columns.Command(command => { command.Destroy(); }).Width(50);

})

.DetailTemplate(l =>

{

Html.Kendo().TabStrip()

.Name("ts" + l.ID)

.SelectedIndex(0)

.Items(items =>

{

items.Add().Text("Lab Admins").Content(@<text>

@(Html.Kendo().Grid(l.Users_Roles)

.Name("gvLabAdmins" + l.ID)

.Columns(columns =>

{

columns.Bound(a => a.User_ID).Title("User ID");

columns.Bound(a => a.User.Account).Title("BNL Account");

columns.Command(command => { command.Destroy(); }).Width(50);

})

.ToolBar(toolbar => toolbar.Create())

.Sortable()

.DataSource(dataSource => dataSource

.Server()

.Model(model => model.Id(a => a.User_ID))

.Create(create => create.Action("AddLabAdmin", "SystemAdmin"))

.Destroy(destroy => destroy.Action("DeleteLabAdmin", "SystemAdmin"))

)

</text>);

items.Add().Text("Facilities").Content(@<text>

@(Html.Kendo().Grid(l.Facilities)

.Name("gvFacilities" + l.ID)

.Columns(columns =>

{

columns.Bound(f => f.ID);

columns.Bound(f => f.Description);

columns.Command(command => { command.Destroy(); }).Width(50);

})

.ToolBar(toolbar => toolbar.Create())

.Sortable()

.DataSource(dataSource => dataSource

.Server()

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

.Create(create => create.Action("AddFacility", "SystemAdmin"))

.Destroy(destroy => destroy.Action("DeleteFacility", "SystemAdmin"))

)

</text>);

})

.Render();

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(window => window.HtmlAttributes(new { @style = "width:700px;" })))

.Pageable()

.Sortable()

.DataSource(dataSource => dataSource

.Server()

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

.Create(create => create.Action("AddLaboratory", "SystemAdmin"))

.Read(read => read.Action("Laboratories", "SystemAdmin"))

.Update(update => update.Action("UpdateLaboratory", "SystemAdmin"))

.Destroy(destroy => destroy.Action("DeleteLaboratory", "SystemAdmin"))

)

Grid

answered on 06 Jun 2013

2 answers

197 views

drag and drop from listview to grid

Hi,
i need to drag from list and drop to grid, but i have problem with refreshing grid list:

This is code:
<!DOCTYPE HTML>
<html>
<head>
<title>Your Website</title>

<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
html,body {
padding:0;
margin:0;
height:100%;
max-height:100%;
}
.articles-list, .articles-grid {
border: 1px solid #CCC;
height: 40%
}
#list {
padding: 10px
}
#grid {
height: 200px;
background: #FF0;
}
.product {
float: left;
position: relative;
width: 111px;
height: 170px;
margin: 0;
padding: 0;
}
.product img {
width: 110px;
height: 110px;
}
.product h3 {
margin: 0;
padding: 3px 5px 0 0;
max-width: 96px;
overflow: hidden;
line-height: 1.1em;
font-size: .9em;
font-weight: normal;
text-transform: uppercase;
color: #999;
}
.k-listview:after, .product dl:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

</style>
</head>
<body>

<ul id="menu" data-role="menu" class="k-widget k-reset k-header k-menu k-menu-horizontal" tabindex="0" role="menubar">
<li class="k-item k-state-default k-first" role="menuitem">
<span class="k-link">Menu item</span>
</li>
</ul>

<div class="articles-list">
<div id="list"></div>
</div>

<div class="articles-grid">
<div id="grid"></div>
</div>

<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="http://placehold.it/100x100" alt="${name} image" />
<h3>#:name#</h3>
<input type="hidden" value="#:id#">
</div>
</script>

<script>
$(document).ready(function() {
var list = $("#list");
var grid = $("#grid");

var data = [
{ id: 1, name: "Jane Doe", quantity: 30 },
{ id: 2, name: "John Doe", quantity: 33 }
];

var grid_data = new kendo.data.DataSource({
data: []
});

list.kendoListView({
dataSource: data,
template: kendo.template($("#template").html())
});

grid.kendoGrid({
dataSource: {
data: []
},
sortable: true,
columns: [ {
field: "name",
width: 90,
title: "Naziv"
} , {
field: "quantity",
width: 90,
title: "Kolicina"
}
]
});

list.kendoDraggable({
filter: ".product",
hint: function(row) {
return row.clone();
}
});

grid.kendoDropTarget({
drop: function(row) {
var tempData = row.draggable.currentTarget.context.children;
grid_data.add({ id: tempData[2].value, name: tempData[1].innerHTML, quantity: '2' });
}
});
});
</script>
</body>
</html>

Can you tell me if this is correct way doing it, and how should i refresh grid on drop?

Drag and Drop

answered on 06 Jun 2013

1 answer

114 views

Editor Value

Is there a way to get editor value without the html tags, such as a kendoEditor.text() field?

Editor

answered on 06 Jun 2013

9 answers

157 views

why Dates in categoryAxis are shuffled?

Hi,

I'm having dates coming from JSON datasource and are being set as categoryAxis, but they get shuffled automatically, i.e; somehow the middle date is showing as the first field and vice versa. Please find the attached screenshot for detail.
I don'nt konw why is it happening, Please help!

Charts

answered on 06 Jun 2013

6 answers

150 views

Dual plotbands on bubble chart

I would like to create a plotband on both the x-axis and y-axis on a bubble chart. The plotband seems to work fine on the x-axis, but the chart will not accept on the y-axis...regardless if there's one on the x-axis or not.

Is it possible to put a plotband on the y-axis with a bubble chart and how would I go about doing it? I'm on v.2012.2.710
Thanks

Charts

answered on 06 Jun 2013

1 answer

91 views

Modify hasChildren property value of HierarchicalDataSource's item

I'm creating an App with a filesystem. The filesystem contains folders wichs may contain folder or files. Before requesting the transport.read() we don't know if a folder contains subitems. We assume that a folder will contain subitems, so we set "hasChildren" property to true.

How we set "hasChildren" to false once the request returns no subitems, to make the expanding tree dissappear ?

fileSystem: {
                       items: new kendo.data.HierarchicalDataSource({
                           transport: {
                               read: function(options) {
                                   var url = (options.data && options.data.src) ? options.data.src : null;

                                   var request = PncServices.getFilesytem(url, {});

                                   request.done(function(data, textStatus, jqXHR) {
                                       var items = [];
                                       $.each(data, function(key, value) {

                                           var uri = URI(value);
                                           var parts = uri.toString().split("/");
                                           var index = (parts[parts.length-1] === "") ? parts.length-2 : parts.length-1;
                                           var isFolder = (index === parts.length-1);
                                           var label = parts[index];

                                           var item = {
                                               src: value,
                                               label: label,
                                               hasChildren: !isFolder
                                           };

                                           if(items.length <= 0) {
                                               //TODO: Set hasChildren to false
                                               //fileSystem.items.get(url).set("hasChildren", false);
                                           }

                                           items.push(item);
                                       });

                                       options.success(items);
                                   });

                                   request.fail(function(jqXHR, textStatus, errorThrown) {
                                       options.error(errorThrown);
                                   });
                               },
                           },

                           schema: {
                               model: {
                                   id: "src",
                                   hasChildren: "hasChildren"
                               }
                           }
                        })

Data Source

answered on 06 Jun 2013

1 answer

113 views

NavBar BackButton triggering different button on layout view change

I am testing out KendoUI and have a basic mobile nav setup. I have a layout for my main views and for sub views, I change to a different layout to show a back button. On my main views, I have a button aligned left that opens up a menu. My problem is when navigating into a sub view and clicking the back button, it will go back to the previous view but will also trigger the underlying button to fire as well. I have noticed this DOES NOT happen if I tap on the back button very fast and ensure my finger leaves the screen quickly. If I use a slow tap motion on the screen it will trigger the underlying button on the previous view to display the menu. I have tried several different things: Binding to the button that shows the menu with a click function and other similar approaches. The main issue I feel is that the KendoUI framework loads the new view/layout and does not reset the fact that your finger may still be on the same area where anew button will be and it may be firing even tho the only event that has taken place was a tap release/end instead of a full start/end tap. Anyway around this and do you think setting the touch event variables with a lower default interval for clicks would help?

NavBar

answered on 06 Jun 2013

1 answer

164 views

Best practices for inline links inside of listview item

I am creating a listview that when clicked opens up a modal. However I have a body of text in each item. I want to have inline links/navigation that is clickable and takes you to a new view. However if the item is clicked on any other space that isn't an inline link I want to do the regular modal box.

I know kendo works best with kendomobilebuttons for user interaction, but what can you advise on this type of user interaction.

ListView (Mobile)

answered on 06 Jun 2013