Questions on Kendo UI for jQuery Forum

1 answer

112 views

Thank you in advance for any feedback!

I got a table with a template binding, and I am using this table as a grid.

I would like to be able to group the data, but when dragging column to group no data is being returned.

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />

<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/styles/kendo.default.mobile.min.css" />

<link rel="stylesheet" href="css/FHFAFlexApp.css" />

<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="http://apps.fhfa.gov/_common/KendoUI/2016-Q2/js/kendo.all.min.js"></script>

<script type="text/javascript" src="__vti_fhfa/environment.js"></script>
<script type="text/javascript" src="scripts/FHFA/FHFAGlobals.js"></script>
<script type="text/javascript" src="scripts/FHFA/fhfa.vm.js"></script>
<script type="text/javascript" src="scripts/auditObjects.js"></script>
<script type="text/javascript" src="scripts/VM/auditVM.js"></script>
<script type="text/javascript" src="scripts/FHFA/fhfa.object.js"></script>

<script type="text/javascript" src="scripts/Elements/splitterObj.js"></script>
<script type="text/javascript" src="scripts/Elements/DragObj.js"></script>
<script type="text/javascript" src="scripts/webServiceCalls.js"></script>
<script type="text/javascript" src="scripts/workflowGlobals.js"></script>
<script type="text/javascript" src="scripts/default.js"></script>
</head>
<body>
<div id="app-main">
<div id="vertical">
<div>
<header>
Audit Logs
<div class="app-version">v. <span data-bind="text: appVersion"></span></div>
</header>
</div>
<div id="middlePane" style="width: 100%">
<div id="horizontal" style="height: 100%; width: 100%">
<div>
<div id="left-pane">
<p>
Inner splitter :: left pane
</p>
</div>
</div>
<div>
<div class="vertical" style="height: 100%; width: 100%">
<div id="center-top">
<div class="pane-content">
<div>
<table id="grid" class="app-list" cellpadding="0" cellspacing="0" style="width:100%">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr id="columns">
<th class="nowrap, column" ><a id="col1" class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditTypeID">Type</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditDate">Date</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="applicationName">Application</a></th>
<th class="nowrap, column" ><a id="col4" class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditUser">User</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="iPAddress">IP Address</a></th>
<th class="nowrap, column" ><a class="app-sortlink" data-bind="click: audit.gridSort()" data-sortfield="auditDescription">Description</a></th>
</tr>
</thead>
<tbody data-bind="source: audit.items" data-template="loglist-row-template"></tbody>
</table>
<div data-bind="visible: audit.hasNone" class="app-noitems">There are no items to display.</div>
<script id="loglist-row-template" type="text/x-kendo-template">
<tr class="app-list-row app-list-hoverEnabled">
<td class="app-list-cell"><span data-bind="text: auditTypeID"></span></td>
<td class="app-list-cell"><span data-bind="datetimeText: auditDate"></span></td>
<td class="app-list-cell"><span data-bind="text: applicationName"></span></td>
<td class="app-list-cell"><span data-bind="text: auditUser"></span></td>
<td class="app-list-cell"><span data-bind="text: iPAddress"></span></td>
<td class="app-list-cell"><span data-bind="text: auditDescription"></span></td>
</tr>
</script>
</div>
</div>
</div>
<div id="center-bottom">
<div class="pane-content">
<table style="width: 100%">
<tr>
<th class="vHeading">AuditID:</th>
<td class="app-list-cell"><span data-bind="text: auditID"></span></td>
</tr>
<tr>
<th class="vHeading">Type:</th>
<td class="app-list-cell"><span data-bind="text: auditTypeID"></span></td>
</tr>
<tr>
<th class="vHeading">Date:</th>
<td class="app-list-cell"><span data-bind="datetimeText: auditDate"></span></td>
</tr>
<tr>
<th class="vHeading">Application:</th>
<td class="app-list-cell"><span data-bind="text: applicationName"></span></td>
</tr>
<tr>
<th class="vHeading">User:</th>
<td class="app-list-cell"><span data-bind="text: auditUser"></span></td>
</tr>
<tr>
<th class="vHeading">IP Address:</th>
<td class="app-list-cell"><span data-bind="text: iPAddress"></span></td>
</tr>
<tr>
<th class="vHeading">Description:</th>
<td class="app-list-cell"><span data-bind="text: auditDescription"></span></td>
</tr>
<tr>
<th class="vHeading">AdditionalInfo:</th>
<td class="app-list-cell"><span data-bind="text: auditID"></span></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<p>
Outer splitter : bottom pane (non-resizable, non-collapsible)
</p>
</div>
</div>

