Questions on Kendo UI for jQuery Forum

1 answer

322 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

285 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

316 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

346 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

465 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,

serverPaging: false,

pageSize: 20,

transport: {

read: "json/data.jsp"

},

}

});

</script>

AutoComplete

answered on 18 May 2016

5 answers

1.1K+ views

[Solved] Kendo grid custom checkbox filtering for comma separated values

In my KendoUI grid I have a column with cell values like

ABC, BCD, CDE
BCD, QWE, ZXC
ABC, ZXC, POI
etc

I want this column to have filtering with multiple checkboxes so I put

filterable: { multi: true }

in that column config. But I want only unique values for each checkbox. So it should be

ABC
BCD
CDE
QWE
ZXC
POI

I guess I need to implement custom filtering for that. It's like I need to parse the cell content for comma separated values and put each of that value on a separate filter checkbox. Any advise how to do that?

Grid

answered on 18 May 2016

4 answers

414 views

[Solved] Grid JSON file edit

Hello ,

I'm preaty new to the programing and Kendo UI. But i have a task to make a grid and in it i should be able to edit/delete/update/create data in Json file.

After watching demo a question popped up in my head.

How does this part of code work :

var dataSource = new kendo.data.DataSource({

transport: {

read: "/Products", update: {

url: "/Products/Update",

type: "POST"

},

destroy: {

url: "/Products/Destroy",

type: "POST"

},

create: {

url: "/Products/Create",

type: "POST"

}

Specialy those parts with [ url: "/Products/Create" ] .

What should i do to get it ? I use XAMPP test server and use my URL which is "localhost:8080/TestJson.json".

Replacing it with my URL doesnt do much.

var Pfad = "http://localhost:8080",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: Pfad + "/TestJson.json",
dataType: "json"
},
update: {
url: Pfad + "/TestJson.json",
dataType: "json",
type: "POST"
},
destroy: {
url: Pfad + "/TestJson.json",
dataType: "json",
type: "POST"
},
create: {
url: Pfad + "/TestJson.json",
dataType: "json",
type: "POST"
},