Questions on Kendo UI for jQuery Forum

3 answers

96 views

[Solved] angular2 grid component roadmap

hi,

We are considering the use of the new angular2 grid component.

It looks very promising, but is missing some features. Some of the missing features such as filtering capabilities are listed in the road-map, but we couldn't find reference some other existing (angular1/jquery) capabilities.Unfortunately, there is no feedback on the "Kendo UI for Angular 2 Feedback" so we are posting this issue here.

We would appreciate feedback regarding the plan to support column management features (reordering, resizing, column-selector).

Thanks!

Grid

answered on 03 Jan 2017

1 answer

661 views

kendo grid multiple cell selection

Hi,

I am working in the kendo grid copy and paste functionality from the excel sheet.

Please find the attached file and help me out to select multiple cell by clicking on the control button.

Thanks in Advance

Regards,

Bala

Not able to attach the code. Please refer the below code which I am currently using

<html>

<head>
<title>

</title>

<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
</head>

<body>
<div style="width:auto; height:auto">
<div id="grid_json_copy" style="float:left;"></div>

<div style="float:left;width:4%;"> </div>

<div id="grid_json_paste" style="float:left;"></div>

<div style="clear:both;"></div>

</div>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
selectable: "multiple, cell",
allowCopy: true,
columns: [{
field: "productName"
},
{
field: "category"
},
{
field: "amount"
}
],
editable: true,
dataSource: [{
productName: "Tea",
category: "Beverages",
amount: "10.00"
},
{
productName: "Coffee",
category: "Beverages",
amount: "10.00"
},
{
productName: "Ham",
category: "Food",
amount: "10.00"
},
{
productName: "Bread",
category: "Food",
amount: "10.00"
}
]
}).on('focusin', function(e) {
// get the grid position
var offset = $(this).offset()
// crete a textarea element which will act as a clipboard
var textarea = $("<textarea>");
// position the textarea on top of the grid and make it transparent

textarea.css({
position: 'absolute',
opacity: 0,
top: offset.top,
left: offset.left,
border: 'none',
width: $(this).width(),
height: $(this).height()
})
.appendTo('body') .on('paste', function() {
// handle the paste event
setTimeout(function() {
// the the pasted content
var value = $.trim(textarea.val());
// get instance to the grid
var grid = $("#grid").data("kendoGrid");
// get the pasted rows - split the text by new line
var rows = value.split('\n');

var item = grid.select();
var currentRowIndex;

item.each(function() {
currentRowIndex = $(this).closest("tr").index();
})

var selectedColumnIndex = [];
var rowIndex;
for (var i = 0; i < item.length; i++) {
selectedColumnIndex[i] = item[i].cellIndex;

}

var items = grid.dataSource.data();
var count = 0;

for (var i = currentRowIndex; i <= items.length; i++) {

var item = items[i];

if (count > rows.length) {
break;
}

var cells = rows[count].split('\t');

var productName = item.productName;
var category = item.category;
var amount = item.amount;
var copiedColumnCount = 0;

for (var j = 0; j < 3; j++) {

if (selectedColumnIndex.indexOf(j) > -1) {

if (cells[copiedColumnCount] != 'undefined') {
if (j === 0) {
productName = cells[copiedColumnCount];
}
if (j === 1) {
category = cells[copiedColumnCount];
}
if (j === 2) {
amount = cells[copiedColumnCount];
}
copiedColumnCount++;

}
}

}

grid.dataSource.remove(item);

var datasource = grid.dataSource;
var newRecord = {
productName: productName,
category: category,
amount: amount
};

//Inserting new row
datasource.insert(i, newRecord);

count++;
}
},0);
}).on('focusout', function() {
// remove the textarea when it loses focus
$(this).remove();
});
// focus the textarea
setTimeout(function() {
textarea.focus();
},0);

});
</script>
</body>

</html>

Grid

answered on 03 Jan 2017

6 answers

533 views

dataSource.schema.model.fields "from" not linking values

my simplified scheduler initialization looks like this:

Example data block looks like:

