Questions on Kendo UI for jQuery Forum

1 answer

129 views

jQuery chart.refresh() clears data in series - complex objects

Hi,

I met quite strange behaviour. I have my kendo chart defined with complex (= not just array of numbers) object in serie.data. It's defined like this:

$("#chart2").kendoChart({
        seriesDefaults: {
            categoryField: "endTimestamp",
            field: "value",
            type: "line"
        },
        categoryAxis: {
            type: "date",
            baseUnit: "minutes",
            baseUnitStep: 15,
        },
        series: [{
            name: "First serie",
            data: [
                {
                    value: 150,
                    startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
                },
                {
                    value: 162,
                    startTimestamp: new Date(2021, 8, 1, 0, 15, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 30, 0)
                }
            ]
        }],
    });

Now, when I try to add some data into the serie and refresh it by

var chart = $("#chart").data("kendoChart");
chart.options.series[0].data.push({
                    value: 110,
                    startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
                });
chart.refresh();

or when I try to add new serie and refresh it

        var chart = $("#chart").data("kendoChart");
        chart.options.series.push({
            name: "1-1:1.9.0",
            data: [
            {
                value: 110,
                startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
                endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
            }]
        });

all data in series are empty and thus no data is shown in the chart.

I tried also to call chart.redraw(), but this is useless for me as I need to add values into serie and redraw does not cause the chart to wide to next values, but refresh does.

Interesting thing is that when I try the same on serie with simple number array (and thus no 'field' in 'seriesDefaults'), everything works fine:

    $("#chart").kendoChart({
        seriesDefaults: {
            type: "line"
        },
        series: [{
                data: [1, 2, 3]
            }],
    });

        var chart = $("#chart").data("kendoChart");
        chart.options.series.push(
            {
                data: [7, 8, 9, 10]
            }
        );
        chart.refresh();

        var chart = $("#chart").data("kendoChart");
        chart.options.series[0].push(5);
        chart.refresh();

Any help would be appreciated.

J

Charts

answered on 27 Aug 2021

0 answers

133 views

Kendo Media Player making multiple request

Hi, Im using the kendo media player inside a kendo window for playing a video. I'm able to get the video and play it but the problem is when I check the Chrome devTools, I dont know why there is multiple request been made to the backend for the video. In fact I just click once.

screenshot

Below is the code:

var html = "<div id='dvPlayer' style='width:99%;height:99%;'></div>";
var mediaWind = $("<div id='mediawindow' />").kendoWindow({
        title: "Media Player",
        animation: false, width: "90%", height:"90%",
        resizable: false, modal: true, draggable: true,
        close: function ()
        {
                  this.destroy();
        }
}).data('kendoWindow').content(html);
                                  
var dvPlayer = $("#dvPlayer").kendoMediaPlayer({
        autoPlay: false,
        autoRepeat: false,
        navigatable: true,                       
}).data("kendoMediaPlayer");                          

 dvPlayer.media({
        title: filename,
        source: urlToBackend
});

mediaWind.center().open();

MediaPlayer

asked on 26 Aug 2021

1 answer

162 views

kendo localization & aria attributes

Hi Team,

does kendo support localization for the aria attributes as well? aria-label, aria-describedby etc.

General Discussions

Localization

answered on 26 Aug 2021

1 answer

127 views

Bar charts: Issues with label if category contains ampersand (&)

Hi,

I am creating a stacked bar chart with custom labels on the category axis.

If the category includes an ampersand the position of the label will be broken because there is too much space between label and chart axis. This issue does not occur when using the default label.
Encoding the character doesn't help.

Please find a simple reproduction of the issue in my dojo below. I use the latest version of Kendo (2021.2.616)

https://dojo.telerik.com/AloGIgil

Thanks in advance for any help.

Charts

answered on 25 Aug 2021

0 answers

1.2K+ views

How to await response from upload

