For me, in the latest version of chrome the keyboard shortcuts are not working, even on the documentation example.
https://demos.telerik.com/kendo-ui/datetimepicker/keyboard-navigation
I'm working in MVC 5 and am using Entity Framework.
I want to be able to disable dates in a datepicker where the disabled dates are pulled from a table in the DB, for example the Holidays table where the dates are in a columns called HOLIDAYDATE. I see how to hard code the dates but how do you pull the dates from a data source and load them into the datepicker?
Hi,
I've got a MVVM kendo dropdownlist for my single page application that gets rendered with a layout.showIn(), all is fine and the dropdownlist is populated from my viewmodels datasource but the autocomplete filtering always passes null back to my controller method.
<script type=
"text/x-kendo-template"
id=
"ddlEventDescrTemplate"
>
<input id=
"ddlEventDescription"
data-role=
"dropdownlist"
data-value-primitive=
"true"
data-filter=
"contains"
data-auto-bind=
"false"
data-bind=
"source: autoCompleteDataForEventDescr, value: apdEventCode"
data-text-field=
"APDEventCode"
data-value-field=
"APDEventCode"
/>
</script>
<script type=
"text/javascript"
>
var
mainViewModel = kendo.observable({
value:
"1"
,
apdEventCode:
"None"
,
selectedEventName:
null
,
items: [
{ id:
"1"
, name:
"Email Addresses"
},
{ id:
"2"
, name:
"User IDs"
}
],
getSelectedEventName:
function
() {
var
selectedEventName =
this
.get(
"selectedEventName"
);
return
kendo.stringify(selectedEventName,
null
, 4);
},
getInputValue:
function
() {
return
this
.get(
"value"
);
},
getEventCodeValue:
function
() {
return
this
.get(
"apdEventCode"
);
},
autoCompleteDataForEventDescr:
new
kendo.data.DataSource({
serverFiltering:
true
,
transport: {
type:
"json"
,
read: {
url:
'@Url.Action("GetEventCodes", "SupportTools")'
}
}
}),
autoCompleteDataForEventName:
new
kendo.data.DataSource({
serverFiltering:
true
,
transport: {
read: {
url:
'@Url.Action("GetEventNames", "SupportTools")'
}
}
})
});
var
router =
new
kendo.Router();
router.route(
"/"
,
function
() {
mainLayout.render(
".panel-body"
);
mainLayout.showIn(
"#ddlInputFormat"
, inputFormatView);
mainLayout.showIn(
"#ddlEventDescription"
, eventDescriptionView);
mainLayout.showIn(
"#ddlEventName"
, eventNameView);
mainLayout.showIn(
"#numericCpdHours"
, cpdHoursView);
kendo.bind($(
"#mainView"
), mainViewModel);
});
router.route(
"/CPDBulkHourUploadStep2"
,
function
() {
mainLayout.destroy();
step2Layout.render(
".panel-body"
);
step2Layout.showIn(
"#cpdStep2View"
, cpdGridView);
});
router.start();
</script>
Controller method:
public
JsonResult GetEventCodes(
string
text)
{
var eventCodes = _repo.GetEventCodes(text);
return
Json(eventCodes, JsonRequestBehavior.AllowGet);
// eventCodes is returned as an IEnumerable<ViewModel>
}
My dropdownlist gets populated fine, but when I try to type in something the autocomplete never gets filtered, upon debugging it turns out that the parameter text is always null it doesn't seem to be passing anything back to the GetEventCodes controller method. Am I missing something here? I've looked at the demos and documentation and it doesn't seem like I'm missing anything.
Side Note: I can't seem to get my templates to render when I move the script/templates to another location e.g. remove it locally, I want to have a separate .cshtml file preferably that will have all my templates and I can call that from my javascript file instead of having it all in one file which creates a lot of clutter.
Thanks.
Hi, we are developing a component where we use many Kendo UI Window instances. They are all placed in a container that is not the "body" element. This container is relative to other elements and has offsets from the "body".
When trying to resize a window, the resizing border does not align with the mouse position, it seems to shrink down with the size of the offset from the body.
Here is a small demo, reproducing the issue: http://jsbin.com/jivemitavi/edit?html,css,js,output
If you set a 'top' or 'left' on the container, the behavior changes and the window even moves its position when resizing.
Is there a workaround to this or is there something we're missing?
Thanks.
Hello, I'm wondering if there is a CSS attribute that will allow one to put the cursor on the textbox and navigate to the end of the text, so one can see the whole text value?
I tried the text-overflow: ellipisis below,
but that didn't seem to take and i've attached a zip file with a snap shot of the textboxes, so any pointers would be greatly appreciated!
thank you!
<script type="text/x-kendo-template" id="bip-template">
<div class="bip-container">
<table class="bip-table" cellpadding="0" cellspacing="0">
……………………………………………
……………………………………………………….
……………………………………………………………………………
<td width="9%" class="lbl-text">Last Name:</td>
<td width="16%">
<input class="k-textbox.large" type="text" disabled="disabled" style="width:100%" data-bind="value: bipVm.lastName" />
</td>
<td width="9%" class="lbl-text">First Name:</td>
<td width="16%">
<input class="k-textbox.large" type="text" disabled="disabled" style="width:100%" data-bind="value: bipVm.firstName" />
</td>
………………………..……………………………………………
……………………………………………………….….
……………………………………
<style>
[class~="k-textbox.large"]
{
width:
300px;
border:
none;
font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
font-size:
11px;
white-space: nowrap;
text-overflow:
ellipsis;
overflow:
hidden;
}
</style>
locdir
I have created a grid with more than 300K records and i'm using filter mode row. My problem is that i'm taking a lot of time to get the suggestions for my filters(around 40s). As i understand, from your documentation, when i use mode row a new request is sent to server to retrieve again all data.There is an option to make filter works fast? How can i achieve that?
@section Scripts{
<script>
function
numberWithSpaces(x) {
return
x.toString().replace(/\B(?=(\d{3})+(?!\d))/g,
" "
);
}
function
filterAutoCompleteDataSource(e) {
var
gridFilter = e.sender.dataSource.filter();
e.sender.element.find(
".k-autocomplete input"
).data(
"kendoAutoComplete"
).dataSource.filter(gridFilter);
}
$(document).ready(
function
() {
$(
'.datapicker'
).datetimepicker(
{
format:
'DD.MM.YYYY'
,
locale:
'ru'
});
var
_grid =
null
;
function
grid_init() {
var
dataSearch = {
organizationSearchKey: document.getElementById(
'organizationSearchKey'
).value,
dateStartSearchKey: document.getElementById(
'dateStartSearchKey'
).value,
dateEndSearchKey: document.getElementById(
'dateEndSearchKey'
).value,
accountDebitSearchCode: document.getElementById(
'accountDebitSearchCode'
).value,
accountCreditSearchCode: document.getElementById(
'accountCreditSearchCode'
).value,
costArticleSearchCode: document.getElementById(
'costArticleSearchCode'
).value
}
if
(!dataSearch.organizationSearchKey ==
""
) {
var
dataSource =
new
kendo.data.DataSource({
transport: {
read: {
url:
"/AccountingTransactions?handler=Json"
,
dataType:
"json"
,
data: dataSearch
}
},
schema: {
data:
"results"
,
total:
"total"
,
model: {
id:
"accountingTransactionKey"
,
fields: {
accountingTransactionKey: { editable:
false
, nullable:
false
},
date: { editable:
false
, nullable:
false
},
organization: { editable:
false
, nullable:
false
},
accountDebit: { editable:
false
, nullable:
true
},
costArticleUsed: { editable:
false
, nullable:
true
},
accountCredit: { editable:
false
, nullable:
true
},
isIntraGroupPartnerOrganization: { editable:
false
, nullable:
true
},
currency: { editable:
false
, nullable:
true
},
sum: { editable:
false
, nullable:
true
},
rateRUB: { editable:
false
, nullable:
true
},
sumRUB: { editable:
false
, nullable:
true
},
rateUSD: { editable:
false
, nullable:
true
},
sumUSD: { editable:
false
, nullable:
true
},
content: { editable:
false
, nullable:
true
},
costArticle: { editable:
false
, nullable:
true
},
profitLossArticle: { editable:
false
, nullable:
true
},
construction: { editable:
false
, nullable:
true
},
nomenklature: { editable:
false
, nullable:
true
},
nomenklatureGroup: { editable:
false
, nullable:
true
},
basicResource: { editable:
false
, nullable:
true
},
nonMaterialAsset: { editable:
false
, nullable:
true
},
partnerDebit: { editable:
false
, nullable:
true
},
partnerCredit: { editable:
false
, nullable:
true
},
contractDebit: { editable:
false
, nullable:
true
},
contractCredit: { editable:
false
, nullable:
true
},
employee: { editable:
false
, nullable:
true
},
bankAccount: { editable:
false
, nullable:
true
},
organizationalUnit: { editable:
false
, nullable:
true
},
stock: { editable:
false
, nullable:
true
},
futureLossArticle: { editable:
false
, nullable:
true
},
futureProfitArticle: { editable:
false
, nullable:
true
},
profitLossArticleErpIdName: { defaultValue: { id: -1, name:
""
} },
investProfitLossArticleErpIdName: { defaultValue: { id: -1, name:
""
} },
nomenklatureErpIdName: { defaultValue: { id: -1, name:
""
} },
projectErpIdName: { defaultValue: { id: -1, name:
""
} }
}
}
},
pageSize: 100,
page: 1,
serverPaging:
false
,
aggregate: [
{ field:
"sum"
, aggregate:
"sum"
},
{ field:
"sumRUB"
, aggregate:
"sum"
},
{ field:
"sumUSD"
, aggregate:
"sum"
}
],
/*group: {
field: "sum", aggregates: [
{field: "date", aggregate: "sum"}]
}*/
});
$(
'#grid'
).empty();
$(
"#grid"
).kendoGrid({
dataSource: dataSource,
height: 700,
sortable:
true
,
pageable: {
buttonCount: 5
},
dataBound: filterAutoCompleteDataSource,
filterable: {
mode:
"row"
,
},
columns: [
{
field:
"date"
,
title:
"Дата"
,
template:
"#= kendo.toString(kendo.parseDate(date), 'dd-MM-yyyy') #"
,
width:
"80px"
,
locked:
true
,
filterable:
false
,
},
{
field:
"organization"
,
title:
"Организация"
,
width:
"200px"
,
locked:
true
,
filterable:
false
,
},
{
field:
"accountDebit"
,
title:
"Дт"
,
width:
"60px"
,
locked:
true
,
filterable:
false
,
},
{
field:
"accountCredit"
,
title:
"Кт"
,
width:
"60px"
,
locked:
true
,
filterable:
false
,
},
{
field:
"isIntraGroupPartnerOrganization"
,
title:
"ВГО"
,
width:
"50px"
,
template:
"#if(isIntraGroupPartnerOrganization == 1) {# #: 'СБЕ' # #} #"
,
locked:
true
,
filterable:
false
,
},
{
field:
"currency"
,
title:
"Вал."
,
width:
"50px"
,
locked:
true
,
filterable:
false
,
},
{
field:
"sum"
,
title:
"Сумма"
,
width:
"120px"
,
//format: "{0:n2}",
locked:
true
,
filterable:
false
,
template:
function
(dataItem) {
return
numberWithSpaces(dataItem.sum.toFixed(2)) },
footerTemplate:
"<b>"
+
"#: numberWithSpaces(sum.toFixed(2)) #"
+
"</b>"
},
{
field:
"rateRUB"
,
title:
"Курс RUB"
,
width:
"100px"
,
locked:
true
,
filterable:
false
,
hidden:
true
,
},
{
field:
"sumRUB"
,
title:
"Сумма RUB"
,
width:
"120px"
,
//format: "{0:n2}",
locked:
true
,
filterable:
false
,
template:
function
(dataItem) {
return
numberWithSpaces(dataItem.sumRUB.toFixed(2)) },
footerTemplate:
"<b>"
+
"#: numberWithSpaces(sum.toFixed(2)) #"
+
"</b>"
,
hidden:
true
,
},
{
field:
"rateUSD"
,
title:
"Курс USD"
,
width:
"100px"
,
locked:
true
,
filterable:
false
,
hidden:
true
,
},
{
field:
"sumUSD"
,
title:
"Сумма USD"
,
width:
"120px"
,
//format: "{0:n2}",
locked:
true
,
filterable:
false
,
template:
function
(dataItem) {
return
numberWithSpaces(dataItem.sumUSD.toFixed(2)) },
footerTemplate:
"<b>"
+
"#: numberWithSpaces(sum.toFixed(2)) #"
+
"</b>"
,
hidden:
true
,
},
{
field:
"content"
,
title:
"Содержание"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
},
locked:
true
},
{
title:
"Аналитика бухгалтерского плана счетов"
,
columns: [
{
field:
"costArticle"
,
title:
"Статья затрат"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"profitLossArticle"
,
title:
"Прочие доходы и расходы"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"construction"
,
title:
"Объекты строительства"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"nomenklature"
,
title:
"Номенклатура"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"nomenklatureGroup"
,
title:
"Номенклатурные группы"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"basicResource"
,
title:
"Основные средства"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"nonMaterialAsset"
,
title:
"Нематериальные активы"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"partnerDebit"
,
title:
"Контрагент Дт"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"contractDebit"
,
title:
"Договор Дт"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"partnerCredit"
,
title:
"Контрагент Кт"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"contractCredit"
,
title:
"Договор Кт"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"employee"
,
title:
"Сотрудник"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"bankAccount"
,
title:
"Банковский счет"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"organizationalUnit"
,
title:
"Подразделение"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"stock"
,
title:
"Склад"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"futureLossArticle"
,
title:
"Расходы будущих периодов"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"futureProfitArticle"
,
title:
"Доходы будущих периодов"
,
width:
"200px"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
]
},
{
title:
"Аналитика управленческого плана счетов"
,
columns: [
{
field:
"profitLossArticleErpIdName"
,
title:
"Статья БДР"
,
width:
"250px"
,
editor: profitLossArticleErpDropDown,
template:
"#=profitLossArticleErpIdName.name#"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
},
},
{
field:
"investProfitLossArticleErpIdName"
,
title:
"Статья ИБ"
,
width:
"250px"
,
editor: investProfitLossArticleErpDropDown,
template:
"#=investProfitLossArticleErpIdName.name#"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
},
},
{
field:
"nomenklatureErpIdName"
,
title:
"Номенклатура УУ"
,
width:
"250px"
,
editor: nomenklatureErpDropDown,
template:
"#=nomenklatureErpIdName.name#"
,
filterable:
{
cell:
{
operator:
"contains"
,
suggestionOperator:
"contains"
,
showOperators:
false
}
}
},
{
field:
"projectErpIdName"
,
title:
"Проект"
,
width:
"200px"
,
editor: projectErpDropDown,
template:
"#=projectErpIdName.name#"
,
filterable:
false
,
}
]
}
],
editable:
true
});
}
else
{
alert(
"Выберите организацию!"
);
}
var
currencyShowed =
false
;
$(
'.btn-action-show-hide-currency'
).on(
'click'
,
function
(e) {
var
grid = $(
"#grid"
).data(
"kendoGrid"
);
if
(!currencyShowed)
{
grid.showColumn(7);
grid.showColumn(8);
grid.showColumn(9);
grid.showColumn(10);
$(
this
).removeClass(
"btn-action-show-currency"
).addClass(
"btn-action-hide-currency"
).html(
"Скрыть другие валюты"
);
currencyShowed =
true
}
else
{
grid.hideColumn(7);
grid.hideColumn(8);
grid.hideColumn(9);
grid.hideColumn(10);
$(
this
).removeClass(
"btn-action-hide-currency"
).addClass(
"btn-action-show-currency"
).html(
"Показать другие валюты"
);
currencyShowed =
false
}
});
}
function
profitLossArticleErpDropDown(container, options) {
$(
'<input required name="'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoDropDownList({
autoBind:
false
,
filter:
"contains"
,
dataTextField:
"name"
,
dataValueField:
"id"
,
select: profitLossArticleErpDropDownOnSelect,
dataSource: {
dataType:
"json"
,
transport: {
read:
"Common/GetProfitLossArticlesErp"
}
}
});
}
function
investProfitLossArticleErpDropDown(container, options) {
$(
'<input required name="'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoDropDownList({
autoBind:
false
,
filter:
"contains"
,
dataTextField:
"name"
,
dataValueField:
"id"
,
select: investProfitLossArticleErpDropDownOnSelect,
dataSource: {
dataType:
"json"
,
transport: {
read:
"Common/GetInvestProfitLossArticlesErp"
}
}
});
}
function
nomenklatureErpDropDown(container, options) {
$(
'<input required name="'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoDropDownList({
autoBind:
false
,
filter:
"contains"
,
dataTextField:
"name"
,
dataValueField:
"id"
,
select: nomenklatureErpDropDownOnSelect,
dataSource: {
dataType:
"json"
,
transport: {
read:
"Common/GetNomenklaturesErpGet"
}
}
});
}
function
projectErpDropDown(container, options) {
$(
'<input required name="'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoDropDownList({
autoBind:
false
,
filter:
"contains"
,
dataTextField:
"name"
,
dataValueField:
"id"
,
select: projectErpDropDownOnSelect,
dataSource: {
dataType:
"json"
,
transport: {
read:
"Common/GetProjectsErpGet"
}
}
});
}
function
profitLossArticleErpDropDownOnSelect(e)
{
var
grid = e.sender.element.closest(
".k-grid"
).data(
"kendoGrid"
);
var
row = e.sender.element.closest(
"tr"
);
var
dataItem = grid.dataItem(row);
var
data =
{
accountingTransactionKey: dataItem.accountingTransactionKey,
profitLossArticleErpKey: e.dataItem.id
}
$.ajax({
url:
"/FinanceSettings/UpdateFactProfitLossProfitLossArticleErpKey"
,
type:
"POST"
,
data: data,
success:
function
(result) {
if
(result =
'OK'
) {
console.log(result);
}
}
});
}
function
investProfitLossArticleErpDropDownOnSelect(e)
{
var
grid = e.sender.element.closest(
".k-grid"
).data(
"kendoGrid"
);
var
row = e.sender.element.closest(
"tr"
);
var
dataItem = grid.dataItem(row);
var
data =
{
accountingTransactionKey: dataItem.accountingTransactionKey,
investProfitLossArticleErpKey: e.dataItem.id
}
$.ajax({
url:
"/FinanceSettings/UpdateFactProfitLossInvestProfitLossArticleErpKey"
,
type:
"POST"
,
data: data,
success:
function
(result) {
if
(result =
'OK'
) {
console.log(result);
}
}
});
}
function
nomenklatureErpDropDownOnSelect(e)
{
var
grid = e.sender.element.closest(
".k-grid"
).data(
"kendoGrid"
);
var
row = e.sender.element.closest(
"tr"
);
var
dataItem = grid.dataItem(row);
var
data =
{
accountingTransactionKey: dataItem.accountingTransactionKey,
nomenklatureErpKey: e.dataItem.id
}
$.ajax({
url:
"/FinanceSettings/UpdateFactProfitLossNomenklatureErpKey"
,
type:
"POST"
,
data: data,
success:
function
(result) {
if
(result =
'OK'
) {
console.log(result);
}
}
});
}
function
projectErpDropDownOnSelect(e) {
var
grid = e.sender.element.closest(
".k-grid"
).data(
"kendoGrid"
);
var
row = e.sender.element.closest(
"tr"
);
var
dataItem = grid.dataItem(row);
var
data =
{
accountingTransactionKey: dataItem.accountingTransactionKey,
projectErpKey: e.dataItem.id
}
$.ajax({
url:
"/FinanceSettings/UpdateFactProfitLossProjectErpKey"
,
type:
"POST"
,
data: data,
success:
function
(result) {
if
(result =
'OK'
) {
console.log(result);
}
}
});
}
$(
"#btnSearch"
).click(
function
() {
grid_init();
});
});
</script>
}
Hi,
I have a histogram chart with very small values on the category axle, see attached image. I want the chart to display the values with 2 decimal places, but I can't find the correct way of doing this.
This is my code for the category axle:
categoryAxis: [{
name: 'categoryAxis',
categories: this.getEmptyCategories()
,
labels: {
visible: false
},
majorGridLines: {
visible: true
},
justified:false
}],
How should I specify that I want more decimals?
Best regards,
Henrik
Hi,
I am working on contextMenu for grid. Currently, the grid has some data rows and the rest area is empty. ContextMenu on data rows works fine. However, I also need to right-click on the empty area of the grid, then I need to show a contextmenu(for example, "add new" function) and remove selection of the current grid data rows. How could I do it? Thanks for your help.
James
Hi,
I want to edit some functionality in Kendo grid. For instance Navigatable should behave different to its original implementation and AllowCopy should catch different key press and behave accordingly.
If possible can anyone provide samples to extend such functions. Note: Both function will take only boolean types.
Thanks in Advance,
Sam Azpan. D