Telerik Forums
Kendo UI for jQuery Forum
1 answer
217 views

Hi team,

Where can be seen the SVG icons?

Are they the same as web font icons in this page? https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/font-icons

Furthermore, what is the SVG equivalent for web font icon .k-i-loading ?

 

Best regards,

Laurent.

Martin
Telerik team
 answered on 01 Aug 2023
1 answer
142 views

Hi,

Thank you for your answer to my merged rows question previously. Now I have the problem of getting the grid contents to sustain the format if I use Filter, Clear buttons in the Filter pop up or Sort. Example:

 

After setting the filter say for "Equals"  John Smith I get:

Buuuut. I really want:

Is there a way to "bypass" or extend the function where I could use the same implementation to restructure the rows like the above.

javascript - Does Kendo Grid support cell merge or not? - Stack Overflow

I think maybe I could create a listener to catch the Filter/Clear/Sort command and capture the JavaScript array structure and implement a solution similar to the one in Stack Overflow where I loop though the array and merge the cells of the records when the text content is equal? Maybe I am imagining this?

Georgi Denchev
Telerik team
 answered on 28 Jul 2023
1 answer
177 views

Hi team,

Consider this dojo: https://dojo.telerik.com/uZOruWEY

The tooltip is initialised without the width property. In that case, on first mouse-in the text is not wrapped and seems the right behaviour for me.

On next mouse-in, the text is wrapped! 

 

Best regards,

Laurent.

Zornitsa
Telerik team
 answered on 28 Jul 2023
1 answer
263 views

I have several Multiselect dropdown controls in my web application that have stopped working after users Chrome browser updated to version 115. They work fine on Chrome 114. 

 

When we click on the control the list does not show up.

 

 
Neli
Telerik team
 answered on 28 Jul 2023
1 answer
350 views

When we instantiate both DatePickers and DateTimePickers, there appears to be a phantom image (what looks like an "S") overlaying the calendar and clock icons as shown in the example below:

I've played around with the classes that are associated with the spans in which the icons are located, but am unable to locate the source of the phantom images.  Any ideas would be greatly appreciated!

 

Here's the code we use to implement both (where $(this) is the specific control :

                $(this).kendoDateTimePicker({
                    format: "MM/dd/yyyy hh:mm:ss tt",
                    value: savedStartDate,
                    min: savedStartDate,
                    change: startDateTimeChangeRange
                });

                if (reloadPreviousModel && previousModel) {
                    $(this).val(previousModel[counter].StartDate);
                }
                $('.datetimeFromcontrol').find('.k-i-calendar').attr('aria-label', 'Select start date');
                $('.datetimeFromcontrol').find('.k-i-clock').attr('aria-label', 'Select start time');
              

We recently upgraded from an older version of Telerik (2017 to 2022) and didn't have this issue in the older version.  Inspecting the elements, I can't find anything that seems out of the ordinary, but have included the generated markup below:

<span class="k-datetimepicker k-input datetimeTocontrol k-input-solid k-input-md k-rounded-md" style="">

<input aria-label="Proxy end date" class="datetimeTocontrol k-input-inner" data-savedenddate="" data-val="true" data-val-date="The field EndDate must be a date." data-val-required="The EndDate field is required." id="datetimepickerTo_row1" name="PreferencesList[3].Controls[0].ProxyList[0].EndDate" title="Proxy end date" type="text" value="1/1/0001 12:00:00 AM" data-role="datetimepicker" role="combobox" aria-expanded="false" aria-haspopup="grid" aria-controls="datetimepickerTo_row1_dateview datetimepickerTo_row1_timeview" autocomplete="off">

<button tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the time view" type="button" unselectable="on">

<span class="k-icon k-i-clock k-button-icon" aria-label="Select end time" title="Select proxy end time">Select proxy end time</span>

</button>

<button unselectable="on" tabindex="-1" class="k-input-button k-button k-button-md k-button-solid k-button-solid-base k-icon-button" aria-label="Open the date view" type="button">

<span class="k-icon k-i-calendar k-button-icon" aria-label="Select end date" title="Select proxy end date">Select proxy end date</span>

</button>

</span>

Matt
Top achievements
Rank 1
Iron
 answered on 27 Jul 2023
1 answer
161 views

Hello,

I have a non-modal kendo window which can be dragged outside of the viewport. When such window regains focus the whole content of the document body is moved upwards, despite that the body has set CSS property overflow to hidden, width: 100%, height: 100%.

How can this be fixed?

 

BR

Dušan