{
taskID: 1,
title: "title",
ST: new Date("2013/6/13 17:00"),
EN: new Date("2013/6/13 18:30"),

isAllDay: false
}

I am adding new elements to my Scheduler via "dataSource.add" and the problem is that when a new element is added to the dataSource it creates the "start" and "end" dates taking the current computer time instead of reading the "ST" and "EN" fields. /like defined in the schema.model.fields "from" parameter/.

This actually happens with any other field. "From" is being completely ignored.

Thanx for the help

Scheduler

answered on 03 Jan 2017

6 answers

916 views

DropdownList Scrolling issue kendo grid

Hi,

We are facing scroll issue with dropdownlist. scrolling out side the dropdown closes the dropdown. It seems scroll very sensitive. I have attached video and with this query.

DropDownList

answered on 03 Jan 2017

1 answer

114 views

Kendo UI Professional Kendo combo box drop down position is misaligned in IE 10/11

Please see the attached screen shot.

ComboBox

answered on 02 Jan 2017

3 answers

2.1K+ views

[Solved] how to set initial value for date-time-picker when using Angular

Hi,

I am trying to set an initial value of the kendo date time picker using the k-value attribute but it does not work for me:

I am able to reproduce this problem using the kendo angular demo for the date time picker. How can I set an initial value for the date time picker?

Thanks

DatePicker

answered on 02 Jan 2017

1 answer

287 views

How to append id with text?

Hello

I wonder how I can append a treeview item WITH an id? I tried it in two ways:

var treeview = $("#treeview2").data("kendoTreeView");

treeview.append({

text: 'mytext',

id: 'should work', // option1

attr: { // option 2

id: 'works on menu'

}

}, $('#treenode1'));

Text will always be shown, but ID will never be attached, neither defined directly as ID (option1), nor over ATTR as show above by option 2 (but that works in KendoUI menu).

Do I miss something or is it not possible that way?

Regards

TreeView

answered on 02 Jan 2017

1 answer

201 views

[Solved] Export pdf from multiple groups

I have several html elements that are to exported to pdf. I want to export a consolidated pdf from groups generated from all those html elements.

How should I go about this?

Drawing API

answered on 02 Jan 2017

12 answers

350 views

Drag & Drop of rows

Hi,

Is it possible to achieve drag & drop functionality of rows, similar to the TreeList in the ASP.NET AJAX control? If not, is there any way to move the order of the rows up or down (through API, etc)?

Thanks!

TreeList

answered on 02 Jan 2017

1 answer

234 views

Convert Button List to Toolbar

I am trying to convert the main nav bar at the top of my site to a kendo Toolbar. I have some of the custom functionality for MVC authentication, such as the logout form that I would like to keep in there. How can I convert this from a list of buttons to a toolbar? See below for the current HTML.

<ul>

@if (Request.IsAuthenticated)
{
<li class="k-primary k-button">@Html.ActionLink("Label1", "Action1", "Controller")</li>
<li class="k-primary k-button">@Html.ActionLink("Label2", "Action2", "Controller")</li>
<li class="k-primary k-button">@Html.ActionLink("Label3", "Action3", "Controller")</li>
<li class="k-primary k-button">@Html.ActionLink("Label4", "Action4", "Controller")</li>

using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
{
@Html.AntiForgeryToken()

<li class="k-primary k-button">
@Html.ActionLink(User.Identity.GetUserName(), "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
</li>
<li class="k-primary k-button"><a href="javascript:document.getElementById('logoutForm').submit()">Logout</a></li>
}
}
else
{
<li class="k-primary k-button">@Html.ActionLink("Label1", "Action1", "Controller")</li>
<li class="k-primary k-button">@Html.ActionLink("Label2", "Action2", "Controller")</li>
<li class="k-primary k-button">@Html.ActionLink("Label3", "Action3", "Controller")</li>
<li class="k-primary k-button">@Html.ActionLink("Label4", "Action4", "Controller")</li>
<li class="k-primary k-button">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
<li class="k-primary k-button">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
}

</ul>

Toolbar

answered on 02 Jan 2017