I have a form that accepts text inputs and a file. The kendo upload component is async so I can take advantage of the drag and drop feature. I want the user to be able to upload multiple files. When the user has finished filling out the form and selecting their files the user clicks a submit form button and the following should happen:

The files are uploaded.
The function waits for a response from the upload.
The saveURL returns a response with an internal fileID and other information.
The response is saved in a local URL.
This is then added to an object containing the rest of the form field's values and a second ajax call is made to upload the entire form's data including the fileID's to a database.

Here is a Dojo I started: https://dojo.telerik.com/@dojolee/EfiXIbeH

Dojo

Upload

asked on 25 Aug 2021

2 answers

427 views

Hide button for show list of MultiColumnCombobox

Hello

I want to hide right button of MultiColumnCombobox(Please see in attach image). It's similar to autocomplete, but uses the property of multi-column of table data.

How to do this?

Thank you

MultiColumnComboBox

updated answer on 25 Aug 2021

1 answer

1.3K+ views

Update all rows inside one column

Hi, I would like to update all rows inside one column. Each column would have its own input which will update the rest of the rows. Currently I have an existing edit batch table. I was wondeing if it was possible to:

1. select a column (maybe with checkbox)

2. Row 1 is empty, however will trigger a function

3. This function takes the input value (which the user will type) of row 1 cell and populate this value for every row inside the that column.

COL 1 || COL 2

---------------

row 1 || row 1

---------------

row Z || row Z

After this the user should still be able to activate the cancel button and the original data appears back in the table. The table data should not be saved unless the saved button is pressed.

I've tried a fucntion using a button where we would execute row.set(column, value), however this would refresh the grid table and the original data would reappear.

Grid

answered on 25 Aug 2021

1 answer

298 views

Grid paging with custom api

Hello,
I need to use a prebuild api for load paged data on telerik grid.

For do that in the DataSource.Transport.Ready(options) function I need to retrieve the PageNumber and PageSize value but the options.data.pageSize and options.data.page result undefined

Also when I receive the response I need to set the new loaded page information (loaded page number) to the grid.

The code below works (retrieve and display data) but in the request url the page paramenter are undefined. In the botton page bar restult "NaN - NaN di 47 elementi"

Where I found the structure of the options parameter of the read function ? Also where I found the object expected by the option.success function?

gridSource = new kendo.data.DataSource({
                transport: {
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 50,
                    read: function (options) {
                        console.log(JSON.stringify(options)) // show {"data":{}}
                        let u = "<My URL>?search=" + encodeURIComponent(<SearchValue>) + "&pnum=" + encodeURIComponent(options.data.page) + "&psize=" + encodeURIComponent(options.data.pageSize);
                        const instance = axios.create({
                            baseURL: 'my url',
                            timeout: 1000,
                            headers: { 'Authorization': 'Bearer  Token' }
                        });
                        instance.get(u)
                            .then((response) => {
                                let res = response.Data
                                // res is
                               // {"PageNumber":1,"PageSize":50,"HaveOtherPage":false,"TotalRecord":47,"Data":[...]}

                              // options.success(res)  run the catch function and return an error who is empty
                              
                               options.success(res.Data);
                            })
                            .catch((error) => {
                                alert("ERRORE");
                                options.error(error)
                            })

                    },
                    schema: {
                        data: function (response) {
                            return response.Data; 
                        },
                        total: function (response) {
                            return response.TotalRecord; 
                        }
                    }
                }
            });
            $('#grid').kendoGrid({
                dataSource: gridSource,
                scrollable: true,
                filterable: true,
                pageable: true,
                columns: [....]
            });

Data Source

Grid

answered on 25 Aug 2021

1 answer

898 views

Wizard navigation and validation

Hello!

Kendo Wizard always validates the step forms when navigating between them, even if you press "Previous".

This can be seen in the official sample here:

https://demos.telerik.com/kendo-ui/wizard/index

If you are on Step 2 and press "Previous", you are required to input all data before going back to Step 1.

