Telerik Forums
Kendo UI for jQuery Forum
5 answers
318 views
Can you please advise on how to go about creating a search engine friendly application using Kendo UI Web?

Thank you,

Wim
Carolina
Top achievements
Rank 1
Iron
 answered on 16 May 2022
1 answer
139 views

I have a scheduler set to month view, and I wanted to shade certain dates regardless of if there is an event on that day or not.  I have the dates that need to be shaded ahead of time.

I created a class called previewDay which changes the background color, and I added code to the databound function that does this without issue, until I add 3 events

function kendoDateOnly(input) {
    if (input == null) {
        return "";
    }
    return kendo.parseDate(kendo.toString(input, 'd')).toLocaleDateString("en-US");
}
function preview_dataBound(e) {
    var scheduler = $("#event-preview-scheduler").data("kendoScheduler");
    var slots = $('.k-scheduler-content td');
    for (var i = 0; i < slots.length; i += 1) {
        var currentSlot = $(slots[i]); // Get current slotvar slotData = scheduler.slotByElement(currentSlot); // Get slot datavar startDate = kendoDateOnly(slotData.startDate); // Convert start date to M/d/yyyy formatif (_eventDates.includes(startDate)) {
            currentSlot.addClass('previewDay'); // Add the previewDay class
        } else {
            currentSlot.removeClass('previewDay'); // Remove the previewDay class (probably don't need to do this)
            currentSlot.addClass("k-other-month"); // Add the k-other-month class to gray out the other days
        }
    }
}

In my example, I need to shade July 3rd, July 4th, and July 5th.

I have an array called _eventDates which is ["7/3/2022", "7/4/2022", "7/5/2022"]

And with no events - this works exactly as expected

When I add 1-2 events, this continues to work

When I add a 3rd event, July 6th is shaded.  It does not matter what combination I use when I use 2, it always shades correctly, once I add that 3rd, it throws it off.

In this particular case, all 3 events on each day have the same information

Start: 07/03/2022 00:00
End: 07/03/2022 01:00

Though when I pull the slotData

Which makes sense as it is a month view, so they'll expand to fill the day

However, in all cases, the slotData has a startDate of Tue Jul 05, and that is what I'm matching on

If I throw a console.log of the startDate before I add the class

console.log(startDate);

currentSlot.addClass('previewDay');

I get this

(it's weird I get 7/3 twice?)

But 7/6/2022 is never there

And finally, here is the html for that row with the extra day shaded

<tr style="height: 186px;">
<td class="previewDay"><span class="k-link k-nav-day">03</span></td>
<td class="previewDay"><span class="k-link k-nav-day">04</span></td>
<td class="previewDay"><span class="k-link k-nav-day">05</span></td>
<td class="previewDay"><span class="k-link k-nav-day">06</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">07</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">08</span></td>
<td class="k-other-month"><span class="k-link k-nav-day">09</span></td>
</tr>

Can someone please help me out with what is going wrong here?

 

Martin
Telerik team
 answered on 13 May 2022
0 answers
850 views

Hi team,

I found that since 2022 R2, the height of a multiselect varies when adding tags. From 30px height with no values to 32px height with one or more tags.

https://dojo.telerik.com/UVUSaSIn

As a result, there is a nasty pumping effect in the page.

Please advise,

 

Best regards,

Laurent.

Laurent
Top achievements
Rank 2
Iron
Iron
 asked on 13 May 2022
1 answer
326 views

Hi team,

I am in the process of changing my theme from less to sass. Since ever, I use the less default theme with some customizations, and I want to replace it with the sass classic main theme which is said to be its sass couterpart.

First, let me say that there are too many differences to state they are siblings!

In less theme, a widget has not a fixed font size and gently inherit from the body. In the sass theme, every widget has a font size of 14px. Why ? This is a big issue for me as kendo widgets must fit into a page whose font size is 13 by default but can be changed.

2 questions:

- is there a way to set default font-size to 13px for all widgets?

- do kendo widgets are able to gently take any font size? I mean without looking ugly.

thanx

Laurent.

 

Neli
Telerik team
 answered on 13 May 2022
0 answers
136 views

Hello,

I am using a Kendo jquery editor in Angular, and I need to trigger a valueChange event for only when the user is entering and changing data, so that the document can be properly marked as dirty.  However, I am finding that the editor is injecting attributes on its own to image tags in the data, and these attributes are then triggering a false valueChange.  The attributes I have seen so far are:

  • aria-describedby
  • class="k-state-border-down"
  • data-role="tooltip"

These attributes are typically added when the image is clicked on, or right-clicked after selection.  The blur event then causes a change event to trigger the valueChange.

Is it possible to suppress a valueChange when Kendo is adding these attributes?  Can you please provide examples of how we might be able to avoid these change events?

Thanks for your help,

Bob

Bob
Top achievements
Rank 3
Iron
Iron
Veteran
 asked on 12 May 2022
2 answers
197 views

Hello,

 

I am trying to bind my treeview to a datasource provided by a controller function, using two examples provided by Telerik, on the web site and at the demos project. My goal is to use the script call from used in one demo with the controller data source used in the other, but I am not being able to do it.

This is the script code:

 <script>
        var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
        homogeneous = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "api/Servicos/Employees",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "SetorId",
                    hasChildren: "hasChildren"
                }
            }
        });

        $("#treeview").kendoTreeView({
            dataSource: homogeneous,
            dataTextField: "Nome"
        });
    </script>

