Questions on Kendo UI for jQuery Forum

1 answer

151 views

Hi, I am trying to wrap my head around how "pdfExport event of the grid" works.

I can't seem to find any documentation about it, explaining it?

If I view this demo url: http://demos.telerik.com/kendo-ui/grid/pdf-export it tells me:

:Furthermore, you have the ability to customize the look and feel of the exported grid table by wiring the pdfExport event of the grid. More information on the Pdf export feature of the widget is available in the following help topic."

When I click on the following help topic I do not see anything about "pdfExport event of the grid"?

How does "pdfExport of the grid" work?

Grid

answered on 29 May 2017

5 answers

354 views

Bind resource from database or web api

Can you bind the Resource from Database source or Web API in Scheduler UI in asp.net core? Because I see your examples are you are using hard code value for Room and Attendees?

Scheduler

answered on 29 May 2017

3 answers

187 views

Use TreeView as Custom Editor

Hi,
We try to use TreeView as custom editor for Grid but could not get expected result.
We refer the example that you provide under this url ( http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-treeview-as-grid-editor ) but failed to get the result that we expect.

Kindly need your help to assist on this issue.

Thank you,

Grid

answered on 29 May 2017

3 answers

1.7K+ views

How to set required validation on row in Kendo Grid?

In my application, I have a Kendo grid, which is used to obtain the user's data (certification details). The user are provided with a Kendo grid, which have a "Add" button. Clicking on "Add" button, the user will be prompted with pop up to obtain their details.
On clicking "Submit" button, required validation are not firing with grid having no records. User are able to submit the application without entering the required data with grid. How can I force the kendo validation on button click on grid.

<style>body {

margin: 0;

}

html {

font-family: sans-serif;

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

}

table {

border-spacing: 0;

border-collapse: collapse;

}

td,

th {

padding: 0;

}

a {

background-color: transparent;

}

*,

::after,

::before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.row {

margin-right: -15px;

margin-left: -15px;

}

.form-group {

margin-bottom: 25px;

}

.form-group {

width: auto !important;

}

.container {

max-width: 1300px !important;

}

label {

font-weight: normal;

}

.col-lg-1,

.col-lg-10,

.col-lg-11,

.col-lg-12,

.col-lg-2,

.col-lg-3,

.col-lg-4,

.col-lg-5,

.col-lg-6,

.col-lg-7,

.col-lg-8,

.col-lg-9,

.col-md-1,

.col-md-10,

.col-md-11,

.col-md-12,

.col-md-2,

.col-md-3,

.col-md-4,

.col-md-5,

.col-md-6,

.col-md-7,

.col-md-8,

.col-md-9,

.col-sm-1,

.col-sm-10,

.col-sm-11,

.col-sm-12,

.col-sm-2,

.col-sm-3,

.col-sm-4,

.col-sm-5,

.col-sm-6,

.col-sm-7,

.col-sm-8,

.col-sm-9,

.col-xs-1,

.col-xs-10,

.col-xs-11,

.col-xs-12,

.col-xs-2,

.col-xs-3,

.col-xs-4,

.col-xs-5,

.col-xs-6,

.col-xs-7,

.col-xs-8,

.col-xs-9 {

position: relative;

min-height: 1px;

padding-right: 15px;

padding-left: 15px;

margin-bottom: 20px;

}

.col-xs-1,

.col-xs-10,

.col-xs-11,

.col-xs-12,

.col-xs-2,

.col-xs-3,

.col-xs-4,

.col-xs-5,

.col-xs-6,

.col-xs-7,

.col-xs-8,

.col-xs-9 {

float: left;

}

.col-xs-12 {

width: 100%;

}

.form-body {

padding-bottom: 15px;

}

/* @media all and (min-width:768px) */

.col-sm-4 {

width: 33.33%;

}

/* @media all and (min-width:768px) */

.col-sm-8 {

width: 66.66%;

}

.col-lg-1,

.col-lg-10,

.col-lg-11,

.col-lg-12,

.col-lg-2,

.col-lg-3,

