Questions on Kendo UI for jQuery Forum

1 answer

280 views

I have enabled hints on a Kendo Grid and they are all showing fine except the hint on one column. The column in the schema is "Message". As you can see from the attachment when you hover over that column you see a small oval shaped balloon instead of a hint.

I have removed the attributes for that column declaration in the grid to stop if from showing a hint at all but the strange balloon shows anyway.

Each row has a details row that can be seen when the user clicks the right facing arrow in the first column. In the div that shows the message column is shown. So maybe that has something to do with it.

Any suggestions would be welcome.

Thanks

Grid

answered on 19 May 2016

5 answers

2.0K+ views

How to add content to tabstrip at runtime

Hi,
How to add content (Grid Data) to the Tabstrip dynamically at runtime.
My code looks like,

<div id="tabstrip">
<ul>
<li class="k-state-active">Dimensions </li>
</ul>
<div><div id="Grid"></div>
</div>
..

// I am creating the grid dynamically using a function call.I am successful with creating grid data.I need to insert this into Tabstrip.
function createGrid (ElementId){
$("#"+ElementId).kendoGrid(scrollable : true,height : 300,toolbar:...columns : [{..},{..}]);....
}

//I need to call a function to run tabstrip at runtime ..I end up with tabs but with not containing Data(Grid Data) within it.
function createTabstrip(){
$("#tabstrip").kendoTabStrip({ animation: { open: { effects: "" } }});
}

My goal is to insert the Grid Data into the tabstrip at runtime..pls help me with any suggestions and sample codes.

I am using kendu web and Framework only..

Thanks in Advance,
Winds

TabStrip

answered on 19 May 2016

1 answer

148 views

kendo grid height adjustment to 5 rows

Hi,

I need to draw editable grid of 5 rows, each row can contain multi line cells with variable height.
My page is like that (see the attachement)
<editable grid> [covers exactly 5 rows, each row with variable height]
<other contents>
https://yadi.sk/i/SCNGZOFxrnFSf
my scroll viewport should be 5 rows height

I need <other contents> to start exactly after 5th row, which should be fully shown
I need to calculate table height after render

Is there grid 'after render' event? What are workarounds for my case?

Grid

answered on 19 May 2016

1 answer

327 views

Set current date of the scheduler from an external variable dynamiclly

Hello,

I have an external datepicker and on my page and I would like to use the date selected on the datepicker in the kendo scheduler.

I get the date on a $scope and the when I set the schedulerOptions I assign to it but when I change the date nothing happens to the scheduler. I would like to know how to refresh or assign the date parameter.

Thank you

Scheduler

answered on 19 May 2016

1 answer

288 views

Checkbox on title of tabstrip

I tried to put a checkbox in the header of tabstrip and found the checkbox cannot be clicked. Is there any workaround? Thanks.

<div class="demo-section k-content">
                        <div id="tabstrip">
                            <ul>
                                <li class="k-state-active">
                                    Paris <input type="checkbox"   />
                                </li>
                                <li>
                                    New York
                                </li>

TabStrip

answered on 19 May 2016

1 answer

324 views

Best practice for refresh grid silently

What is the best practice for refresh grid data from remote server with paging silently?.

I need to poll for data from server every x milliseconds without the user notice, i.e no loading indication - just replacing column values.

I am using kendo ui angular version.

Grid

answered on 18 May 2016

2 answers

352 views

How to detect active sheet has changed

Hello all,

I'm looking for a way to detect that the user has selected a different sheet (tab) within the spreadsheet control. There doesn't seem to be an event for this action. Is there some other way to detect that the active sheet has been changed?

As background - I'm working on an app for a client in which I've added the spreadsheet control, with several sheets. There's no facility for a custom cell editor (such as a dropdown), but the client is adamant that they want one - they do not want their users typing directly in the cell, but rather, making a selection. I thought a workaround might be to place a dropdown elsewhere on the page, then when the user makes a selection in it, apply the selected text to the currently selected cell on the active sheet. However, I want to hide the dropdown unless the user is on the sheet to which the dropdown actually applies. (I'm also open to any suggestions for a different workaround that doesn't require the user to type out the text themselves.)

Spreadsheet

answered on 18 May 2016

2 answers

470 views

Grid editing with popup: cancel button disables editing for local datasource

Hi,

I'm relatively new to kendo, so the problem I'm encountering may be obvious to some. That said, I have searched google and these forums extensively and have not been able to figure out my issue.

I'm using local data to populate a grid, and I find that canceling out of or closing the editor popup is breaking something. Specifically, after canceling out of editing, I can no longer open the editor for that item. I will include a short single page application below which demonstrates the issue I'm experiencing. To reproduce the bug, click the edit button on the 'pay bills' item, then click the cancel button on the popup editor. Then click the edit button on the same item again. Expected behavior: the editor pops up. Actual behavior: nothing happens.

