Questions on Kendo UI for jQuery Forum

1 answer

146 views

In our project we have a web page that produces a diagram on screen; we would like to take this diagram and place it in a report. The report is generated on our server and the diagram is obviously shown in the browser on the client computer.

My question is, is there a way of taking the current view and sending it to the server and may be storing it in the database as a BLOB image? If I can do this then I will be able to insert the image in to the reports I generate/build.

Diagram

answered on 23 Mar 2022

1 answer

239 views

[Solved] Chart legend line type not correct

Good morning,

creating a graph with a single data series, we found that, although the series is graphed with a dash-dot type, the same type is not shown in the legend (see attachment).

Is there an option to report the same type of line in the legend or do you have a work around to suggest to set it up?

Thank you,

Charts

answered on 23 Mar 2022

1 answer

120 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

279 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.4K+ views

[Solved] Column Header alignment

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

Grid

answered on 21 Mar 2022

1 answer

404 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

148 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

269 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

349 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