Questions on Kendo UI for jQuery Forum

1 answer

751 views

im trying to fetch data from some localhost api and show it on a kendo grid, but nothing happens, dont know where is the mistake:

In Postman i get results from this localhost GET

Only error showed is cookied related

Thanks in advance!

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <script src="//kendo.cdn.telerik.com/2016.1.112/js/pako_deflate.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
    

    <div id="example">
        <div id="grid"></div>
        
        
        <script>
            var inputLe = localStorage.getItem("storageLe");
            $(document).ready(function () {

                var gridDataSource = new kendo.data.DataSource({
                transport: {
                    read:{
                        url: "localhost:3000/api/chirps",
                        dataType: "json",
                        type: "GET"
                    }
                },
                pageSize: 20,
                serverFiltering : true,
                        filter : [
                            {field: "Legal_Entity", operator: "eq", value: "3800" },
                    ]
                });

                $("#grid").kendoGrid({
                    datasourece: gridDataSource,
                    height: 550,
                    groupable: true,
                    sortable: true,
                    pageable: {
                        refresh: true,
                        pageSizes: true,
                        buttonCount: 5
                    },
                    columns: [{
                        field: "Inv_Number",
                        title: "Invoice Number"
                    }, {
                        field: "Inv_Date",
                        title: "Invoice Date"
                    }, {
                        field: "Vat_Amout",
                        title: "Vat Amount"
                    }, {
                        field: "Net",
                        title: "Net"
                    }, {
                        field: "Category",
                        title: "Category"
                    }, {
                        field: "Commen",
                        title: "Comment"
                    }, {
                        field: "Legal_Entity",
                        title: "Lega Entity"
                    }, {
                        field: "Quart",
                        title: "Quarter"
                    }, {
                        field: "Confirmed",
                        title: "Confirmed"
                    }, {
                        field: "Stat",
                        title: "Status"
                    }

                    ]
                });
            });
            window.localStorage.removeItem("storageLe");
        </script>
    </div>
        
    
    </body>
</html>

Data Source

Grid

answered on 01 Sep 2021

1 answer

1.3K+ views

DatePicker - Date text disappears when using next/prev buttons

I'm using the DatePicker widget in conjunction with some next/prev buttons for switching the dates. I'm also setting a two-week window around the current date. The next/prev buttons are disabled accordingly when you select a date at either end of the window. The bug is - when future date is selected from the calendar, and then one of the next/prev buttons are used, the date text disappears. And after the first time the bug occurs, it will sometimes happen for previous dates too. Below is a working example of my code. Any help is appreciated!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
  
    <button id="btnPrevDate" type="button">prev</button>

    <div class="demo-section k-content d-inline-block">
         <input id="scheduleDatePicker" title="datepicker" class="w-100" />
    </div>

    <button id="btnNextDate" type="button">next</button>

    <script>
        $(document).ready(function(){
             var currentDate = new Date();
    	     var selectedDate = new Date();
             var startDate = new Date();
    	     var endDate = new Date();

    	     selectedDate.setDate(currentDate.getDate());
    	     startDate.setDate(currentDate.getDate() - 7);
    	     endDate.setDate(currentDate.getDate() + 7);
          
             $("#scheduleDatePicker").kendoDatePicker({
                value: selectedDate,
        	min: startDate,
        	max: endDate,
        	change: function (e) {
            	    var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');

            	    selectedDate.setDate(datepicker.value().getDate());

                    if (selectedDate.getDate() == endDate.getDate()) {
                         $('#btnNextDate').prop('disabled', true);
                     } else if (selectedDate.getDate() == startDate.getDate()) {
                         $('#btnPrevDate').prop('disabled', true);
                     }

                     if (selectedDate.getDate() != endDate.getDate()) {
                         $('#btnNextDate').prop('disabled', false);
                     }
                     if (selectedDate.getDate() != startDate.getDate()) {
                         $('#btnPrevDate').prop('disabled', false);
                     }

                }
    	     });
          
             $('#btnPrevDate').on('click', function () {
                var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
                selectedDate.setDate(selectedDate.getDate() - 1);
                datepicker.value(selectedDate);

                $('#btnNextDate').prop('disabled', false);

                if (selectedDate.getDate() == startDate.getDate()) {
                    $(this).prop('disabled', true);
                }

             });
    
             $('#btnNextDate').on('click', function () {
                var datepicker = $('#scheduleDatePicker').data('kendoDatePicker');
                selectedDate.setDate(selectedDate.getDate() + 1);
                datepicker.value(selectedDate);

                $('#btnPrevDate').prop('disabled', false);

                if (selectedDate.getDate() == endDate.getDate()) {
                    $(this).prop('disabled', true);
                }

             });
        });
    </script>
