Questions on Kendo UI for jQuery Forum

10 answers

1.3K+ views

Unable to select or remove items from connected kendolistbox

I have a connected listbox on the screen and call a function to setup the list box. This function should select the three items in the itemsToSelect variable and move them to the selectedItems listbox. Unfortunately it seems nothing happens. I can add the items using the add command (see commented out code) but I cannot remove them using the remove command either. I've looked at the documentation about select and remove but the examples don't show removing an array of items. What am I doing wrong?

let itemsToSelect = [

{ itemID: 123, itemName: "Item 123" },

{ itemID: 234, itemName: "Item 234" },

{ itemID: 345, itemName: "Item 345" }

];

setupListbox(itemsToSelect);

function setupListbox(itemsToSelect) {

let availableItemsListBox = $('#availableItems').data("kendoListBox");

let selectedItemsListBox = $('#selectedItems').data("kendoListBox");

let selectedItems = [];

// Reset the list boxes

availableItemsListBox._executeCommand("transferAllFrom");

// Select the correct items

$.each(itemsToSelect, function (index, item) {

var itemID = item.itemID;

var dataItem = availableItemsListBox.items().find(function (item) {

return item.itemID === itemID;

});

if (dataItem) {

selectedItems.push(dataItem);

}

});

if (selectedItems.length > 0) {

//selectedItemsListBox.add(selectedItems);

//availableItemsListBox.remove(selectedItems);

availableItemsListBox.select(selectedItems);

availableItemsListBox._executeCommand("transferTo");

}

If you need it, here is my initial setup of the listbox:

$("#availableItems").kendoListBox({

connectWith: "selectedItems",

autoScroll: false,

dropSources: ["selectedItems"],

toolbar: {

position: "right",

tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]

},

dataSource: itemsListBoxDataSource,

template: "#: data.itemID ##: data.itemName #",

valueTemplate: "#: itemName #",

dataTextField: "itemName",

dataValueField: "itemID",

add: () => changeListBox("#availableItems"),

remove: () => changeListBox("#availableItems")

});

$("#selectedItems").kendoListBox({

connectWith: "availableItems",

dropSources: ["availableItems"],

template: "#: data.itemID ##: data.itemName#",

valueTemplate: "#: itemName #",

dataTextField: "itemName",

dataValueField: "itemID",

add: () => changeListBox("#selectedItems"),

remove: () => changeListBox("#selectedItems")

});

ListBox

answered on 19 Feb 2020

13 answers

1.7K+ views

Grid column menu - default columns

http://demos.telerik.com/kendo-ui/grid/column-menu

Hello,

I have 10 columns(Also to be in column menu) that i need to get from the database, but by default show only 5 of them.

How can I choose what columns i was to display by default in the grid and others I can hide for the moment unless user selects from column menu?

Thanks for the help!

Grid

answered on 17 Feb 2020

1 answer

1.2K+ views

DateRangePicker Validation

Hi,

I tried to use Required DataAnnotation on Start and End properties of my viewmodel to validate DateRangePicker.

But seems like it is not working by default.

Any suggestion on validating DateRangePicker control?

DateRangePicker

answered on 17 Feb 2020

4 answers

600 views

Rotated headers not displayed properly in PDF export

Hello,

I am trying to rotate the headers of the Kendo UI grid 90° like it is described here: https://www.telerik.com/forums/rotate-headers-90deg-(vertical-headers)

This is working in the browser but when I export the grid as PDF, the header text is cut off at the top. See attached pictures.

Thanks.

Grid

answered on 17 Feb 2020

5 answers

956 views

Set Focus to Text Field in Grid Filter Popup

When you click on the filter icon in a Grid column, the popup window by default sets the focus to the drop down list for the filter operators(Contains, Starts With, etc.). My users want to start typing in the text field immediately. How do I set the focus to the text field as soon as the filter box pops up? I looked at the filterMenuInit event, but couldn't see a solution.

Thanks.

Grid

answered on 17 Feb 2020

7 answers

616 views

Best way to dynamically build Pareto chart

Hi,

I'm trying to implement some kind of logic to dynamic build Pareto chart using kendo jquery. Please find my example here - https://dojo.telerik.com/AhabIZow and a short description how it looks like:

1. configured series outside of the scope - seriesSettings. It should be able to contain more series (not only pareto)

2. depending on the seriesSettings, set the type = column and add a line series

3. handle the datasource change event and add values behind the calculated percent. I used to add the values in the data items behind each category as expect the line chart to take the maximum.

In the end I face a problem as the columns are not ordered by values descending. Another thing is that the part with the custom aggregation logic may be is not necessary. I tried using the datasource groupage, but it creates a new series per each category. Could you please advise how to fix these problems and is there a better way or event handling to achieve the Pareto requirements.

Thanks, Boyan.

Charts

answered on 14 Feb 2020

3 answers

172 views

Treelist drag & drop to Kendo UI Builder

Hello,

Currently running Kendo UI Builder has missing the Treelist component, need to integrate Treelist component drag & drop without update the whole Kendo UI Builder. What is the procedure? please guide step by step. Thank you

Looking forward to it.

BR/Ikram

TreeList

answered on 14 Feb 2020

9 answers

3.5K+ views

Auto resize charts on responsive web design?

Is it possible to resize a bar chart or whatever on risizing the browser window? I'm using the Bootstrap framework for the responsive layout. If I put a chart into a 12-column-grid, the chart fits as expected the full width, same on a 4-column grid e.g., the chart is small. That's ok. But: I which that the chart reacts in the same way as images doing by resizing the window . That means, e.g. a 12-grid-chart should shrink smaller if the browser window gets even small.

Thanks for help.

Charts

answered on 14 Feb 2020

12 answers

1.8K+ views

24 hour time format kendo scheduler

Hello,

i've been searching with no luck on how to display the time from 1:00pm to 13:00 on the time ruler. I am using mvc razor for my project, could you guys guide me on the right direction? Thanks!

Scheduler

answered on 14 Feb 2020

2 answers

119 views

All Icons

Hi, Dev Team!

Where i can retrieve all list of possible icons for breadcrumb?

Thank you.

Breadcrumb

answered on 13 Feb 2020