Martin
Telerik team
 answered on 26 Jul 2023
1 answer
355 views
We have a couple places in our code where we are using a kendo time or datetime picker and the entry field can accept either a properly formatted date or a "relative" code we came up with.  example:  0:+1 = this hour, one minute from now.  0:0 is now.  You get the idea.  To support someone entering an actual value, two-digit numbers are considered literal.  This is a problem with these controls because they appear to be auto=formatting 0:0 to 0:00.  We have a work-around by adding a + to the front or a T to the front (we pass the result as unix time format).  However, it is desired that we don't have to do this.  Is there a way to stop the control from doing this?

Note:  I picked "timedurationpicker" as the tag because you don't seem to have the correct tag for timepicker available.

Our code:
    function parameterEditor(container, options) {
        switch (options.model.ObjectFieldTypeID) {
            case @((int)ObjectFieldType.Types.Boolean):
                boolEditor(container, options);
                break;
            case @((int)ObjectFieldType.Types.Integer):
                numericEditor(container, options, 0);
                break;
            case @((int)ObjectFieldType.Types.Double):
                numericEditor(container, options, 2);
                break;
            case @((int)ObjectFieldType.Types.DateTime):
                dateTimeEditor(container, options, "kendoDateTimePicker", "M/d/yyyy H:mm", "H:mm");
                break;
            case @((int)ObjectFieldType.Types.Date):
                dateTimeEditor(container, options, "kendoDatePicker", "M/d/yyyy");
                break;
            case @((int)ObjectFieldType.Types.Time):
                dateTimeEditor(container, options, "kendoTimePicker", "H:mm");
                break;
            default:
                stringEditor(container, options);
        }
    }

    function dateTimeEditor(container, options, type, format, timeFormat) {
        $('<input id=' + options.field + '>')
            .appendTo(container)[type]({  /* dynamically choose the type of kendoXXXPicker (code other than "format" is universal) */
                value: options.model.DefaultValue,
                format: format,
                timeFormat: timeFormat,
            })
            .data(type);
        $("#" + options.field).on("change", function () {
            options.model.set(options.field, kendo.toString($(this).val(), format) || $(this).val());
        });
    }

Neli
Telerik team
 answered on 26 Jul 2023
1 answer
152 views

This example not works as expected:

https://dojo.telerik.com/ESAQEsip/2

It should only select: Red and Green.

Isn't it?

It's the same if I write the value of the input field by hand: value="Red"

Docs:

https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked#binding-lists-of-checkboxes-to-arrays

Many thanks

Paolo
Top achievements
Rank 2
Iron
 answered on 25 Jul 2023
1 answer
147 views

Using the demo (https://docs.telerik.com/kendo-ui/knowledge-base/timeline-using-range-bars) as a base, each has a unique ID.  I have adjusted the data in the datasource to only use two different colors.  The demo turns off the legend.  But I need a legend to indicate what the colors on my chart mean.  Turning on the legend (for both the demo and for mine) has two separate issues.

1) The legend contains a separate entry for each individual bar rather than combining them (either by category field or (prefered) the color).

2) The color in the legend doesn't match the color of the bar.

Here is the creation of my chart:

   $("#LDP_chart").kendoChart({
        dataSource: {
            data: cdata.results,
            group: {
                field: "id",
                dir: "asc"
            }
        },
        series: [{
            type: "rangeBar",
            fromField: "from",
            toField: "to",
            categoryField: "key",
            name: "#: group.items[0].seriesName #",
            colorField: "color",
            spacing: -1
        }],
        valueAxis: {
            name: "value",
            min: new Date(startDate + " 00:00").getTime() / 1000,
            max: new Date(endDate + " 23:59:59").getTime() / 1000,
            majorUnit: 24 * 60 * 60,
            majorGridLines: {
                color: "black"
            },
            labels: {
              template: "#= kendo.toString(new Date(value * 1000), 'ddd MM/dd') #",
              rotation: "auto"
            }
        },
        categoryAxis: {
            name: "category"
        },
        legend: {
          visible: true,
          position: 'bottom'
        },
    });

Google isn't helping me here.  I did find an article saying #2 isn't possible because the legend isn't using colorField parameter of the datasource, but that was pretty dated.

Georgi Denchev
Telerik team
 answered on 24 Jul 2023
1 answer
175 views

Hi,

I am new to your controls, and was wondering if there is a Grid example, or another control that enabled the user to  create something like this:

Regards,

George C. Geschwend

Nikolay
Telerik team
 answered on 24 Jul 2023
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
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
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
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?