Of interest is that newly created items do not experience this issue. If you use the add button to create a 'pet the dog' item, you can edit, cancel, and edit again fine. Also, the other bound item, 'buy milk', will continue to work as long as you do not cancel out.

I will be monitoring this thread to answer any and all questions and to provide any clarification requested. I appreciate in advance any help and support the community can provide. Thanks!

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KendoGridDemo.aspx.cs" Inherits="WebApplication1.KendoGridDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Kendo Grid Demo</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" />

</head>

<body>

<form id="form1" runat="server">

<div id="todo-grid"></div>

<script id="todo-template" type="text/x-kendo-template">

<div>

<label for="ItemText">Todo</label>

<input type="text" name="ItemText" required validationMessage="What do you have to do?" style="width: 350px;" />

</div>

</script>

<script type="text/javascript">

// Explanation: we are trying to set up a "Save/Cancel" model where all data

// operations are performed in memory on the client. The user would then

// click a save button which packages all the data and sends it to the

// server for an atomic commit to the database. For that reason, we are

// loading data into a local dataset and performing grid operations on

// the local data, rather than using a remote transport to do real-time crud ops.

// in our application, the source data comes from the server via a jquery ajax

// call. for the purposes of this example we will use the array below.

var _sourceData = [{ TodoID: 1, ItemText: "buy milk" }, { TodoID: 2, ItemText: "pay bills" }];

// the remote data is shifted into this page variable

var TodoData;

// new items are given an id which is later adjusted by the server

var TodoIDSeed;

// this method is called after the ajax call retrieves data from the server.

// we will simulate this using the _sourceData array.

function LoadTodos(todos) {

// Dispose of any old data and set up an observable array

TodoData = new kendo.data.ObservableArray([]);

// shift the data out of the incoming source and into the local page variable

while (todo = todos.shift())

TodoData.push(todo);

// initialize the temporary ID seed for new todo items

TodoIDSeed = -1;

// create the datasource

var todoDataSource = new kendo.data.DataSource({

pageSize: 3,

schema: {

model: {

id: 'TodoID',

fields: {

TodoID: { type: 'number', editable: false, defaultValue: 0 },

ItemText: { type: 'string' }

}

},

transport: {

read: function (options) {

options.success(TodoData);

},

create: function (options) {

var item = options.data;

item.TodoID = TodoIDSeed--;

options.success(item);

},

update: function (options) {

options.success();

},

destroy: function (options) {

options.success();

}

});

// set the datasource and read the data

$('#todo-grid').data('kendoGrid').setDataSource(todoDataSource);

todoDataSource.read();

}

$(document).ready(function () {

// create the grid

$('#todo-grid').kendoGrid({

autoBind: false,

pageable: true,

height: 250,

toolbar: [{ name: 'create', text: 'Add' }],

columns: [{

field: "ItemText",

title: "Todo"

}, {

command: [{ name: 'edit', text: 'Edit' }, { name: 'destroy', text: 'Delete' }],

title: "Updates",

width: 170

}],

editable: {

mode: 'popup',

template: kendo.template($('#todo-template').html()),

window: { title: 'Add/Edit Todo Item', animation: false, width: 440, height: 200 },

confirmation: true,

confirmDelete: 'Yes'

}

});

// load the data

LoadTodos(_sourceData);

});

</script>

</form>

</body>

</html>

Grid

answered on 18 May 2016

8 answers

1.3K+ views

Cannot find Kendo.Mvc.dll in 30days Trial

Hi,

Recently i have downloaded Kendo UI 30 days trial sample and follow this guide(http://docs.telerik.com/kendo-ui/aspnet-mvc/asp-net-mvc-5) to install it in my MVC project.

But in this document it says "Add reference to Kendo.Mvc.dll" . But in my trial download there's no any .dll related thing.

Is that Js & Css files enough to do a test in kendo ?

Thanks

General Discussions

answered on 18 May 2016

9 answers

1.9K+ views

Autocomplete width

Hi all,

I have an input field what uses autocomplete, but the text I am displaying wraps in lines, so I want to make the dropdown list quite wider. tryied some solutions over the net but didn't find something, can someone help?

<form id="searchflightfrm">

search: <input type="text" id="fromair" name="fromair" />

</form>

<script type="text/javascript">

$(document).ready(function() {

$("#fromair").kendoAutoComplete({

minLength: 3,

dataTextField: "name",

filter: 'contains',

dataSource: {

type: "json",

serverFiltering: true,