</body>
</html>

Date/Time Pickers

answered on 31 Aug 2021

1 answer

107 views

internalization lagging

Hi team,

Seems kendo.messages.fr-FR.js (19 KB) has been abandoned since the dawn of time!! Compared to kendo.messages.en-US.js (39 KB).

Seriously?? Many many translations are missing, at least half.

Could you please update that please?

I wouldn't blame you if you only update that one and not the derivatives.

Best regards,

Laurent.

General Discussions

answered on 31 Aug 2021

1 answer

930 views

When object in datasource somethimes is empty in kendo grid

I have a object that looks like this:

"employees":[
  {"lastName":"Doe"},
  {"firstName":"Anna" },
  {"firstName":"Peter", "lastName":"Jones"}
]

As you can see sometimes one of the properties is missing, sometimes lastname may be missing and other times firstname is missing.

The problem is when I use kendo grid (Jquery UI) because defining the columns I set something similar

$("#grid").kendoGrid({
  columns: [{
    field: "firstName",
    title: "Firstname",
    template: "Firstname: #:firstName#"
  },{
    field: "lastName",
    title: "Lastname" 
    template: "Lastname: #:lastName#"
  }

Because sometime the firsname is NULL and the same with lastName. The problem comes in the template. So how can I handle this?
I am not able to edit the datasource because it comes from a external api.

Here is an exampleof the replicated issue: https://dojo.telerik.com/uPUdiYOC

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "firstName",
    template: "<strong>#: firstName # </strong>"
  }],
  dataSource: [   {"lastName":"Doe"},
  {"firstName":"Anna" },
  {"firstName":"Peter", "lastName":"Jones"} ]
});
</script>
</body>
</html>

Grid

answered on 30 Aug 2021

1 answer

141 views

data source cancelling changes

I have a grid bound to an AJAX dataSource configured to update records on the server. some of the data item properties are bound to editable fields in the grid via MVVM binding and the changes are synced using data source transport configuration. Other data item properties are also bound to the grid column templates but are updated explicitly via an implementation separate from the dataSource. For those properties I make sure the state of the dirty bit on the observable is unchanged when the property is update so the dataSource does not track it. However, calling cancelChanges() on the dataSource resets the state on these properties. Is there a way to cancel changes on some of the data item properties while keeping changes on other ones?

Data Source

Grid

answered on 30 Aug 2021

1 answer

374 views

Grid editable incell : How totally remove tooltip in numeric field?

Hi,

I use a grid editable in cell like this one: https://dojo.telerik.com/@lydbell/eCAfIWUy.

The name of the fields comes from my database and is not user friendly. So I don't want it to appear in a tooltip. How to remove it completely?

If, as a last resort, it is not possible to remove it completely, I would like to modify the content. I came across this old post and the example cited doesn't seem to work.

Grid

NumericTextBox

answered on 30 Aug 2021

1 answer

259 views

how to aggregate in pie/donut chart?

Hey there,

I am using Data query APIs to groupBy my data by priorities:

this.piechartData = groupBy(chartData, [{field:"priority"}]);

Then I want to count the items per priority value to build the piechart. However, the aggregate="count" is not working for me.

Is there

<kendo-chart>
<kendo-chart-series>
<kendo-chart-series-item
type="donut"
*ngFor="let item of piechartData"
[data]="item.items"
[name]="item.value"
categoryField="priority"
aggregate="count"
field="taskName">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-legend [visible]="false"></kendo-chart-legend>
</kendo-chart>

a way around to do this?

I used this approach for barcharts and linecharts before and it worked.

Regards,

Nazareth

Charts

Data Source

General Discussions

answered on 27 Aug 2021

1 answer

97 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

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