Questions on Kendo UI for jQuery Forum

12 answers

1.6K+ views

[Solved] Skip read only fields when using keyboard navigation on navigatable grid in batch edit mode

I have a large grid that is in batch edit mode with only one or possibly two editable columns. It is very important that the user can use keyboard navigation to move through the editable columns without using their mouse.
I have a grid with navigatable turned on, but my problem is that it moves through all of the columns, not just the editable columns. Is there a way to skip the columns that are not editable?

I am using MVC, but I have put together a quick sample on jsFiddle here: http://jsfiddle.net/jSeMZ/1/

Thanks!
~Logan

Grid

answered on 18 Apr 2016

1 answer

444 views

How to refresh non-editable fields after inline edit.

I have a Gird which has a number of editable fields as well as some standardized auditing fields (LastUpdatedBy, LastUpdatedOn).

The later are intended to be read only. So they are marked as Editable(false)

model.Field(a => a.LastModifiedBy).Editable(false);
model.Field(a => a.LastModifiedOn).Editable(false);

For the inline edit I am doing an Ajax call to controller action which processes the edit, updates the modified fields and passes the updated record back to the grid. The grid displays the editable changes however I assume because they are non-editable the modified fields are not updated. Doing a refresh of the page displays correct information but that is not desirable.

How can the behavior of Grid be override so that it will update the display of all model fields even the ones marked non-editable after an update?

Grid

answered on 18 Apr 2016

6 answers

413 views

[Solved] Get column name from container or create generic function for any column passing it as parameter

Please read from here: http://stackoverflow.com/questions/36495655/get-column-name-from-container-or-create-generic-function-for-any-column

(There is also a support ticket open, so no admin has to sweat over here if they don't want to).

Because I'm using a lot of kendo grids spread in the whole web app, I start to introduce some redundant code that causes me a lot of troubles. Imagine to have something like:
//MVC:...

columns.Bound(c => c.Column1).Filterable(f => f.Extra(false).Operators(o => o.ForString(str => str.Clear().Contains("Contains"))).Cell(c => .ShowOperators(false).Template("column1Filter"))).Title("Column One");

...

//JS:

function column1Filter(container) {

container.element.kendoAutoComplete({

filter: "contains",

dataTextField: "Column1",

dataValueField: "Column1",

valuePrimitive: true,

dataSource: container.dataSource

});

}

Then, having this method reproduced for each single columns in each single grids. Is there any way where I can I have only one method that creates the kendo autocomplete?

E.G:

function genericAutocompleteFilter(container) {

var columnsName = //...Meh!

container.element.kendoAutoComplete({ filter: "contains", dataTextField: columnsName, dataValueField: columnsName, valuePrimitive: true, dataSource: container.dataSource });

}

Grid

answered on 18 Apr 2016

1 answer

489 views

Howto check if Tab is loaded

Hello,

i have a tabstrip with 5 tabs all with LoadContentFrom

How can i check if a tab is loaded or not with jquery?

My problem is, that i have a dropdownlist outside the tabstrip and if i change the entry of the list i want to reload only the tabstrips with content inside.

Thanks!

TabStrip

answered on 18 Apr 2016

1 answer

309 views

DataSource.remove() performance issues

Hi,

I'm working with Angular and Kendo UI. I want to update an extising grid through an ajax call. I had to iterate over all items in datasource and compare them with the result of ajax call. If i got the item from the response, i had to update, if not i had to delete the item from the grid. Update works fine, if I doesnt use the getter and setter from the model. Now i only got problems with removing the items.

At first I changed the change event for the grid like preventDefaults, if im updating. Now my execution time was shrinking from ~100s to 13s. I tried the same for the datasource but it doesnt work.

Over all I got ~ 1200 items in my grid. I had to delete ~ 600. The average time per removing is 20ms, so the whole update takes 13sec and the most impact is located at the remove.

Is there any way to speed up the remove without recreate the datasource. If I recreate the datasource, i loose the focus and cant easyily reselect the items.

Thanks for your help.

Data Source

answered on 18 Apr 2016

1 answer

84 views

IE11 only: Disabled drop down get opened in a specific case

refer URL mentioned below

http://dojo.telerik.com/AMemE

I have added a focusout event for the textbox in which i disable the cap color drop down.

When we focusout from texttbox by clicking on Cap color drop down list, the list is shown in IE11 (not in chrome).

Please suggest a way to avoid this problem.

DropDownList

answered on 18 Apr 2016

3 answers

585 views

Bug? NumericTextBox displays inconsistently in bootstrap forms

Code to reproduce below and attached.

Screen shots attached.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="">

<meta name="author" content="">

<link rel="icon" href="//getbootstrap.com/favicon.ico">

<title>Sticky Footer Navbar Template for Bootstrap</title>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

<link href="//getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css" rel="stylesheet">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">

<script src="//getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>

<script src="//getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

<style>

body {

overflow-x:hidden;

}

#toolbar {

position: absolute;

top: 50px;

width: 100%;

}

