Telerik Forums
Kendo UI for jQuery Forum
4 answers
321 views
Hello,
is it possible to drag more than one item from one list to another? or is this feature in planing?

For selecting more than 1 here is an angularjs example:

Angular Multiple Selection

combined with

Kendo linkedlist

Regards,
Sven
Alex Hajigeorgieva
Telerik team
 answered on 09 Oct 2020
1 answer
326 views

I have tried to left-align the overflow anchor of the ToolBar, which I achieved using css, specifically by setting ".k-overflow-anchor { right: auto; }".

That works fine, but the problem is that the popup is still aligned to the right side of the overflow anchor button, see attached image.

 

Petar
Telerik team
 answered on 09 Oct 2020
1 answer
2.3K+ views

Hi, is it possible to move the column name under the group header?

 var data = [
        { name: 'test1', age: 30 },
        { name: 'test2', age: 30 },
        { name: 'test3', age: 32 },
        { name: 'test4', age: 33 },
        { name: 'test5', age: 33 },
        { name: 'test6', age: 34 },
        { name: 'test7', age: 35 },
        { name: 'test8', age: 30 },
    ];

    $("#grid").kendoGrid({
        dataBound: function (e) {
            e.sender.table.find(".k-grouping-row:contains('Stock')").each(function (ind, item) {
                e.sender.collapseGroup($(item));
            })
        },
        dataSource: {
            data: data,
            group: [
                {
                    field: 'name', aggregates: [{
                        field: "name",
                        aggregate: "count"
                    }]
                }
            ]
        },
        height: 550,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [{ field: 'name',  groupHeaderTemplate: "#=value#" }, 
            {
            field: "age",
            title: "age",
            width: 240
        }]
    });

i want to move the column header below the group header.

 

Neli
Telerik team
 answered on 09 Oct 2020
1 answer
174 views

Chart section scroll on mobile device is not working

Eg, 

<div>

<div>Header</div>

<div>Content</div>

<div>Chart</div>

<div>Content</div>

<div>Footer</div>

<div/>

 

So the top header and content scroll on mobile but when chart div or section came then scroll is not working i can't scroll down also the left and right gutter space i can scroll down but not line chart div.

Alex Hajigeorgieva
Telerik team
 answered on 09 Oct 2020
5 answers
861 views
Hey Folks,

is it possible to achieve the same functionality that the grid component offers ( groupable header columns ) in the TreeList? The documentation does not mention something like that and i did not get it to work.

Is my only option to use the grid component with dynamic subgrids? 

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 08 Oct 2020
5 answers
4.7K+ views

 

Hello,

I have a grid and the data I receive is in string, even for my 2 date columns. I was able to change them in the preferred Date format, but I can't seem to get the filter and sorting working. 

I tried to change the datatype of the columns to datetime, but that was unsuccesfullI

I'm now looking for some help to create a custom filter (and sort) so that I can sort and filter my date columns the correct way.

It's a pretty complicated solution, but here's some of the code were I load my grid:

function loadGrid(userGridSettings) {
        var gridSettings = {
            selectable: "multiple row",
            sortable: true,
            filterable: true,
            pageable: {
                refresh: true,
                pageSizes: [10, 20, 50, 100],
                buttonCount: 5
            },
            resizable: true,
            columnMenu: true,
            toolbar: kendo.template($("#searchgrid-toolbar").html()),
            editable: "popup",
            reorderable: true,
            columnHide: saveState,
            columnShow: saveState,
            columnResize: saveState,
            columnReorder: saveState,
            columns: [{
                field: "IsSelected",
                title: null,
                sortable: false,
                filterable: false,
                width: 25,
                menu: false,
                reorderable: false
            }, {
                field: "BatchName",
                title: "Batchnaam",
                filterable: { multi: true }
            }, {
                field: "RequesterPartyRequired",
                title: "Kabelsel.",
                filterable: { multi: true }
            }, {
                field: "StartDate",
                title: "Plandatum start",
                type: "date",
                format: "{0: dd-MM-yyyy}",
                filterable: {
                    ui: function (element) {
                        element.kendoDatePicker({
                            format: '{0: dd-MM-yyyy}'
                        })
                    },
                    multi: false
                }
            }, {
                field: "EndDate",
                title: "Plandatum eind",
                type: "date",
                format: "{0: dd-MM-yyyy}",
                filterable: {
                    ui: function (element) {
                        element.kendoDatePicker({
                            format: '{0: dd-MM-yyyy}'
                        })
                    },
                    multi: false
                }
            }, {
                field: "ID",
                title: " ",
                filterable: false,
                sortable: false,
                width: 25,
                menu: false,
                reorderable: false
            }]
        };
 
        var customFields = [{
            field: "IsSelected",
            template: "<input type='checkbox' class='checkbox' #= IsSelected !== undefined && IsSelected ? checked='checked' : '' # />",
            headerTemplate: "<input type='checkbox' id='checkAll' />"
        },
        {
            field: "StartDate",
            filterable: {
                ui: function (element) {
                    element.kendoDatePicker({
                        format: '{0: d-M-yyyy}'
                    })
                },
                operators: {
                    string: {
                        eq: "Is gelijk aan",
                        neq: "Is niet gelijk aan"
                    }
                },
                multi: false
            },
            format: '{0: d-M-yyyy}'
        },
        {
            field: "EndDate",
            filterable: {
                ui: function (element) {
                    element.kendoDatePicker({
                        format: '{0: d-M-yyyy}'
                    })
                },
                operators: {
                    string: {
                        eq: "Is gelijk aan",
                        neq: "Is niet gelijk aan"
                    }
                },
                multi: false,
            },
            format: '{0: d-M-yyyy}'
        },
         
        {
            field: "ID",
            template: "#=actionTemplate(data)#"
        }];
 
        if (userGridSettings !== undefined && userGridSettings !== "" && userGridSettings !== null && JSON.stringify(userGridSettings) !== "{}") {
            gridSettings.columns = userGridSettings;
        }
 
        $.each(customFields, function (customFieldIndex, customField) {
            $.each(gridSettings.columns, function (columnIndex, column) {
                if (column.field == customField.field) {
                    if (customField.sortable) {
                        column.sortable = customField.sortable;
                    }
                    if (customField.template) {
                        column.template = customField.template;
                    }
                    if (customField.headerTemplate) {
                        column.headerTemplate = customField.headerTemplate;
                    }
                    if (customField.filterable) {
                        column.filterable = customField.filterable;
                    }
                }
            });
        });
 
        searchGrid = $("#searchGrid").kendoGrid(gridSettings).data("kendoGrid");
 
        searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();
        searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();
}

 

 

 

Tsvetomir
Telerik team
 answered on 08 Oct 2020
2 answers
104 views

Hi,

I have a grid with an embedded bar chart. The bar chart is firing a seriesClick() event.
How can I find the grid row containing the chart that fired the event?

Prototype is in this snippet copied from the embedded chart demo. Just click in any bar of a chart.
https://dojo.telerik.com/@eyep/exIVAraw

Thanks in advance,

Eugenio Yep

 

Eugenio
Top achievements
Rank 1
 answered on 08 Oct 2020
12 answers
2.3K+ views

Hi,

In my grid there are cells where we can accept having null values, e.g. property can exist without owner. I would like to filter owner column in multifilter by having null. Right now, empty (null) values are not visible in multi filter menu, only existing owners are displayed. We hacked the problem by switching from null values to empty strings "", and they are visible in menu. But I'm feeling extremely awful for doing such hacks in my code.

I checked that it's made like that because in FilterMultiCheck _init function you got such line:

FilterMultiCheck
            _init: function () {
               ...
                    this.checkSource.data(distinct(this.dataSource.data(), this.field));
               ...

And the distinct function looks like that:

function distinct(items, field) {
        ...
        if (text !== undefined && text !== null && !seen.hasOwnProperty(text)) {
            result.push(item);
            seen[text] = true;
        }
        ...

You see, that null and undefined values are omited and they are not the part of the results. Unfortunately, removing the null & undefined conditionals don't work - null is showed in menu but you cannot filter by it.

Will you be able to do something with it in the future? Right now i can workaround it, but it's really nasty to replace nulls with empty strings :)

Alex Hajigeorgieva
Telerik team
 answered on 08 Oct 2020
5 answers
541 views
Hi, Is there any way to enable horizontal scrolling to my Scheduler?
Martin
Telerik team
 answered on 08 Oct 2020
4 answers
1.0K+ views
I see that you can set the text and value of list items with dataValueField and dataTextField, but is there any way to set custom attributes with DataSource (ie: data-*)?
Jason
Top achievements
Rank 1
 answered on 08 Oct 2020
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Bronze
Iron
Iron
Sergii
Top achievements
Rank 1
Iron
Iron
Dedalus
Top achievements
Rank 1
Iron
Iron
Lan
Top achievements
Rank 1
Iron
Doug
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?