<script>
$(document).ready(function() {

splitterObj(); // split Web Page in sections

$("#grid").kendoGrid({
groupable: true,
reorderable: true,
sortable: true,
columns: [{
field: "auditTypeID",
title: "Type"
},
{
field: "auditDate",
title: "Date",
},
{
field: "applicationName",
title: "Application",

},
{
field: "auditUser",
title: "User"
},
{
field: "iPAddress",
title: "IP Address"
},
{
field: "auditDescription",
title: "Description"
}]
});

//var cols = document.querySelectorAll('#columns .column');
//[].forEach.call(cols, function (col) {
// col.addEventListener('dragstart', handleDragStart, false);
// col.addEventListener('dragenter', handleDragEnter, false);
// col.addEventListener('dragover', handleDragOver, false);
// col.addEventListener('dragleave', handleDragLeave, false);
// col.addEventListener('drop', handleDrop, false);
// col.addEventListener('dragend', handleDragEnd, false);
//});

//var dropTg = document.querySelectorAll('.group');

//dropAreaFn(dropTg);

});
</script>

<style>
#vertical {
height: 100%;
margin: 0 auto;
}

#middle-pane {
background-color: rgba(60, 70, 80, 0.10);
}

#bottom-pane {
background-color: rgba(60, 70, 80, 0.15);
}

#left-pane, #center-pane, #right-pane {
background-color: rgba(60, 70, 80, 0.05);
}

.pane-content {
padding: 0 10px;
}
</style>
</div>
</body>

</html>

Grid

answered on 26 Jul 2016

2 answers

595 views

angularjs treeview how to expand all nodes after tree has loaded?

Hello,

I have an angularjs treeview loaded from pre-set data. I need to expand the complete tree once it has finished loaded. For that I put in my controller a function

OnDatabound which gets executed just after the tree has been loaded; I am trying to get a reference to the treeview as shown below but I get an error:

in Html ...

<div kendo-tree-view="treeview" k-options="treeOptions"

in controller ....

$scope.OnDatabound = function(args){

var treeview = args.sender;

treeview.data("kendoTreeView").expand('.k-item'); /* expand all nodes */ <<<<<< error: TypeError : treeview.data is not a function
};

$scope.treeOptions = {

dataTextField: "Name",
dataSource : $scope.FormatAndLoadMyData(theData, "Id", "parentId", 0) ,
dataBound: $scope.OnDatabound
};

How do I get a reference to the treeview ? .. or .. how can I expand all nodes?

Thanks.

TreeView

answered on 26 Jul 2016

2 answers

98 views

Auto navigate the side root

Hi there,

I've tailored the splitview demo on the Kendo UI demo site.

Prior to the splitview view displaying, I have an initial view asking for some information including what default category the user is interested in.

I'm looking for a solution where I can automatically navigate the user to their selected category. I.e. #side-inbox?CategoryID=15

This is effectively mimicking the user navigating to the split view and clicking on category 15. I will still give them a facility to go "back" so they can look at the contents of other categories.

I've done the easy bit of navigating to the splitview using app.navigate("#splitview"); but I'm struggling to fire the default category.

See extract of categories view on left side of the splitview:

<div data-role="view" data-title="Categories" id="side-root" data-use-native-scrolling="true">
<ul data-role="listview" data-style="inset" data-source="splitViewCategories" data-template="categoriesTemplate">
</ul>
</div>

<script id="categoriesTemplate" type="text/x-kendo-template">
<a href="\#side-inbox?CategoryID=#: CategoryID#" data-icon="mostviewed"><span class="daysfont">#: CategoryName #</span></a>
</script>

Appreciate any help,

Thanks

SplitView

answered on 26 Jul 2016

3 answers

2.6K+ views

multiline textarea in a grid, databinding