#wrapper {

position: absolute;

top: 100px;

position: absolute;

left: 0;

right: 0;

bottom: 60px;

overflow-y: scroll;

}

.area {

min-height: 400px;

}

.placeholder {

opacity: 0.4;

border-style: dashed;

}

.hint {

border-color: #333;

}

</style>

</head>

<body>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">Project name</a>

</div>

<div class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li class="divider"></li>

<li class="dropdown-header">Nav header</li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

</div>

<div id="toolbar"></div>

<div id="wrapper">

<div class="container">

<div class="page-header">

<h1>Numeric Textbox</h1>

</div>

<form role="form">

<div class="row">

<div class="col-sm-4">

<div class="form-group">

<label for="first-name" class="control-label">First Name</label>

<input id="first-name" type="text" class="form-control">

</div>

<div class="form-group">

<label for="last-name" class="control-label">Last Name</label>

<input id="last-name" type="text" class="form-control">

</div>

<div class="col-sm-3 col-sm-offset-1">

<div class="form-group">

<label for="occupation" class="control-label">Occupation</label>

<input id="occupation" type="text" class="form-control">

</div>

<div class="form-group">

<label for="age" class="control-label">Age</label>

<input id="age" type="number" class="form-control" data-role="numerictextbox">

</div>

<div class="col-sm-1 col-sm-offset-1">

<div class="form-group">

<label class="control-label">Gender</label>

<div class="radio">

<label>

<input type="radio" name="gender" id="male" value="1" checked>

Male

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="gender" id="female" value="2">

Female

</label>

</div>

<div class="radio">

<label>

<input type="radio" name="gender" id="other" value="3">

Other

</label>

</div>

<div class="col-sm-1 col-sm-offset-1">

<div class="form-group">

<button type="button" class="btn btn-default">Go!</button>

</div>

<div class="row"></div>

</form>

</div>

<div class="footer">

<div class="container">

<p class="text-muted">Place sticky footer content here.</p>

</div>

<!-- Bootstrap core JavaScript

================================================== -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<script src="//cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>

<script>

$(document).ready(function() {

kendo.init('body');

});

</script>

</body>

</html>

NumericTextBox

answered on 15 Apr 2016

1 answer

241 views

Drawer-Icon is missing

I am using the 2016 Q1 SP3 release of the Kendo mobile controls with the Nova theme, and the drawer icon is not showing up. Here is a snippet of my markup:

<a href="#drawer" data-rel="drawer" data-align="left" data-icon="drawer-icon" data-role="button"></a>

This can be reproduced using the sample code from the Kendo Mobile drawer demo - http://dojo.telerik.com/onUDi

Interestingly, if I go back to the 2015 Q3 SP1 release of the Kendo controls, it works. So it appears that something was changed with the Q1 2016 release.

http://dojo.telerik.com/Axiti

I found this in the Kendo css files - the icon is defined there but it doesn't render anything in the browser.

.km-drawer-icon:after,

.km-drawer-icon:before,

.km-hamburger:before,

.km-hamburger:after

{

content: "\e105";

}

Drawer (Mobile)