Telerik Forums
Kendo UI for jQuery Forum
0 answers
10 views

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();

 

xion
Top achievements
Rank 1
 asked on 26 Aug 2021
1 answer
12 views

Hi Team,

 

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

Veselin Tsvetanov
Telerik team
 answered on 26 Aug 2021
1 answer
15 views

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.

Patrick
Telerik team
 answered on 25 Aug 2021
0 answers
16 views

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:

  1. The files are uploaded.
  2. The function waits for a response from the upload.
  3. The saveURL returns a response with an internal fileID and other information. 
  4. The response is saved in a local URL. 
  5. 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

Lee
Top achievements
Rank 1
Iron
Veteran
Iron
 asked on 25 Aug 2021
2 answers
20 views

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

Baxing
Top achievements
Rank 1
Iron
Iron
Iron
 updated answer on 25 Aug 2021
1 answer
28 views

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.

Georgi Denchev
Telerik team
 answered on 25 Aug 2021
1 answer
13 views

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: [....]
            });

Georgi Denchev
Telerik team
 answered on 25 Aug 2021
1 answer
20 views

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!

Patrick
Telerik team
 answered on 24 Aug 2021
1 answer
16 views

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!

J
Top achievements
Rank 1
 updated question on 24 Aug 2021
1 answer
20 views

I am using the AutoComplete widget with a minLength of 4. However, if the user clicks a "GO" button I want to force the search to execute before the minLength is reached. The line where search is called executes without errors while debugging  but does nothing. I am using remote data with server filtering. It works perfectly once the min length is reached. Here is my code: 


<div id="ddPatientSearch" class="dropdown-menu dropdown-menu-left border-dark" aria-labelledby="btnOpenSearch">
    <div class="demo-section k-content" style="width:400px">
        <div class="container-fluid">
            <div class="row">
                <div class="col-10 pl-1 pr-0 text-right">
                    <input id="txtPatientSearch" class="form-control form-control-sm" placeholder="Search patients" />
                </div>
                <div class="col-2 pl-1 pr-0">
                    <button id="btnSearchPatients" type="button">GO</button>
                </div>
            </div>
        </div>
        <div class="demo-hint pl-2 text-dark" style="font-size:12px">Hint: Search by name, subscriber, or MRN</div>
    </div>
</div>


$(function() {
    $("#txtPatientSearch").kendoAutoComplete({
        dataTextField: 'PatName',
        filter: 'contains',
        minLength: 4,
        clearButton: false,
        template: '#= data.PatName # ( #= data.CurrentAge # #= data.Gender # ) <br> Sub. ID: #= data.SubscriberID # <br> MRN: #= data.MRN #',          
        dataSource: {
            serverFiltering: true,
            transport: {
                read: {
                    url: searchUrl,
                    data: function () {
                        return {
                            searchTerm: $('#txtPatientSearch').val(),
                            patientListId: Filters.getSelectedPatientList().value
                        }
                    }
                    
                }
            },
            group: { field: "ResCategory" }
            
        }
    });

    $('#btnSearchPatients').on('click', function () {
        var searchTerm = $('#txtPatientSearch').val();
        $('#txtPatientSearch').data('kendoAutoComplete').search(searchTerm);
    });

    //Keeps the dropdown from closing when the "GO" button is clicked
    $('#ddPatientSearch').click(function (e) {
        e.stopPropagation();
    });
});

Martin
Telerik team
 answered on 23 Aug 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Liu
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
George C.
Top achievements
Rank 2
Iron
Veteran
Top users last month
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Psyduck
Top achievements
Rank 4
Bronze
Bronze
Iron
Liu
Top achievements
Rank 1
Iron
Alex
Top achievements
Rank 1
Veteran
Iron
Iron
George C.
Top achievements
Rank 2
Iron
Veteran