.col-lg-4,

.col-lg-5,

.col-lg-6,

.col-lg-7,

.col-lg-8,

.col-lg-9,

.col-md-1,

.col-md-10,

.col-md-11,

.col-md-12,

.col-md-2,

.col-md-3,

.col-md-4,

.col-md-5,

.col-md-6,

.col-md-7,

.col-md-8,

.col-md-9,

.col-sm-1,

.col-sm-10,

.col-sm-11,

.col-sm-12,

.col-sm-2,

.col-sm-3,

.col-sm-4,

.col-sm-5,

.col-sm-6,

.col-sm-7,

.col-sm-8,

.col-sm-9,

.col-xs-1,

.col-xs-10,

.col-xs-11,

.col-xs-12,

.col-xs-2,

.col-xs-3,

.col-xs-4,

.col-xs-5,

.col-xs-6,

.col-xs-7,

.col-xs-8,

.col-xs-9 {

margin-bottom: 0px !important;

}

/* @media all and (min-width:992px) */

.col-md-1,

.col-md-10,

.col-md-11,

.col-md-12,

.col-md-2,

.col-md-3,

.col-md-4,

.col-md-5,

.col-md-6,

.col-md-7,

.col-md-8,

.col-md-9 {

float: left;

}

/* @media all and (min-width:992px) */

.col-md-10 {

width: 83.33%;

}

.no-padding {

padding: 0;

}

.container,

