Questions on Kendo UI for jQuery Forum

1 answer

135 views

How to create a personnalized Shape and modify content easily ?

Hello,

I'm creating a diagram. I've done some research on how to create a custom shape, but I'm having a few problems on dynamically modifying the data of the various elements present in the shape.

1) Firstly, I've understood the code bellow that allows me to create a custom shape:

let newShape = function() {
            let dataviz = kendo.dataviz
            let g = new dataviz.diagram.Group()
            let dataItem = options.dataItem

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: 'linear',
                        stops: [{
                            color: dataItem.colorScheme,
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: dataItem.colorScheme,
                            offset: 1,
                            opacity: 1
                        }]
                    }
                }
            }))
            
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.name,
                x: 20,
                y: 20,
                fill: '#fff'
            }))
            
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.props,
                x: 20,
                y: 40,
                fill: '#fff'
            }))
            return g
}

However, I'm having trouble dynamically modifying the value of a TextBlock.

Which field do I need to access, after retrieving the shape via diagram.shapes[i] , to be able to modify the "text" field of a TextBlock? Or, more generally, how can I easily retrieve an element (TextBlock, etc.) from a compound shape?

I've tried accessing various fields in the shape object referring to the TextBlock element and then calling shape[i].redraw( ) / .redrawVIsual( ), but no shape is updated.

2) Secondly, what kind of components can be added to the Group ? My goal is to add a progress bar into my shape, but I don't think that's possible. Is there a list of elements (TextBlocks, ...) that can be appended to Group ? Or any idea to have a progress bar in a shape ? Maybe using the progressbar component and attach a progress bar to each shape ?

Thanks in advance,

Best,

VB

Diagram

ProgressBar

answered on 10 Aug 2023

1 answer

133 views

Grid with locked columns and dropdown panel

I have a need for a kendo grid with locked columns and a dropdown panel. I tried accomplishing this using the kendo grid's locked and detail template but this is not supported. I need to have a grid with 3 columns locked on the right that are visible regardless of screen size. These columns have the dropdown arrow, an icon, and a name. The rest of the columns should scroll horizontally when there are too many to fit on the screen. There should be a dropdown panel that opens when the user clicks the expand button. This panel should not scroll horizontally and should always be aligned with the left edge of the grid (not the left edge of the scrollable content). I need a grid because the user wants to sort the rows and search. They also want to see the data in tabular format. How would I accomplish this given that Telerik has decided not to support having locked or sticky columns and detail templates in the same grid.

Grid

answered on 08 Aug 2023

1 answer

217 views

Getting kendoDateTimePicker is not a Function in Console when rendering during $(document).ready()

When the following code is run, I get an error in the console indicating that .kendoDateTimePicker is not a function, but the controls render when the convertNewPickerControl() method is called outside the $(document).ready() function.

