Questions on Kendo UI for jQuery Forum

1 answer

105 views

Date field from local variable and autoBind false (delayed/lazy data load) not working

I'm trying to make the SomeDate field format in the kendo grid below work, but no matter what I do, it always returns the ISO string instead of the formatted date. I even tried to define a template in the columns object, and used kendo.format, but I got the exact same result, an ISO string.

I need this data load to be delayed (autoBind:false), I can't provide any data at the beginning. I do know the field types in advance, and I'm defining it as "date". This got to use a locally defined variable.

I tested the code below in Kendo UI Dojo and it returns the ISO string also, so I know it is not an issue with my local libraries.

Why is the date not being formatted correctly? What am I missing?

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-main.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
    
    

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/jszip.min.js"></script>
</head>
<body>
    <script src="../content/shared/js/products.js"></script>

<div id="example">
    <div id="grid"></div>

    <script>
        $(document).ready(function() {
            var myData = [{ProductName:"My Product",UnitPrice:123,SomeDate:"2022-01-01T00:00:00-06:00"}];
      
            var $myGrid = $("#grid").kendoGrid({
                autoBind: false,
                dataSource: {
                    schema: {
                        model: {
                            fields: {
                                ProductName: { type: "string" },
                                UnitPrice: { type: "number" },
                                SomeDate: { type: "date" }
                            }
                        }
                    },
                    pageSize: 20
                },
                height: 550,
                scrollable: true,
                sortable: true,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    "ProductName",
                    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                    { field: "SomeDate", title: "Some Date", format: "{0:d}", width: "130px" }
                ]
            });
            $myGrid.data("kendoGrid").dataSource.data(myData);
        });
    </script>
</div>

</body>
</html>

Grid

answered on 22 Mar 2022

1 answer

252 views

How to align groupHeaderColumnTemplate to the right?

This is my example https://dojo.telerik.com/uxopADoB

I am able to align everything else to the right, but groupHeaderColumnTemplate. How can I do it?

Grid

answered on 22 Mar 2022

3 answers

10.2K+ views

Column Header alignment

How can I center align the text in my column headers?

Grid

answered on 21 Mar 2022

1 answer

385 views

Spreadsheet - Copy and paste function using API

Hi,

How do i trigger a copy and paste function in kendo ui jquery spreadsheet via API? I am trying to copy a selected range of records and paste it over but it does not work with the below codes.

var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var sheet = spreadsheet.activeSheet();

sheet.range(1, 0, 1, 100).select();
spreadsheet.trigger("copy");
sheet.range(0, 0, 1, 100).select();
spreadsheet.trigger("paste");

Thanks in advance.

Spreadsheet

answered on 21 Mar 2022

1 answer

141 views

Kendo Detpicker

Hi

I'm trying to try to disable all dates except for the last date of the month for a range. I add the range ok but all dates are enabled. I just need last date of month. I'm using Jquery. Is there a way to do this with the datepicker?

 $(document).ready(function () {
                        $("#datepicker").kendoDatePicker({
                            min: new Date(),
                            min: new Date(),
                            format: "MM/dd/yyyy",
                            type: "date",
                            change: function(e) {
                                  var value = this.value();
                                  var days = value.getDate();
                                  var d = new Date();
                                  d = value;
                                d.setDate(d.getDate() - days + 1, 0);
                                    console.log(d);
                            },
                            value: "d"

                        });
                    });

DateInput

DatePicker

DateRangePicker

answered on 21 Mar 2022

1 answer

247 views

Kendo UI combo box search special character

Hi,

I have an entry in my Knedo UI comboBox as 'Aré John' While searching, if i use 'are' search is not working. Is there any way to search diacritics in Kendo Ui combo box or any work around to search above criteria. appreciate your help on this

$("#EmpList").kendoComboBox({
placeholder: "search",
dataTextField: "EName",
dataValueField: "EID",
dataSource: mdpList,
filter: "contains",
autoBind: true,
minLength: 2,
highlightFirst: true,
change: onValueChange,
});

ComboBox

answered on 21 Mar 2022

0 answers

322 views

Changing the position of Kendo Grid UI Columns

We have a grid that has approximately 116 columns. Currently we are using kGrid.reorderColumn to change the position of columns. Here is some issues with this method.

For example here is list of columns

1,2,3,4,5,6,7,8,9,10.....116

if I change position from 3 to 10. I have to run reoder 6 times since reoder call only shifts the columns. Now the problem with this rerorder call is, it has performance issues. The larger the gap of the reorder is the slower it gets, for example if I change col3 to col116. It becomes very slow, UI comes back in around 50 secs to 1 min and user thinks that the application is locked and not working.

Now the question is, is there alternative to reorder, in other words is there a method call that exchanges the column position rather than reordering. that way we don't have to call reoder that many times. We will just exchange the position of the columns and be done with it.

I am not sure if there is a way to do that. Please let us know. We would appreciate your feedback.

Thanks,

Iqbal

Grid

asked on 20 Mar 2022

0 answers

78 views

Can you share a script about `gulp custom -c all` , Thanks .

I found docs about build all , but the gulpfils.js not handle it.

General Discussions

updated question on 20 Mar 2022

0 answers

325 views

Problem loading grid from PHP data source

I'm trying the Kendo grid for the first time and am having a problem loading the data from a query done in PHP. My PHP query returns a data set in JSON format and I've confirmed that it's returning the correct data. But the grid comes up empty, and there's no error message. If I run the query from the PHP file, save the JSON to a file and use that file instead as the "transport/read" parameter of the data source, then the grid is populated correctly. Is there some setting I need when reading from a PHP script instead of from a data file? Here is my code.

$(document).ready(function() {

    DataSource1 = new kendo.data.DataSource({
      transport: {
        //read: "comfit.php?proc=get_customers",  // This results in an empty grid
        read: 'customers.json',  // This is the same JSON as returned by the PHP, but it displays correctly
        type: 'get',
        dataType: 'json'
      },
      schema: {
        model: {
          fields: {
            full_name: { type: "string" },
            company: { type: "string" },
            id_no: { type: "string" }
          }
       }
      },
      pageSize: 20,
      serverPaging: true,
      serverFiltering: true,
      serverSorting: true
    }),
    $("#grid").kendoGrid({
        dataSource: DataSource1,
        height: 550,
        filterable: true,
        sortable: true,
        pageable: false,
        columns: [
          {
            field: "full_name",
            title: "Name"
          }, {
            field: "company",
            title: "Company"
            }, {
            field: "id_no",
            title: "ID #"
            }
        ]
    });
    //DataSource1.read();
  });

Data Source

Grid

asked on 19 Mar 2022

1 answer

157 views

Charts PDF Export

Hi!

I get Uncaught TypeError: Cannot read properties of undefined (reading 'bbox') when i want to save pie and donut as pdf in jQuery but all other charts works fine what can the problem be?

Untitled | Kendo UI Dojo (telerik.com)

Regards Sanjin

Charts

PDFViewer

answered on 18 Mar 2022