.container-fluid {

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

/* @media all and (min-width:768px) */

.container {

width: 750px;

}

/* @media all and (min-width:992px) */

.container {

width: 970px;

}

/* @media all and (min-width:1200px) */

.container {

width: 1170px;

}

.padding-top10 {

padding-top: 10px;

}

body {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 13px;

line-height: 1.4285;

color: #333;

background-color: #fff;

}

body {

padding-top: 10px;

padding-bottom: 10px;

font-family: sans-serif !important;

font-size: 13px;

color: #666666;

}

html {

font-size: 10px;

-webkit-tap-highlight-color: transparent;

}

label {

max-width: 100%;

margin-bottom: 5px;

font-weight: regular;

}

/* @media all and (min-width:768px) */

.col-sm-1,

.col-sm-10,

.col-sm-11,

.col-sm-12,

.col-sm-2,

.col-sm-3,

.col-sm-4,

.col-sm-5,

.col-sm-6,

.col-sm-7,

.col-sm-8,

.col-sm-9 {

float: left;

}

label.required::after {

content: "*" !important;

padding-left: 3px;

color: red !important;

left: 10px;

position: relative;

margin-left: -10px;

}

/* @media all and (min-width:768px) */

.form-horizontal .control-label {

padding-top: 7px;

margin-bottom: 0px;

text-align: left;

margin-bottom: 5px;

}

.k-widget,

.k-block,

.k-inline-block,

.k-draghandle {

border-style: solid;

border-width: 1px;

-webkit-appearance: none;

}

.k-block,

.k-widget {

line-height: normal;

outline: 0;

}

th,

td {

text-align: left;

}

a {

color: #337ab7;

text-decoration: none;

}

.k-block,

.k-button,

.k-header,

.k-grid-header,

.k-toolbar,

.k-grouping-header,

.k-tooltip,

.k-pager-wrap,

.k-tabstrip-items .k-item,

.k-state-hover.k-link,

.k-textbox,

.k-textbox:hover,

.k-autocomplete,

.k-dropdown-wrap,

.k-picker-wrap,

.k-numeric-wrap,

.k-state-hover.k-autocomplete,

.k-state-hover.k-dropdown-wrap,

.k-state-hover.k-picker-wrap,

.k-state-hover.k-numeric-wrap,

.k-draghandle {

background-repeat: repeat;

background-position: 0 center;

}

.k-floatwrap::after,

.k-slider-items::after,

.k-grid-toolbar::after {

content: "";

display: block;

clear: both;

visibility: hidden;

height: 0px;

overflow: hidden;

}

.k-grid-header {

background-color: #e4e4e4;

border: 1px solid #e4e4e4;

}

.k-grid-content {

border-bottom: 1px solid #e4e4e4;

}

table {

background-color: transparent;

}

.k-grid-header-wrap {

border: none;

border: 1px solid #e4e4e4;

}

.k-header,

.k-grid-header,

.k-toolbar,

.k-dropdown-wrap,

.k-picker-wrap,

.k-numeric-wrap,

.k-grouping-header,

.k-pager-wrap,

.k-textbox,

.k-button,

.k-progressbar,

.k-draghandle,

.k-autocomplete,

.k-state-highlight,

.k-tabstrip-items .k-item,

.k-panelbar .k-tabstrip-items .k-item,

.km-pane-wrapper>.km-pane>.km-view>.km-content {

background-image: none;

background-position: 50% 50%;

background-color: #eeeeee;

}

.k-block,

.k-header,

.k-grid-header,

.k-toolbar,

.k-grouping-header,

.k-pager-wrap,

.k-button,

.k-draghandle,

.k-treemap-tile,

html .km-pane-wrapper .k-header {

background-color: #eeeeee;

}

.k-header,

.k-grid-header-wrap,

.k-grid .k-grouping-header,

.k-grid-header,

.k-pager-wrap,

.k-pager-wrap .k-textbox,

.k-pager-wrap .k-link,

.k-grouping-header .k-group-indicator,

.k-gantt-toolbar .k-state-default {

border-color: #c5c5c5;

}

.k-link {

cursor: pointer;

outline: 0;

text-decoration: none;

}

.k-button,

.k-textbox,

.k-autocomplete,

div.k-window-content,

.k-tabstrip>.k-content>.km-scroll-container,

.k-block,

.k-edit-cell .k-widget,

.k-grid-edit-row .k-widget,

.k-grid-edit-row .text-box,

.km-actionsheet>li,

.km-shim {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.k-icon,

.k-tool-icon,

.k-grouping-dropclue,

.k-drop-hint,

.k-column-menu .k-sprite,

.k-grid-mobile .k-resize-handle-inner::before,

.k-grid-mobile .k-resize-handle-inner::after,

.k-pager-numbers .k-current-page .k-link::after,

.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link::after {

background-image: url('Bootstrap/sprite.png');

border-color: transparent;

}

.k-animation-container,

.k-widget,

.k-widget *,

.k-animation-container *,

.k-widget *::before,

.k-animation-container *::after,

.k-block .k-header,

.k-list-container {

-webkit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

}

.k-widget,

.k-widget * {

-moz-background-clip: border-box;

-webkit-background-clip: border-box;

background-clip: border-box;

}

.k-button-icontext {

overflow: visible;

}

a.k-button {

-khtml-user-select: none;

-webkit-user-select: none;

-moz-user-select: -moz-none;

-ms-user-select: none;

user-select: none;

text-decoration: none;

}

.k-i-plus,

.k-add {

background-position: -32px -64px;

}

.k-grid,

.k-listview {

position: relative;

zoom: 1;

}

.k-block,

.k-widget,

.k-grid,

.k-slider,

.k-splitter,

.k-treeview,

.k-panelbar,

.k-content,

.k-header-column-menu {

outline: 0;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

.k-block,

.k-widget {

background-color: #ffffff;

}

.k-grouping-header,

.k-grid-toolbar {

margin: 0;

padding: .22em .2em .28em;

cursor: default;

}

.k-grid-header-wrap,

.k-grid-footer-wrap {

position: relative;

width: 100%;

overflow: hidden;

border-style: solid;

border-width: 0 1px 0 0;

zoom: 1;

}

.k-block,

.k-widget,

.k-input,

.k-textbox,

.k-group,

.k-content,

.k-header,

.k-filter-row>th,

.k-editable-area,

.k-separator,

.k-colorpicker .k-i-arrow-s,

.k-textbox>input,

.k-autocomplete,

.k-dropdown-wrap,

.k-toolbar,

.k-group-footer td,

.k-grid-footer,

.k-footer-template td,

.k-state-default,

.k-state-default .k-select,

.k-state-disabled,

.k-grid-header,

.k-grid-header-wrap,

.k-grid-header-locked,

.k-grid-footer-locked,

.k-grid-content-locked,

.k-grid td,

.k-grid td.k-state-selected,

.k-grid-footer-wrap,

.k-pager-wrap,

.k-pager-wrap .k-link,

.k-pager-refresh,

.k-grouping-header,

.k-grouping-header .k-group-indicator,

.k-panelbar>.k-item>.k-link,

.k-panel>.k-item>.k-link,

.k-panelbar .k-panel,

.k-panelbar .k-content,

.k-treemap-tile,

.k-calendar th,

.k-slider-track,

.k-splitbar,

.k-dropzone-active,

.k-tiles,

.k-toolbar,

.k-tooltip,

.k-button-group .k-tool,

.k-upload-files {

border-color: #c5c5c5;

}

.k-block,

.k-widget,

.k-popup,

.k-content,

.k-toolbar,

.k-dropdown .k-input {

color: #333333;

}

.k-button {

color: #333333;

border-color: #c5c5c5;

background-color: #ffffff;

}

.k-widget,

.k-button {

-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);

box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);

}

.k-grid,

.k-scheduler,

.k-menu,

.k-editor {

border-radius: 2px;

}

.k-grid {

border-radius: 0;

border: none;

box-shadow: none;

}

.k-floatwrap,

.k-slider-items,

.k-grid-toolbar {

display: inline-block;

}

.k-floatwrap,

.k-slider-items,

.k-grid-toolbar {

display: block;

}

.k-grid-toolbar {

border-style: solid;

border-width: 1px 0 0;

}

.k-link:link,

.k-link:visited,

.k-state-hover.k-nav-current .k-link {

color: #428bca;

}

.k-header,

.k-treemap-title,

.k-grid-header .k-header>.k-link {

color: #333333;

}

.k-button,

.k-textbox,

.k-timepicker,

.k-datepicker,

.k-datetimepicker {

display: inline-block;

vertical-align: middle;

}

.k-grid-toolbar {

background-color: transparent;

border: none;

}

:first-child.k-grid-toolbar,

.k-grouping-header+.k-grid-toolbar {

border-width: 0 0 1px;

}

.k-grid>.k-grouping-header,

:first-child.k-grid-header,

:first-child.k-grid-toolbar,

.k-scheduler> :first-child.k-scheduler-toolbar {

border-radius: 1px 1px 0 0;

}

div.k-grid-header,

div.k-grid-footer {

padding-right: 17px;

border-bottom-style: solid;

border-bottom-width: 1px;

zoom: 1;

}

.k-grid-content {

position: relative;

width: 100%;

overflow: auto;

overflow-x: auto;

overflow-y: scroll;

zoom: 1;

min-height: 0px;

}

.k-grid-content-locked,

.k-grid-content,

.k-pager-wrap {

white-space: normal;

}

.k-grid table {

width: 100%;

margin: 0;

max-width: none;

border-collapse: separate;

border-spacing: 0;

empty-cells: show;

border-width: 0;

outline: 0;

}

.k-grid-header-wrap>table,

.k-grid-header-locked>table {

margin-bottom: -1px;

}

.k-grid-header table,

.k-grid-content table,

.k-grid-footer table,

.k-grid-content-locked>table {

table-layout: fixed;

}

.k-grid-header th.k-header,

.k-filter-row th {

overflow: hidden;

border-style: solid;

border-width: 0 0 1px 1px;

padding: .5em .6em .4em .6em;

font-weight: normal;

white-space: nowrap;

text-overflow: ellipsis;

text-align: left;

}

.k-grid-header th.k-header {

vertical-align: bottom;

}

.k-grid-header .k-header,

.k-grid-header th.k-header {

border: 1px solid #e4e4e4;

color: #333333;

background-color: #e4e4e4;

}

.k-grid .k-grid-header .k-header {

white-space: normal;

}

.k-grid-header th:first-child.k-header,

.k-grid tbody td:first-child,

.k-grid tfoot td:first-child,

.k-filter-row>th:first-child {

border-left-width: 0px;

}

.k-block,

.k-slider,

.k-splitbar,

.k-calendar,

.k-treeview,

.k-pager-wrap,

.k-grid-header .k-link,

.k-header-column-menu {

-webkit-touch-callout: none;

}

.k-grid-header .k-link:link,

.k-grid-header .k-link:visited,

.k-grid-header .k-state-hover.k-nav-current .k-link,

.k-grouping-header .k-link {

color: #333333;

}

.k-grid-header th.k-header>.k-link {

display: block;

min-height: 18px;

line-height: 18px;

margin: -0.5em -0.6em -0.4em -0.6em;

padding: .5em .6em .4em .6em;

overflow: hidden;

text-overflow: ellipsis;

}

.k-grid .k-grid-header .k-header .k-link {

height: auto;

}

.k-textbox>input,

[type='text'].k-input,

[type='number'].k-input,

.k-textbox,

.k-picker-wrap .k-input,

.k-button {

font-size: 100%;

font-family: inherit;

border-style: solid;

border-width: 1px;

-webkit-appearance: none;

}

.k-button {

display: inline-block;

margin: 0;

padding: 2px 7px 2px;

font-family: inherit;

line-height: 1.72em;

text-align: center;

cursor: pointer;

text-decoration: none;

}

.k-block,

.k-button,

.k-textbox,

.k-drag-clue,

.k-touch-scrollbar,

.k-window,

.k-window-titleless .k-window-content,

.k-window-action,

.k-inline-block,

.k-grid .k-filter-options,

.k-grouping-header .k-group-indicator,

.k-autocomplete,

.k-multiselect,

.k-combobox,

.k-dropdown,

.k-dropdown-wrap,

.k-datepicker,

.k-timepicker,

.k-colorpicker,

.k-datetimepicker,

.k-notification,

.k-numerictextbox,

.k-picker-wrap,

.k-numeric-wrap,

.k-colorpicker,

.k-list-container,

.k-calendar-container,

.k-calendar td,

.k-calendar .k-link,

.k-treeview .k-in,

.k-editor-inline,

.k-tooltip,

.k-tile,

.k-slider-track,

.k-slider-selection,

.k-upload {

border-radius: 2px;

}

.k-button {

-webkit-box-shadow: none;

box-shadow: none;

}

.k-grid-add {

color: #336699;

}

.k-grid-toolbar .k-button {

vertical-align: middle;

}

.k-grid .k-button {

margin: 0 .16em;

}

.k-grid .k-button {

border-color: transparent !important;

background-color: transparent !important;

}

.k-icon,

.k-sprite,

.k-button-group .k-tool-icon {

display: inline-block;

width: 16px;

height: 16px;

overflow: hidden;

background-repeat: no-repeat;

font-size: 0px;

line-height: 0;

text-align: center;

-ms-high-contrast-adjust: none;

}

.k-icon,

.k-sprite {

background-color: transparent;

}

.k-icon,

.k-state-disabled .k-icon,

.k-column-menu .k-sprite,

.k-pager-numbers .k-current-page .k-link::after,

.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link::after {

opacity: 1;

}

.k-button-icontext .k-icon,

.k-button-icontext .k-image {

margin-right: 3px;

margin-right: 0.3rem;

margin-left: -3px;

margin-left: -0.3rem;

}

:root *>.k-icon,

:root *>.k-sprite,

:root *>.k-button-group .k-tool-icon {

vertical-align: middle;

}

.k-button-icontext.k-button .k-icon,

.k-button-icontext.k-button .k-image {

vertical-align: text-top;

}

</style>

<html>

<div class="row question form-group">

<label class="col-sm-4 control-label required" for="ans">

TEST LABEL

</label>

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

<div class="k-grid k-widget k-valid" data-role="grid" data-grid-source="CertificationDetails" data-grid-id="ace1fa8c-d7ee-446a-96b0-d120a3a6415c" data-validate="true" required="required">

<div class="k-header k-grid-toolbar">

<a class="k-button k-button-icontext k-grid-add" href="#">

<span class="k-icon k-add">

</span>Add

</a>

</div>

<div class="k-grid-header" style="padding-right: 17px;">

<div class="k-grid-header-wrap">

<table role="grid">

<colgroup>

<col>

</colgroup>

<thead role="rowgroup">

<tr role="row">

<th class="k-header" id="e2bf1a9c-a57b-4362-970b-9128426f5c37" role="columnheader" rowspan="1" data-role="columnsorter" data-index="0" data-title="Certification Details" data-field="CertificationDetails">

<a class="k-link" href="#">Educational institution</a>

</th>

<th class="k-header" id="e6b0db25-287c-4e7e-b7d7-bc024674465b" rowspan="1" data-index="1">

</th>

</tr>

</thead>

</table>

</div>

<div class="k-grid-content">

<table class="k-selectable" role="grid" style="-ms-touch-action: double-tap-zoom pinch-zoom;" data-role="selectable">

<colgroup>

<col>

</colgroup>

<tbody role="rowgroup"></tbody>

</table>

</div>

</html>

I want to force user to add data to grid before submit. Please help.

Grid

answered on 29 May 2017

10 answers

1.5K+ views

Excel export with special characters

Excel export did not filter out some exportable characters, specifically, hex values 0x0f and 0x10?

Grid

answered on 29 May 2017

2 answers

499 views

AngularJS grid reference in databound event

Why is the controller's reference to the grid not yet set in the databound event? Is this a design choice or a bug?
You can get a complete reference by accessing the sender in the databound event, so why would the scope not be updated yet?

Here's a plunker pointing out what I mean: http://plnkr.co/edit/ErDILanappRCgMxxo3Jh

I'm relatively new to AngularJS, so if this is a matter of design and guidelines please enlighten me with the details.

Thanks

Grid

answered on 28 May 2017

2 answers

223 views

Angular Kendo Diagram DataBound event never fires

I've tried adding the dataBound event to a kendo diagram using k-options and also tried adding the event via the k-on-data-bound attribute but neither of these seem to work. Here is an example of where I would expect the dataBound event to fire but the console message is never printed.

Diagram

answered on 28 May 2017

26 answers

2.1K+ views

Scrolling bug causes multiselect dropdown to close (with dojo example)

http://dojo.telerik.com/IkoTO/2

This is just a modified example from the original API Docs demo. All I did was add a spacer div so the page has scroll.

To reproduce: Simply click inside a multiselect, then scroll down to bottom of dropdown results.

You'll see the dropdown closes and then the page starts scrolling.

This would be VERY annoying for any end-user.

Telerik needs to fix this by stopPropagation of the scroll event maybe?

MultiSelect

answered on 26 May 2017

4 answers

302 views

Setting Column Values to an array in my view model - using MVVM

Hi, we are using MVVM as much as possible in all of our KendoUI Implementations. We've run into what seems to be a limitation of the Grid control. The MVVM support for the column values field does not appear to support view model binding. I am not able to reference arrays or data sources in the view model while creating the view. Here's a link to my jsFiddle that illustrates the issue.

If you remove "values: dsStatus" from the HTLM code for the status column, the grid instantiates just fine. With it in there, an error is raised that dsStatus could not be found. Any help with this that does not require me abandoning the MVVM pattern and instantiating the grid via javascript would be greatly appreciated.

Grid

answered on 26 May 2017

3 answers

340 views

Spreadsheet Sheet Batch Option

Hi, in the documents it says to use batch if doing a number of operations on the spreadsheet. Can you explain what the {layout: true} is?

http://docs.telerik.com/kendo-ui/api/javascript/spreadsheet/sheet#methods-batch

I'm guessing it represents the change event to fire after the batch operation finishes - if this is the case are there any other options? Ie - layout is for layout changes, what about adding validations or changing colours? I cannot seem to find this list.

Thanks

Marc

Spreadsheet

answered on 26 May 2017