Is there a way to allow users to create new entries for an empty OrgChart? We're looking at adding this widget as a means of allowing our users to create their own organizational charts. This necessarily means that the charts will start as empty - there will be no data in them to begin with. And it seems like this is unintended behavior for the widget? The only way I can find to allow for the creation of an entry into the chart is to forcibly have a fake dummy record from which the "Create" action can be invoked. An empty chart doesn't have a toolbar at all. I'd create my own toolbar, but I cannot find anything in the API that allows me to invoke the create modal via JS.

We're using the JQuery version of Kendo UI. Thanks.

I've never really paid attention to this but got curious when trying to debug something.

What's the difference between cdn.kendostatic.com and kendo.cdn.telerik.com?

In some Telerik documentation there are references to kendo.cdn.telerik.com.  When I created a Telerik app in VS 2022, most references use cdn.kendostatic.com.

Should one be used over the other?

Hi,

We've initialised a TextArea using the following code:

$("#textArea").kendoTextArea({
	label: "Label",
	rows: 4,
	maxLength: 1000
});

And try to clear it using the following code:

const textArea = $("#textArea").kendoTextArea().data("kendoTextArea");
textArea.value("");
textArea.trigger("change");

It works but it looks like it resets any configuration you set like rows and maxLength and adds extra markup.

Here's the markup before the clear:

<span class="k-input k-textarea k-input-solid k-input-md k-rounded-md k-resize-none" style=""><textarea id="textbox-notes" data-role="textarea" aria-disabled="false" maxlength="1000" rows="4" class="!k-overflow-y-auto k-input-inner" autocomplete="off" style="width: 100%; resize: none;"></textarea></span>

And after:

<span class="k-input k-textarea k-input-solid k-input-md k-rounded-md k-resize-none" style=""><span class="k-input k-textarea !k-overflow-y-auto k-input-inner k-input-solid k-input-md k-rounded-md k-resize-none" style="width: 100%; resize: none;"><textarea id="textbox-notes" data-role="textarea" aria-disabled="false" rows="1" class="!k-overflow-y-auto k-input-inner" autocomplete="off" style="width: 100%; resize: none;"></textarea></span></span>

Note the rows have reset to 1 and maxlength is missing. Also, there is an extra SPAN around the original SPAN and TEXTAREA. We tried setting the properties manually after the change trigger using:

$("#textArea").prop("rows", "4");
$("#textArea").prop("maxlength", "1000");

This works okay but obviously doesn't fix the extra markup.

Is this the correct way to clear a TextArea? Or do we just reset the value in jQuery directly?

Thanks

While following the telerik example of how to set the position of the x and x axis labels on a chart (link below) Visual Studio gives me an error "'position' does not exist in type 'ChartYAxisItemLabels'".

 I checked the kendo.all.d.ts (version v2023.1.314) file that is referenced by my project and the interface is defined as follows:

    interface ChartYAxisItemLabels {
        background?: string | undefined;
        border?: ChartYAxisItemLabelsBorder | undefined;
        color?: string | undefined;
        culture?: string | undefined;
        dateFormats?: ChartYAxisItemLabelsDateFormats | undefined;
        font?: string | undefined;
        format?: string | undefined;
        margin?: number | ChartYAxisItemLabelsMargin | undefined;
        mirror?: boolean | undefined;
        padding?: number | ChartYAxisItemLabelsPadding | undefined;
        rotation?: number | ChartYAxisItemLabelsRotation | undefined;
        skip?: number | undefined;
        step?: number | undefined;
        template?: string|Function | undefined;
        visible?: boolean | undefined;
        visual?: Function | undefined;
    }

Adding the following line to the interface resolves the VS error and allows the TypeScript to compile and, when implemented, does move the axis labels to the "start" position just like in the telerik dojo example.

        position?: string | undefined;

My question is; Why is the position setting not provided on the TypeScript interface to begin with?

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/xaxis.labels#xaxislabelsposition

I would like an editing  mask for phone numbers, along the lines of
"+00 0000 000000" or "+00-0000-000000".

The leading + to be stored as part of the data, but the spaces or hyphens are not.

The only characters that should be typed are digits.

There is unfortunate a variation in how different countries display numbers.

I have an ASP.Ajax tabstrip with the firs tab linked to another page, all other tabs with html code on multipage.

I'm not able to redirect on the first tab directly to other "Main.aspx" page.

