Questions on Kendo UI for jQuery Forum

1 answer

465 views

remove item from dropdownlist when source is an array with basic type

I have a dropdownlist with some years. The data source I am using directly an array of numbers eq: [2020, 2021]. I need to remove the 2020. When I am trying to call the method dropdownlist.dataSource.remove(dropdownlist.dataItem()) nothing happens

Data Source

DropDownList

answered on 03 Sep 2021

1 answer

564 views

Adding "required: true" to form validation doesn't let me set values programatically

I have a grid that has some data, and when I press an "edit" button, I want a wizard with forms to edit the contents over multiple pages. Because of all the binding, I figured I could re-use the same wizard and popup and just reload the data inside. This works pretty well until I add validation. For some reason setting model data results in the value being NULL inside the model.

const model = discountWizard.steps()[0].form.editable.options.model;
model.set("requiredField", "required"); // required: true in form
model.set("optionalField", "optional"); // required: false in form

// results in 
dirtyFields: Object { requiredField: false, optionalField: true }
optionalField: "optional"
requiredField: null

I've added a reproducer in Dojo: https://dojo.telerik.com/eQoGApIL

How can I fix this?

On a sidenote, the reset button doesn't seem to do anything by default, is that intended?

answered on 03 Sep 2021

1 answer

153 views

Is Drawing API supported for version 2014.1.318

I am trying to use kendo.drawing for PDF export, but it gives me that is undefined. So I suppose it's from my kendo version ?

Drawing API

answered on 02 Sep 2021

1 answer

536 views

Number format in schema model field

HI,

I have a Kendo UI spreadsheet control bound to a datasource. I need to format the currency fields within to include a thousand separator as follows 13,000,000. How is this possible in the schema/model/fields. Here is my code:

schema: {
model: {
id: "ItemId",
fields: {
ItemAmount: { type: "number", format: "#,#" }
}
}
}

This doesn't work and the number is displayed as 13000000

Data Source

Spreadsheet

answered on 02 Sep 2021

2 answers

1.6K+ views

How to get the column name or index of grid from DataItem

I have an editor function, where I receive a dataItem parameter. I'm wondering if there's a way to retrieve the column name or index from this dataItem.

https://docs.telerik.com/kendo-ui/knowledge-base/radio-buttons-custom-editor

Grid

RadioButton

answered on 02 Sep 2021

1 answer

676 views

Pivot Grid Datasource, can JSON be used?

I'm struggling to get a Pivot Grid to populate. The demo works fine locally; however the datasource for it is XML from the datacube/dll. I have been using other widgets successfully with data delivered as JSON; is it possible to use JSON for the Pivot Grid? Are there any examples of this or even other examples of a Pivot Grid aside from the demo? Thanks in advance.

PivotGrid

answered on 02 Sep 2021

1 answer

247 views

kendo grid column header - aria-haspopup

Hi Team,

Kendo grid column has "aria-haspopup=true" even though there is no popup/submenu that can be opened from the header.

there are no column filters or column menus present in this example.

sample dojo

also see attached image where it shows the aria-haspopup attribute.

thank you

Grid

answered on 01 Sep 2021

1 answer

118 views

Gantt: Issue creating new task after editing existing one

Hi,

So when working with the Gantt timeline I came upon a weird issue.

I have a simple view in which I enabled editing the title directly in the tree view.
When I click the 'add task' button after loading the page it works without issues. A new item will be added to the end of the list like it should.

After double clicking into any task and changing the title, this button does not really work anymore.
For some reason the menu, that usually only shows up, when an entry is selected, will appear.
Clicking 'add above' or 'add below' only produces console errors since there is obviously no item selected (see attached image).

It makes no difference if the task has been modified using the dialog or by double clicking the title in the left pane and editing it there.

This behavior also occurs in the linked dojo using the latest Kendo version (2021.2.616)
https://dojo.telerik.com/uBAHUgOy

In our project I temporarily solved it by re-selecting the entry in the save event listener but I think this is a more general issue with the gantt timeline.

save: function (data) {
    window.setTimeout(()=>{
     $timelineArea.data("kendoGantt").select('tr[data-uid="' + data.task.uid +'"]')
}, 500)
},

Thanks in advance for helping comments

Gantt

answered on 01 Sep 2021

1 answer

774 views

Cant fetch data from localhost

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>

DatePicker

answered on 31 Aug 2021