I want to include a multiline textarea in a grid. I've tried to do that like this sample, by adding an 'editor' property to a kendoGrid columns field, and defining an initializer function.

columns: [
field: "cont"
editor: textEditorInitialize
]

var textEditorInitialize = function(container, options) {
$('<textarea style="width: ' + container.width() + 'px;height:' + container.height() + 'px" />')
.appendTo(container);
};

The editor does not quite work as expected. A functional edit box is added to the grid, but in edit mode the field value is not bound, the edit box is empty.
After completing the edit, no change event is triggered, so the update method of the datasource is not invoked.

What could be wrong?

Grid

answered on 26 Jul 2016

5 answers

1.3K+ views

How to allow edit only one row at a time?

Is there an option to allow user to edit only one grid row at a time? Currently user can click Edit on first row, then row 1 appears in edit mode, at the same time he can click on Edit command in row 2 which causes odd UI behavior for me. All the column width settings lost and every columns are cornering to the left side.

Grid

answered on 26 Jul 2016

5 answers

1.1K+ views

Customizing tooltip position and style

Hello,

I have a textbox with a simple required field validator using kendo. I would like to style it using a new CSS class created by us like this:

<span class="label">Name:</span>

<input type="text" name="Name" class="k-textbox" required data-required-msg="Please enter a name." />

<span class="k-invalid-msg k-x-invalid-msg-block" data-for="Name"></span>

The problem is that whenever the validation happens our CSS class named k-x-invalid-msg-block is removed from the tooltip span or replaced by another HTML construct that looks like this:

<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" data-for="Name" role="alert">

<span class="k-icon k-warning"> </span>

Please enter a name.

</span>

As you can see our k-x-invalid-msg-block is gone. Is this on purpose? What is the preferred way of styling the tooltip then?

All I would like to do is add a "display:block;" since I need to display the tooltip below the input.

Kind regards,

Krisztián

Validation

answered on 26 Jul 2016

2 answers

344 views

Grid multiple values

I have a grid and I am trying to filter on multiple values:
FirstName, LastName or FirstName + " " + LastName

So the user can search for:
"John"
"Smith"
"John Smith"

Currently I have:

grid.dataSource.filter({

logic: "or",

filters: [

{ field: "FirstName", operator: "contains", value: value },

{ field: "LastName", operator: "contains", value: value },

{ field: "MemberID", operator: "equals", value: value },

{ field: "JobTitle", operator: "contains", value: value },

{

logic: "and",

filters: [

{ field: "FirstName", operator: "equals", value: value },

{ field: "LastName", operator: "equals", value: value }

]

}

]

});

The search for "John" or "Smith" works however not on "John Smith"

Any ideas
Thanks

Tom

Grid

answered on 25 Jul 2016

4 answers

996 views

Build url.action within listview template

Hello,

I'm trying to create a listview template with the following syntax:

<script type="text/x-kendo-tmpl" id="template">
<div class="item">
<img src="@Url.Content("~/Content/scans/")#:thumbLocation#" alt="#:description# image" />
<a href="@Url.Action("Index", "Controller", new { id= #: itemId# })">
<h3>#:description#</h3>
<p></p>
</div>
</script>

I keep getting the error:
Preprocessor directives must appear as the first non-whitespace character on a line.

How do I pass the parameter to the url action??

Your help would be much appreciated.

ListView

answered on 25 Jul 2016

2 answers

318 views

Get Range

Hi,

I have some questions about the spreadsheet widget in Kendo:

1. How can I get the currently selected range of cells? The sheet.activeCell method seems just to return the primary selected cell.

2. How can I register an event which triggers if the selection of cells has changed? Currently I use the "render" event, but this triggers more often than I need it to.

3. The "change" event does not trigger, if the undo method is used (which changes some values). How can I trigger the change method including the changed range/values?

Thank you for your help + Best regards

Spreadsheet

answered on 25 Jul 2016

11 answers

215 views

[Solved] Kendo UI Slovak localization

Hi all,
I have translated Kendo UI messages for Slovak language for version 2014.3.1316.
Files in attachment:
kendo.messages.sk-SK.js
kendo.messages.sk-SK.min.js.
-Marian

Globalization

answered on 25 Jul 2016