What I'm making wrong?

    <telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
        SelectedIndex="1">
        <Tabs>
            <telerik:RadTab Text="People List" runat="server" NavidateUrl="Main.aspx" Target="_blank">
            </telerik:RadTab>
            <telerik:RadTab Text="Registry " runat="server" Selected="True">
            </telerik:RadTab>
            <telerik:RadTab Text="Notes" runat="server">
            </telerik:RadTab>
            <telerik:RadTab Text="Recipes" runat="server">
            </telerik:RadTab>
            <telerik:RadTab Text="Files" runat="server">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <br />
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="1">
        <telerik:RadPageView runat="server" ID="RadPagePeopleList"></telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageRegistry">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView runat="server" ID="RadPageNotes">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageRecipes" runat="server">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
        <telerik:RadPageView ID="RadPageFiles" runat="server">
            <div>
                <div class="container-fluid">
				...
                </div>
            </div>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

Thanks

Renato

Hi

Is there a recommended way of updating an expansionpanel's subtitle on client side? I am able to change the subtitle by using selectors, but I would prefer a better way.

I was trying to find something along the lines of:

$("#expansionPanel").data("kendoExpansionPanel").subTitle("new subtitle");

My workaround is this:

$("#form> div:nth-child(1) > div.k-expander-header > div.k-expander-sub-title").text("new subtitle");

Best regards

H-P

I have a grid with editable cell inside bootstrap modal pop up, all text and dropdown cell works fine except for the number field.

When clicked on the number cell the input opens but value is showing inside, value is updated and reflects back on the grid, applies all the validation but just value is not showing the input field.

var _dataSource = new kendo.data.DataSource({
                    data: localityGridDataSource,
                    sort: { field: 'nodeLocalitySequence', dir: 'asc' },
                    autoSync: true,
                    schema: {
                        model: {
                            id: 'localityCode',
                            fields: {
                                localityCode: { editable: false },
                                localityTitle: { editable: false },
                                nodeLocalitySequence: { type: 'number', validation: { required: true, min: 1, max: 999999 } },
                                nodeLocalityType: { defaultValue: { nodeLocalityTypeValue: 'I', nodeLocalityTypeName: app.localize('InsideGrid') } },
                                nodeLocalityExternalNote: { type: 'text' }
                            }
                        }
                    }
                });

                _LocalitiesGrid.kendoGrid({
                    dataSource: _dataSource,
                    editable: true,
                    noRecords: true,
                    edit: onGridEditing,
                    remove: clearLocalitiesAudioMessage,
                    columns: [
                        { field: 'localityTitle', title: app.localize('Locality') },
                        { field: 'nodeLocalitySequence', title: app.localize('Order') },
                        { field: 'nodeLocalityType', title: app.localize('IncludeType'), editor: nodeLocalityTypeDropDownEditor, template: '#=nodeLocalityType.nodeLocalityTypeName#', width: '250px' },
                        { field: 'nodeLocalityExternalNote', title: app.localize('Notes') },
                        { command: ["destroy"], width: '125px' }
                    ]
                });

The URL that opens when you visit https://demos.telerik.com/kendo-ui/ > Hybrid UI > Launch Demos fails to load with the following exception in the console:

kendo.all.js:318535 Uncaught TypeError: n.headerTemplate is not a function
    at Object.<anonymous> (kendo.all.js:318535:21)
    at Object.render (kendo.all.js:318535:21)
    at init.replaceGrouped (kendo.all.js:318535:21)
    at init.refresh (kendo.all.js:318535:21)
    at init._refreshHandler (kendo.all.js:318535:21)
    at init.trigger (kendo.all.js:318535:21)
    at init._process (kendo.all.js:318535:21)
    at init.success (kendo.all.js:318535:21)
    at success (kendo.all.js:318535:21)
    at n.success (kendo.all.js:318535:21)

Does the Hybrid UI work for version 6.2.0?

P.S. none of the tags are relevant but it is a required field to submit a new thread so I just picked "templates" since the console error has the keyword template in it. Feel free to modify it.

Hi Guys,

Have just been reading through the Kendo UI for jQuery R2 2023 Roadmap and the following statements from the 'Content Security Policy (CSP) compliance' section caught my eye

    - With R2 2023, we plan to replace all font icons internally used with SVG icons in order to address the font-src directive;
    - Further in 2023, we plan to detach font-related CSS from Kendo themes in order to remove the need for the font-src directive.

    Does this mean

    a) SVG icons will become the default set.
    b) Can this default still be overridden via the command - kendo.setDefaults('iconType', 'font'); so that all controls still render Font icons instead of SVGs.

    or

    c) Font Icons are being completely removed from Kendo UI for jQuery.

    Please could you advise on the above because if the answer is c) this will not be a 'Improvement' for me and I will have to make major changes to my usage and documentation to accommodate this change going forward.

    Regards
    Alan