How can I change this? I want to validate the current step form content only if you press "Next", and allow the user to go back without inserting data if he presses "Previous".

Thanks!

Form

Validation

Wizard

answered on 24 Aug 2021

1 answer

564 views

Chart in HTML (k-options, k-rebind, ...)

Hello,

I found this tutorial how to create chart in HTML with jQuery. In our old system we use HTML notation for chart definition like this:

<div id="chart" kendo-chart="chart" k-options="model.chartOptions" k-rebind="model.chartOptions.series" k-on-series-click="events.click(kendoEvent)" ng-mouseleave="events.hover({})"></div>

In controller (we use AngularJS) the $scope.model variable is set like this:

angular.merge($scope.model, {
    chartInfo: {},
    chartOptions: {
        seriesDefaults: {
            ...
        },
        legend: {
            position: "bottom"
        },
        valueAxis: {
            visible: true,
            labels: {
                template: "#= kendo.toString(value, 'n') #"
            },
            min: null
        },
        chartArea: {
            height: 625
        },
        categoryAxis:{},
        transitions: false,
        series: {
            data: []
        },
    }
});

Series property is filled from HTTP request result:

$scope.model.chartOptions.series = $scope.model.values;

The problem is that this way of filling series and watching them via k-rebind results in enormous delay (about 30 seconds), because we are loading cca 10 000 items into the chart. For some reason when the $apply and $digest functions are run because the series property has changed, there are two copyings of whole data (including the 10-thousand-item array) processed.

I think I cannot do anything about the middle part (chart rendering), but suppose I can get rid of the two copy parts (before and after rendering) which are probably caused by the 'watcher' - k-rebind. I couldn't check this information because I haven't found any documentation about this, all tutorials are for jQuery $('#chart')....

So can I do anything about it? I tried also filling series in jQuery style and refreshing chart after loading data from BE, but without success...

Thanks for any help.

UPDATE

So, I switched to 'really jQuery' way and my testing code now looks like this:

<div id="chart2"></div>

$("#chart2").kendoChart({
        title: { text: "Some title" },
        seriesDefaults: {
            categoryField: "endTimestamp",
            field: "value",
            type: "line"
        },
        valueAxis: {
            visible: true
        },
        categoryAxis: {
            type: "date",
            baseUnit: "minutes",
            baseUnitStep: 15,
        },
        series: [{
            name: "First serie",
            data: [
                {
                    value: 150,
                    startTimestamp: new Date(2021, 8, 1, 0, 0, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 15, 0)
                },
                {
                    value: 162,
                    startTimestamp: new Date(2021, 8, 1, 0, 15, 0),
                    endTimestamp: new Date(2021, 8, 1, 0, 30, 0)
                }
            ]
        }],
    });

Everything shows fine. But when I try to add another serie into chart

        chart2.options.series.push({
            name: "Second serie",
            data: [
            {
                value: 110,
                startTimestamp: newDate(2021, 8, 1, 0, 0, 0),
                endTimestamp: newDate(2021, 8, 1, 0, 15, 0)
            },
            {
                value: 90,
                startTimestamp: newDate(2021, 8, 1, 0, 15, 0),
                endTimestamp: newDate(2021, 8, 1, 0, 30, 0)
            },
            {
                value: 100,
                startTimestamp: newDate(2021, 8, 1, 0, 30, 0),
                endTimestamp: newDate(2021, 8, 1, 0, 45, 0)
            }]
        });

and refresh the chart (the 'series' array contains two items, as it should)

chart2.refresh();

the 'data' property in both series is suddenly empty and so nothing is shown.

I tried also chart2.redraw(), but this one is useless as it does not show the third value in "Second serie", it shows just 110 and 90. And I really need to add data to series and to show all of them.

I'm now looking at 'dataSource' property of kendo chart, but haven't found any way how to assign multiple series into it (it's not in the tutorial).

Thanks for help!

Charts

updated question on 24 Aug 2021