Questions on Kendo UI for jQuery Forum

1 answer

428 views

Subresource Integrity when using the CDN

Hi,

I would like to implement the subresource integrity check on the scripts and stylesheets which are brought in from the Kendo CDN. However I wanted to check something first. I have added the scripts based on this guide https://docs.telerik.com/kendo-ui/intro/installation/cdn-service. However there are no integrity hashes for the files. Are these available anywhere? If not I can generate them from the files manually, but this won't work if the scripts are ever modified.

Are the scripts ever changed once deployed in a version? Does every server in the CDN deliver always the exact same bytes for the file?

Many thanks,

Bill

General Discussions

answered on 24 Aug 2023

3 answers

228 views

Kendo charts not shown not working in jsp page

Charts is not shown on JSP Page..Empty div is shown.why????

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
    <link href="resources/styles/kendo.default-main.css" rel="stylesheet" type="text/css" />
     <link href="resources/styles/kendo.common-min.css" rel="stylesheet" type="text/css" />
      <link href="resources/styles/bootstrap-main.css" rel="stylesheet" type="text/css" />
      
    <script src="resources/js/jquery.min.js"></script>
    <script src="resources/js/kendo.web.min.js"></script>
<meta charset="ISO-8859-1">
<title>Kando Charts Example</title>
</head>
<body>
<h2>Charts</h2>
    

    <div id="chart">hello</div>
    <script>
      $("#chart").kendoChart({
        title: {
          text: "Gross domestic product growth /GDP annual %/"
        },
        legend: {
          position: "top"
        },
        series: [{
          name: "India",
          type: "column",
          data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
          color: "red"
        },{
          name: "Germany",
          type: "column",
          data: [1.010, 1.375, 1.161, 1.684, 3.7, 3.269, 1.083, 5.127, 3.690, 2.995],
          color: "blue"
        },{
          name: "World",
          type: "line",
          data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727],
          color: "green"
        }],
        categoryAxis: {
          categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
        },
        valueAxis: {
          labels: {
            format: "{0}%"
          }
        },
        tooltip: {
          visible: true,
          template: "#= series.name #: #= value #%"
        }
      });
    </script>
</body>
</html>

Charts

answered on 23 Aug 2023

1 answer

227 views

[Solved] I want to know how to limit the number of checkboxes per row in the CheckBoxGroup function.

(Before getting into the article, I apologize for my poor English skills.)

Hello! you guys always help me.

I need to create checkboxes using kendoCheckBoxGroup function in specific fields of KendoForm.

However, it should be limited to 4 per line, not listed in one line.

Expressing it pictorially is as follows:

(Note, the text that goes into the field will vary in length.)

And, the code I'm working on is below.

var items = [
        {value: "item1", label: "Item 1"},
        {value: "item2", label: "Item 2"},
        {value: "item3", label: "Item 3"},
        ...
        {value: "item14", label: "Item 14"},
    ];

$('#checkBoxField').kendoCheckBoxGroup({
    items: items,
    layout: "horizontal"
});

How can I modify it to make it work the way I want?

Thank you as always for your kindness!

answered on 22 Aug 2023

1 answer

691 views

Default Font Select Value Instead Of "inherited font".

I'm using the kendo editor tool for a rich text editor, and I want to change the default font family. No matter what I do (I've tried accessing the HTML element by jQuery and DOM selectors and change its value), the selected font stays "inherited font" option, what should I do? (Same goes for "inherited size", for the font size)

DropDownList

Toolbar

answered on 21 Aug 2023

0 answers

625 views

Barcodes, Checksum and Validations - Entering existing EAN13 values

Hi

I've been playing around with the barcodes widget and I've noticed some confusing behaviour on the examples available.

I initially used the cheese example with some valid barcodes and noticed that entering an EAN13 in its full 13 digits causes an error and fails to show any barcodes. Using https://demos.telerik.com/kendo-ui/barcode/index if you change the code for the first item (Manchego) and change it to EAN13 and then enter a valid EAN13 (eg 9300657234720) it not only shows no barcode but also obliterates all of the following barcodes. If you remove the check digit (the last digit) then everything works.

I then found the API example https://demos.telerik.com/kendo-ui/barcode/api where I worked out what is happening. The Kendo widget is accepting ONLY the first 12 digits and then calculating the check digit for itself. So entering

930065723472

will generate a valid barcode and will correctly calculate the check sum as 0.

However this means that the security of the checksum is stripped out meaning that if an end user manually types the example

9300657234720

without the checksum so

930065723472

but makes a transposition error with the last 7 with the last 4 to

930065723742

then it will still generate a valid barcode

930065723742 4

However the original barcode is for baked beans and the erroneously created barcode does not exist as a product.