And this is the Controller code:

        [Route("Employees")]
        [HttpGet]
        public JsonResult Employees()
        {
            var result = _unitOfWork.SetorSolicitante.GetAll();
            {
                var employees = from e in result
                                select new
                                {
                                    id = e.SetorSolicitanteId,
                                    Name = e.Nome,
                                    hasChildren = (from q in _unitOfWork.SetorSolicitante.GetAll()
                                                   where (q.SetorPaiId == e.SetorSolicitanteId)
                                                   select q
                                                   ).Count() > 0
                                };

                return new JsonResult(employees.ToList());
            }
        }

My table references itself, where SetorPaiId indicates if the SetorId is a child of it.

Could I get some assistance on that issue?

Regards,

Alexandre

   
Alexandre
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 12 May 2022
1 answer
136 views

I'm using a dropdowntree editor on a grid column. The bound field is a list of objects.

  • How would I prevent the top-level from getting selected when using check boxes with CheckAll true? I only want the second level items.
  • Conversely, how would I select the top level if any of the second level items are checked?

Ex. I would not want 18' checked here, just the two children on the 2nd level:

Editor:

function equipmentEditor(container, options) {
        let ds = new kendo.data.HierarchicalDataSource({
            data: _equipmentTypes,
            schema: {
                model: {
                    children: "Items"
                },
            },
        });

        $("<input data-bind='value: EquipmentTypes'/>")
            .attr("name", options.field)
            .appendTo(container)
            .kendoDropDownTree({
                checkboxes: {
                    checkChildren: true
                },
                checkAll: true,
                autoWidth: true,
                dataTextField: "Description",
                dataValueField: "Code",
                dataSource: ds,
                autoClose: false,
                tagMode: "single",
            });

_equipmentTypes data used in dataSource:

[
    {
        "Code": "17'",
        "Description": "17'",
        "Items": [
            {
                "Code": "T17.DUMP",
                "Description": "17' Dump Trailer",
                "Items": []
            }
        ]
    },
    {
        "Code": "18'",
        "Description": "18'",
        "Items": [
            {
                "Code": "T18.FLAT",
                "Description": "18' Flatbed Trailer",
                "Items": []
            },
            {
                "Code": "T18.TANK",
                "Description": "18' FoodGrade Tank Trailer",
                "Items": []
            }
        ]
    }
]

 

Posted object:

"EquipmentTypes": [
            {
                "Code": "17'",
                "Description": "17'",
                "Items": [
                    {
                        "Code": "T17.DUMP",
                        "Description": "17' Dump Trailer",
                        "Items": [],
                        "id": "",
                        "index": 0,
                        "checked": true,
                        "_level": 1,
                        "_tagUid": "b13353ee-cbd3-4226-8b4c-080d4ea775e4"
                    }
                ],
                "index": 0,
                "expanded": true,
                "checked": true,
                "_level": 0,
                "_tagUid": "c0785273-c8bd-4a18-8598-de5d7ba6c16e"
            },
            {
                "Code": "T17.DUMP",
                "Description": "17' Dump Trailer",
                "Items": [],
                "id": "",
                "index": 0,
                "checked": true,
                "_level": 1,
                "_tagUid": "b13353ee-cbd3-4226-8b4c-080d4ea775e4"
            }
        ],

   
Martin
Telerik team
 answered on 11 May 2022
0 answers
112 views

Hi,

I am trying to build a dashboard with the tile layout and beside standard kendo ui charts and grids, I would like to have a couple of tiles with pre-built angularjs directive components. 

How can I inject the angularjs component and make it bound to data in tilelayout controller?

Html renders from the template, but it is not reachable from the controller, as (I presume it is not bound directly).

Any help would be appreciated.

Thanks,

Vedad

Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
 asked on 11 May 2022
0 answers
112 views

I have a scheduler in month view - the events are extending beyond the day slow, starting with 2 pixels past slot, then 4, then 6, then 8 etc.

 

I've zoomed in and shown with a couple of lines on each one to show how each event is going further and further beyond bounds

 

 

Once I get a lot of data in the scheduler, this starts to look worse and worse.  Any chance there is a fix for this?

Kevin
Top achievements
Rank 2
Iron
Iron
Iron
 asked on 11 May 2022
0 answers
114 views

Hi there,

 

I have integrated Telerik UI into our platform. It worked fine but recently when I try to edit my content in design mode the content is rendered in HTML mode not in text mode as it supposed to(see picture). Any idea as of why this is happening?

 

Best regards,

 

Gilles

GILLES
Top achievements
Rank 1
 asked on 11 May 2022
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
Dialog
Chat
DateRangePicker
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
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?