I also get the same error when I try to convert cloned inputs dynamically (e.g., when a user presses the "Add" button.

The following is the code for the entire page (I'm getting the same issue in our product using similar code).


<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/kendo/2022.3.1109/kendo.all.min.js"></script>

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/styles")
@Styles.Render("~/Content/kendo/css")

<style>
    .row {
        padding-top: 12px;
        padding-bottom: 12px;
    }
</style>

<main>

    <div id="cloneDiv" style="display:none;">
        <div id="row0" class="row">
            <div class="col-md-1 form-label">Date/Time:</div>
            <div class="col-md-5">
                <input id="dateTimePickerFrom_row0" />
            </div>
            <div class="col-md-5">
                <input id="dateTimePickerTo_row0" />
            </div>
            <btn id="button_row0" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>

    <div id="parentDiv">
        <div id="row1" class="row">
            <div class="col-md-3">
                <input id="dateTimePickerBase_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerFrom_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerTo_row1" class="date-time-picker" />
            </div>
            <btn id="button_row1" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>
</main>

<script>

    var row = parseInt(1);

    console.log('converting before document ready...');
    convertNewPickerControl("dateTimePickerBase_row1")

    $(document).ready(function () {
        console.log('converting within document ready...');
        convertNewPickerControl("dateTimePickerFrom_row1");
    });

    console.log('converting after document ready...');
    convertNewPickerControl("dateTimePickerTo_row1");

    function convertNewPickerControl(sender) {

        var savedStartDate = new Date();

        $("#" + sender).kendoDateTimePicker({
            format: "MM/dd/yyyy hh:mm:ss tt",
            value: savedStartDate,
            min: savedStartDate
        });
        console.log('...successfully converted.');
    }

    function addNewRow(sender) {

        var sourceRow = $('#row0');
        var newRow = $('#row' + row);
        var currentRowNumber = 'row' + row;
        var regex = new RegExp(currentRowNumber, "g");
        var proxyListRegex = new RegExp(/\.ProxyList\[\d+\]/g);
        var _rowRegex = new RegExp(/\_row\d+/g);

        var clonedRow = $('<div>').append(sourceRow.clone()).html().replace(regex, 'row' + (parseInt(row) + 1)).replace(proxyListRegex, '.ProxyList[' + row + ']').replace(_rowRegex, '_row' + (parseInt(row) + 1));

        clonedRow = clonedRow.replace("row0", "row" + (parseInt(row) + 1));
        newRow.after(clonedRow);

        /* convert new inputs to datetimepickers */
        var newFromControl = "dateTimePickerFrom_row" + row;
        var newToControl = "dateTimePickerTo_row" + row;

        convertNewPickerControl(newFromControl);
        convertNewPickerControl(newToControl);

        row = (parseInt(row) + 1);

    }
</script>

As can be seen in the console, the first and last calls to convertNewPickerControl() work, but the call within $(document).ready() does not (and neither do the calls made to convertNewPicker() in addNewRow() -- not shown below):

So...I know $(document).ready is executing as the console.log entry is noted. Why would it be working outside $(document).ready() but not within it (or via the call when adding a new row)?

Date/Time Pickers

answered on 08 Aug 2023

1 answer

105 views

How can I set a date as a category for pie charts that adjusts automatically?

This is the current code and it is not working the way it does for bar charts, it is populating every date onto the graph and not aggregating itself according to months

series: [
                    {
                        type: "pie",
                        field: "value",
                        categoryField: "category",
                        aggregate: "sum",
                        padding: 10,
                        overlay: {
                            gradient: "none",
                        },
                        categoryAxis: {
                            baseUnit: "months",
                            maxDivisions: 5,
                            rangeLabels: {
                              visible: true,
                              format: "M"
                            },
                            labels: {
                              format: "d-M"
                            }
                        },]

This is what I need it to look like:

Charts

DateInput

answered on 08 Aug 2023

1 answer

96 views

Apply same function to all dropdownlists

I want to create a global onOpen function that will apply to all dropdownlists without the need to manually attach it to each one's open option on the site. For example, I want to hide the optionLabel if it has a class of disabled in it but I don't want to have to manually attach it to each dropdownlist created.

                    open: function () {
                        let optionLabel = this.element.getKendoDropDownList().list.find(".k-list-optionlabel");
                        let isDisabled = $(optionLabel).find(".disabled").length > 0;
                        if (isDisabled) {
                            $(optionLabel).hide();
                        }
                    },

I know I could do something like open: onOpen, but I don't want everyone to have to remember to do that on each dropdown list.

DropDownList

answered on 07 Aug 2023

1 answer

607 views

KendoLicensing.setScriptKey... security breach ?

I followed the tutorial to include our Kendo Telerik license key in our application. But I'm a bit confused when exposing this key via console.

Licensing

answered on 07 Aug 2023

1 answer

156 views

Grid to PDF Export - wrong page breaks after resizing columns

Hi

I export various grids to pdf using some page templates for headers and footers.

This works basically fine but if I fiddle around resizing the columns manually, the pdf starts to break the grid content at the wrong place and it seems to ignore the margins set as options.
Attached you find three examples, one with columns in original width, another one with resized columns, the pdf still applying bottom-margin, the third one with resized columns, the pdf now ignoring the bottom-margin.

Is this a know problem or do I miss an important setting?

Grid

updated answer on 04 Aug 2023

0 answers

133 views

dataSource of components, data from parent ifram is not working in child ifram, cross origine issue.

Download kendo ui trial and in exmaple i just try following code

place these two file at "Kendo 2023\examples\dropdownlist" and run you will find "Blocked a frame with origin "null" from accessing a cross-origin frame."

parent.html is as below

<html lang="en">

<head>
<title>Parent Frame</title>
<script>
___data = [
{ CityID: 1, CityName: "Lisboa" },
{ CityID: 2, CityName: "Moscow" },
{ CityID: 3, CityName: "Napoli" },
{ CityID: 4, CityName: "Tokyo" },
{ CityID: 5, CityName: "Oslo" },
{ CityID: 6, CityName: "Pаris" },
{ CityID: 7, CityName: "Porto" },
{ CityID: 8, CityName: "Rome" },
{ CityID: 9, CityName: "Berlin" },
{ CityID: 10, CityName: "Nice" },
{ CityID: 11, CityName: "New York" },
{ CityID: 12, CityName: "Sao Paulo" },
{ CityID: 13, CityName: "Rio De Janeiro" },
{ CityID: 14, CityName: "Venice" },
{ CityID: 15, CityName: "Los Angeles" },
{ CityID: 16, CityName: "Madrid" },
{ CityID: 17, CityName: "Barcelona" },
{ CityID: 18, CityName: "Prague" },
{ CityID: 19, CityName: "Mexico City" },
{ CityID: 20, CityName: "Buenos Aires" }
]
</script>
</head>

<body>
<iframe src="./child.html" style="height: 100vh;width: 100vw;border: 0;"></iframe>
</body>

</html>

and child.html is as below

<!DOCTYPE html>
<html lang="en">

<head>
<title>Overview</title>
<meta charset="utf-8">
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../../styles/default-ocean-blue.css" rel="stylesheet">
<script src="../../js/jquery.min.js"></script>
<script src="../../js/jszip.min.js"></script>
<script src="../../js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>

</head>

<body>
<div class="k-d-flex k-flex-1 k-flex-col k-px-8 k-pt-7">
<div class="kd-header k-d-flex k-gap-8 k-mb-6 k-justify-content-stretch">
<div class="kd-header-core k-d-flex k-flex-col">
<h2 class="k-h4 k-mt-0 k-mb-4 k-opacity-30">Time to order food</h2>
<span class="k-d-inline-block">Find restaurants in your area</span>
<input id="kd-place-chooser" />
<div class="k-w-24 k-h-4 k-mt-5 k-skeleton k-opacity-40 k-rounded-md"></div>
<div class="k-w-full k-h-8 k-mt-1.5 k-mb-auto k-skeleton k-opacity-30 k-rounded-md"></div>
<div class="kd-actions k-d-flex k-mt-5 k-justify-content-end">
<div class="k-w-20 k-h-8 k-skeleton k-opacity-40 k-rounded-md"></div>
<div class="k-w-20 k-h-8 k-ml-4 k-skeleton k-opacity-50 k-rounded-md"></div>
</div>
</div>
<div
class="kd-image-wrapper !k-d-flex k-justify-content-center k-align-items-center k-skeleton k-opacity-10 k-border k-border-secondary k-border-solid k-rounded-md">
<span class="k-icon k-i-image k-opacity-70"></span>
</div>
</div>
<div class="kd-content k-mt-2 k-grow k-skeleton k-opacity-30 k-rounded-tl-md k-rounded-tr-md"></div>
</div>

<style>
.kd-image-wrapper>.k-icon {
font-size: 72px;
}

/* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
@media (max-width: 678px),
(min-width: 821px) and (max-width: 1038px),
(min-width: 1241px) and (max-width: 1328px) {
.kd-image-wrapper {
display: none !important;
}

.kd-actions div {
width: auto;
flex-grow: 1;
}

.kd-content {
margin-top: 24px;
}
}

/* Breakpoint for full screen demo: max:359px */
@media (max-width: 476px) {
.kd-header {
height: 100%;
}

.kd-header-core {
display: flex;
flex-direction: column;
height: 100%;
}

.kd-actions {
flex-direction: column;
}

.kd-actions>div {
margin-left: 0;
margin-top: 8px;
}

.kd-content {
display: none;
}
}
</style>

<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
// data: Array.from(parent.___data, (item) => Object.assign({}, item)),
data: parent.___data,
sort: { field: "CityName", dir: "asc" }
});

$("#kd-place-chooser").kendoDropDownList({
filter: "contains",
crossOrigin: "anonymous",
optionLabel: 'Please select city...',
dataTextField: "CityName",
dataValueField: "CityID",
dataSource: dataSource
});
});
</script>
</body>

</html>

Data Source

DropDownList

updated question on 04 Aug 2023

2 answers

592 views

DatePicker Validator Required Not Working

I have a kendo datepicker that is required, however when it is not filled out and the dateInput format is set to true, the required message does not display.

Here is a dojo

https://dojo.telerik.com/ucOdILoT

Date/Time Pickers