Further if the original barcode is checked in its entirety but has the transposition error with the 4 and the 7 with the checksum 0 then this error would be caught https://barcode.tec-it.com/en/EAN13?data=9300657237420

So, my question is how do I use the Barcode widget and a full EAN13 with check digit to ensure that data entered is correct and that the barcode being generated is for baked beans not non existent products?

Barcode

updated question on 18 Aug 2023

1 answer

411 views

Q: How to hide rows based on cell value on initial rendering

Hi,

Would love to know how to hide cells based on the value OR order of rows.

Here is what I have coming in:

It is a merged cell by Staff Name.

Here is what I want initially when the grid is populated:

Then… If I click on the toggle button, or the row… this would work too it would expand like this:

Trying to figure out how to filter off of the value TOTAL in the 5th column… then click a button on the 5th column (Pay Code) …and have it fully populated. The merge cell stuff I think I have got. Any idea how I could accomplish this?

Regards,

George

Filter

General Discussions

Grid

answered on 18 Aug 2023

1 answer

128 views

Kendo Spreadsheet taking ~ 2 min to set data and paint the grid

I'm trying to paint the spreadsheet with data of 3500 rows * 250 columns and I'm having few loops to prepare the data before the below code and trying to set it all at once. The below code took ~ 2 min

Is there any way improve this ?

Spreadsheet

answered on 16 Aug 2023

1 answer

193 views

I need to make a MultiSelect containing CheckboxGroup

Hello community, how are you?

I need to replicate a filter like the one in this image. This is inside a kendoGrid filter, but I can't replicate something similar with MultiSelect and CheckboxGroup.

Supposedly this function is what makes this filter look like that:

function categoryDropdownEditor(container, options) {
        $('<input required data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataSource: fk_categoriesDatasource,
                dataTextField: "category",
                dataValueField: "id",
                filter: "contains",
                minLength: 1
            });
    }

My kendoGrid is configured like this:

$("#grid").kendoGrid({
        dataSource: dataSourceGrid,
       
        autoBind: true,
        scrollable: true,
        sortable: true,
        filterable: true,
        groupable: true,
        resizable: false,
        loaderType: "skeleton",
        pageable: {
            refresh: true,
            numeric: false,
            input: true,
            previousNext: true,
            alwaysVisible: true
        },
        noRecords: {
            template: function (e) {
                return "No hay datos disponibles.";
            }
        },
        columns: [
            {
                title: "Categoría",
                field: "category_id",
                dataTextField: "category",
                dataValueField: "id",
                editor: categoryDropdownEditor,
                filterable: {multi: true},
                dataSource: {
                    transport: {
                        read: {
                            url: apibaseurl + endpoint + "/categories",
                            type: "GET",
                            dataType: "json",
                            beforeSend: addToken,
                        },
                    },
                    schema: {
                        data: "data",
                        total: "total",
                        model: {
                            id: "id",
                            fields: {
                                category: {type: 'string'},
                            }
                        }
                    },
                },
            },
            
            {
                command: [
                    "edit",
                    {
                        name: " ",
                        iconClass: "k-icon k-i-more-vertical",
                    }
                ],
                title: "&nbsp;",
                width: 210
            }],
        editable: "popup",
    });

I apologize if it is not understood or if I forgot to put something, it is my first post here.

Thank you very much for your attention.

Jonathan.

DropDownList

Grid

MultiSelect

answered on 16 Aug 2023

1 answer

245 views

[Solved] How can I merge 2 fields in KendoForm?

Hello Kendo practitioners!
I'm currently working on creating a complex input field.
As shown below, I want to input 3 fields in 4 columns, and I want to make the 2nd field use 2 columns.

So I tried writing code like this, but it didn't work.

            $("#baseForm").kendoForm({
                orientation: "horizontal",
                layout: "grid",
                grid: {
                    cols: 4,
                    gutter: 0
                },
                items: [
                            {
                                field: "field1",
                                label: "field1",
                            },
                            {
                                field: "field2",
                                label: "field2",
                                attributes : {colspan: 2}
                            },
                            {
                                field: "field3",
                                label: "field3",
                            },
                        ],
                buttonsTemplate:'',
                submit: function(e) {
                    e.preventDefault();
                }
            });

How can i solve this problem?
Thank you very much for your help!

Form

answered on 15 Aug 2023

1 answer

159 views

Best practices with Kendo, using as git sub module

Hi

Our development team is installing all the library files in the project in order to work with it, is that right?

We're in the middle of a migration to GitLab SaaS, and the project using Kendo has a very large repository (too much for migration), so I'm thinking - Is there a better and easier way to work with the Kendo code?

Did anyone try to use it as a Git sub-module?

any other way that won't enlarge our code?

Thanks!

General Discussions

answered on 15 Aug 2023