Hi,
I am trying to set up calendar in my app using range selection mode.
My question would be how can I select range when I open calendar on a button click. (I have field where data is read from db, and then i should preset that data on calendar).
Second, potential bug:
if Calendar is in range selection mode (selectable="range"), change event doesn't trigger correctly. When first time clicked - value in the widget change event (this.value) equals null, and then when second one is clicked (end of range), this.value equals start of the range.
https://dojo.telerik.com/TCxOCzUl
I used this dojo.
Thank you very much.
Regards,
Vedad
I have an html page with two kendomultiselect controls initialized with a code like the following:
function msAssegnatariConoscenza_GetDataSource()
{
return new kendo.data.DataSource(
{
serverFiltering: true,
schema: {
data: function (response)
{
//...
return response;}
},
transport: {
read: {
url: "../Api/Assegnatari_SearchWithUO", //Assegnatari_Search
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type)
{
//...
return JSON.stringify(data);
}
}
}
);
}
function msAssegnatariConoscenzaInit(fIsReadOnly)
{
if (!datiSmistamento.AssConoscenza) datiSmistamento.AssConoscenza = [];
$("#field_AssConoscenza").kendoMultiSelect({
autoBind: false,
dataTextField: "Nome",
dataValueField: "ID",
minLength: 3,
delay: 500,
height: 300,
headerTemplate: '...',
tagTemplate: '...',
itemTemplate: '...',
filtering: function (e)
{
if (!e.filter || !e.filter.value)
e.preventDefault();
},
dataSource: msAssegnatariConoscenza_GetDataSource() ,
value: null,
select: function (e)
{
var dataItem = this.dataItem(e.item.index());
return selectAssegnatarioConoscenza($(this.element[0]).attr("id"), dataItem, e);
},
change: function (e) { return msAssegnatariConoscenza_changeEvent(this, e); }, //Fired when value changed by the user, not form code.
dataBound: function (e) { e.sender.listView.focusFirst(); return false; }
});
}
When I delete an element in one control, I have to add it to the other control.
On the change event of the first I set the new value of the second with the following code:
msAssegnatariConoscenza.value([]); msAssegnatariConoscenza.dataSource.data(datiSmistamento.AssConoscenza); msAssegnatariConoscenza.value(datiSmistamento.AssConoscenza.map(avmAss => avmAss.ID));
Can anyone tell me what I have done wrong?
We need in our application a dropdowntree which has the following properties:
the following snipped is the configuration of the datasource:
let hDataSource = new kendo.data.HierarchicalDataSource({
transport: {
read:
function (options) {
let searchString = "";
if (options.data.filter && options.data.filter.filters.length > 0) {
searchString = "/" + options.data.filter.filters[0].value;
}
let url = SERVICE_URL;
if (searchString) {
url += searchString;
}
$.ajax({
url: url,
success: function (result) {
options.success(result);
}
});
}
},
schema: {
model: {
children: "items",
hasChildren: "childsAvailable"
}
},
serverFiltering: true
});
the url provided by the SERVICE_URL variable is filtering the data when searching for nodes
when i configure the widget in the normal way everything works just fine. But when i use mvvm the browser throws the following error.
maybe somebody can help me get mvvm to work since this is how all our forms are created.
I am are trying to create a custom toolbar button with a defined SVG.
No matter what we try, we are unable to change the default SVG button.
The documentation says that the name will be used to apply a k-name class. We can then use that to apply our own SVG. How can we change the SVG on a custom button?
Example - https://dojo.telerik.com/NyxxkxYJ
The following example demonstrates how to add a custom tool button. To enable styling where toolName
is the specified name in the custom tool configuration, the custom buttons get a k-toolName
CSS class. The undo
and redo
tool names are reserved.
<
div
data-role
=
"view"
id
=
"two-drawer-home"
data-title
=
"Default Report"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
data-role
=
"backbutton"
id
=
"back-button"
class
=
"nav-button"
data-align
=
"left"
>Back</
a
>
<
span
data-role
=
"view-title"
></
span
>
<
a
data-role
=
"button"
data-rel
=
"drawer"
href
=
"#right-drawer"
data-icon
=
"share"
data-align
=
"right"
></
a
>
</
div
>
</
header
>
<
a
class
=
"left-btn"
data-role
=
"button"
data-rel
=
"drawer"
href
=
"#left-drawer"
data-icon
=
"nav"
></
a
>
<
div
data-role
=
"content"
>
Main Content Goes Here
</
div
>
</
div
>
<
div
data-model
=
"app.Menus"
data-init
=
"app.Menus.init"
data-role
=
"drawer"
id
=
"left-drawer"
style
=
"width: 270px"
data-title
=
"Select a Report"
data-views
=
"['two-drawer-home']"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
<
div
id
=
"zones"
class
=
"k-content"
>
<
div
class
=
"configuration-horizontal"
>
<
div
class
=
"config-section"
>
<
div
data-role
=
"treeview"
data-drag-and-drop
=
"false"
data-text-field
=
"Name"
data-bind="visible: isVisible,
source: zones,
events: { select: onSelect }"></
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"drawer"
id
=
"right-drawer"
style
=
"width: 80px"
data-title
=
"Share"
data-position
=
"right"
data-views
=
"['two-drawer-home', '/kendo-ui/mobile/m/drawer/two-way-drawers.html']"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
span
data-role
=
"view-title"
></
span
>
</
div
>
</
header
>
Filters will appear here
</
div
>
Hello,
I have a question. After updating Kendo UI from version 2017.2.621 to 2017.3.1018, a problem occurred. The checkbox functionality in the grid, which previously had no issues, is no longer working. When I click the checkbox, nothing happens.
Hi,
How can I replace multiselect item remove icon with the old one? The new icon is svg icon. My version is 2024.3.1015
new icon
old icon
my onclick event not firing after grid sort.
grid columns markup
columns: [
{
field: "", title: "", width: "150px", attributes: { "class": "ps-0" }, template: function(dataItem) {
var actionHtmlContent = '';
if (dataItem && dataItem.canEdit) {
actionHtmlContent += '<a class="btn btn-link" href="' + contactDetailLink + '/1/' + dataItem.id + '">';
actionHtmlContent += '<em class="material-icons material-edit" style="color:#0D4EA2;"></em>';
actionHtmlContent += '</a>';
}
if (dataItem && dataItem.canDelete) {
actionHtmlContent += '<a class="btn btn-link delete-button" title=" " aria-label=" " href="?AppContactID=' + encodeURIComponent(dataItem.id) + ' &handler=Delete">';
actionHtmlContent += '<em class="material-icons material-delete" style="color:#0D4EA2;"></em>';
actionHtmlContent += '</a>';
}
return actionHtmlContent;
}
},
{ field: "salutation", title: "Salutation", width: "130px" },
{ field: "fullName", title: "Full Name", width: "200px" },
code to attach onclick
$(".delete-button").on("click", function () { return confirm('Are you sure you want to proceed?'); });
my js tag has nounce, thus i can't add the event listener to the html tag itself.
after i sort the grid, when user click on the .delete-button the confirm popup is not showing
Hi,
I am attempting to update our current version of Kenduo UI for Jquery from 2023.1.117 to 2024.4.1112.
I have downloaded the commercial release zip and have updated the references to the js and css files (as I have done with previous upgrades), however I am experiencing lots of styling issues for font sizes and layout across inputs ans widgets.
Firstly, the text size is much smaller for inputs and widgets.
The display of widgets on different browsers is inconsistent (for example the calendar widget is being cut off on FireFox, but is spanning the whole screen on Chrome - screenshots attached).
Any ideas what could be causing this?