Questions on Kendo UI for jQuery Forum

1 answer

215 views

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

133 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

0 answers

147 views

Charts Accessibility - Keyboard Support if chart is clickable + Patterns Fill instead of solid fill

Hi Team,

I've added everything to make sure charts are accessible but the issue is our data points are clickable and when we click on our data points the pivot/grid below the charts updates just like power bi charts.

I saw one document shared by kendo UI on charts accessibility:

The fundamental requirement that refers to and is fulfilled by the Kendo UI data visualization components is:

Section 508—"(a) A text equivalent for every non-text element shall be provided (e.g., via alt, longdesc, or in-element content)."
WCAG 2.1—"Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language."

but this holds true when charts are not clickable.

Like this we're expecting to have focus on each data points:

Power bi is also using svg image and all data points and the x and y axis are operable through the keyboard. Please have a look.

1. Either any shortcut key so that it can navigate all the data points.

2. or Simple Navigation : Enter => and then arrow keys to navigate inside options.

Step 1: container is clickable

Step 2:

Tab to navigate in between

Enter to go inside

esc: to exit

Step 3: After pressing enter, it goes inside.

Is it possible to create something like this.. This will make charts more accessible.

For more inspiration: Miro currently make it canvas objects accessible in June release with the help of help keys + hidden messages for screen readers.

-----------

Is it possible to add custom patterns like pattern fill instead of solid fill inside the charts so that we create differentiation apart from the colors also?

Accessibility

Charts

updated question on 14 Aug 2023

0 answers

185 views

chart is not display

my code is here why charts not displayed

<%@ 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

asked on 14 Aug 2023

1 answer

126 views

datepicker error with format and dateinput options

Can't write down two digits in day section

the code in below

https://dojo.telerik.com/UmoNUrUN

DatePicker

answered on 11 Aug 2023

1 answer

107 views

Loading large data in Kendo UI tree with ondemand set to true - Couldn't achieve search functionality

Hello,

I have a huge volume of data loading in Kendo UI tree by ondemand set to true. With this feature I couldn't do a search since not all the child nodes are loaded. The current search feature only searches the loaded nodes in the tree.

I need to achieve the search feature with the ondemand set to true to satisfy the business need. Can you please help me here?

Thanks

TreeView

answered on 11 Aug 2023

1 answer

209 views

Inline editing toolbar does not always hide

Hello, we found an issue where the inline editor toolbar does not always hide, and this can be reproduced on the demo site. With the toolbar visible, click on a button and then click away from the editor and toolbar and it will stay open.

Thanks,

Bob

Editor

answered on 11 Aug 2023

1 answer

166 views

How to create a personnalized Shape and modify content easily ?

Hello,

I'm creating a diagram. I've done some research on how to create a custom shape, but I'm having a few problems on dynamically modifying the data of the various elements present in the shape.

1) Firstly, I've understood the code bellow that allows me to create a custom shape:

let newShape = function() {
            let dataviz = kendo.dataviz
            let g = new dataviz.diagram.Group()
            let dataItem = options.dataItem

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: 'linear',
                        stops: [{
                            color: dataItem.colorScheme,
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: dataItem.colorScheme,
                            offset: 1,
                            opacity: 1
                        }]
                    }
                }
            }))
            
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.name,
                x: 20,
                y: 20,
                fill: '#fff'
            }))
            
            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.props,
                x: 20,
                y: 40,
                fill: '#fff'
            }))
            return g
}

However, I'm having trouble dynamically modifying the value of a TextBlock.

Which field do I need to access, after retrieving the shape via diagram.shapes[i] , to be able to modify the "text" field of a TextBlock? Or, more generally, how can I easily retrieve an element (TextBlock, etc.) from a compound shape?

I've tried accessing various fields in the shape object referring to the TextBlock element and then calling shape[i].redraw( ) / .redrawVIsual( ), but no shape is updated.

2) Secondly, what kind of components can be added to the Group ? My goal is to add a progress bar into my shape, but I don't think that's possible. Is there a list of elements (TextBlocks, ...) that can be appended to Group ? Or any idea to have a progress bar in a shape ? Maybe using the progressbar component and attach a progress bar to each shape ?

Thanks in advance,

Best,

VB

Diagram

ProgressBar

answered on 10 Aug 2023

1 answer

198 views

Grid with locked columns and dropdown panel

I have a need for a kendo grid with locked columns and a dropdown panel. I tried accomplishing this using the kendo grid's locked and detail template but this is not supported. I need to have a grid with 3 columns locked on the right that are visible regardless of screen size. These columns have the dropdown arrow, an icon, and a name. The rest of the columns should scroll horizontally when there are too many to fit on the screen. There should be a dropdown panel that opens when the user clicks the expand button. This panel should not scroll horizontally and should always be aligned with the left edge of the grid (not the left edge of the scrollable content). I need a grid because the user wants to sort the rows and search. They also want to see the data in tabular format. How would I accomplish this given that Telerik has decided not to support having locked or sticky columns and detail templates in the same grid.

Grid

answered on 08 Aug 2023

1 answer

258 views

Getting kendoDateTimePicker is not a Function in Console when rendering during $(document).ready()

When the following code is run, I get an error in the console indicating that .kendoDateTimePicker is not a function, but the controls render when the convertNewPickerControl() method is called outside the $(document).ready() function.

I also get the same error when I try to convert cloned inputs dynamically (e.g., when a user presses the "Add" button.

The following is the code for the entire page (I'm getting the same issue in our product using similar code).


<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/kendo/2022.3.1109/kendo.all.min.js"></script>

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/kendo/styles")
@Styles.Render("~/Content/kendo/css")

<style>
    .row {
        padding-top: 12px;
        padding-bottom: 12px;
    }
</style>

<main>

    <div id="cloneDiv" style="display:none;">
        <div id="row0" class="row">
            <div class="col-md-1 form-label">Date/Time:</div>
            <div class="col-md-5">
                <input id="dateTimePickerFrom_row0" />
            </div>
            <div class="col-md-5">
                <input id="dateTimePickerTo_row0" />
            </div>
            <btn id="button_row0" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>

    <div id="parentDiv">
        <div id="row1" class="row">
            <div class="col-md-3">
                <input id="dateTimePickerBase_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerFrom_row1" class="date-time-picker" />
            </div>
            <div class="col-md-3">
                <input id="dateTimePickerTo_row1" class="date-time-picker" />
            </div>
            <btn id="button_row1" class="col-md-1 btn btn-outline-info" onclick="addNewRow(this);">Add</btn>
        </div>
    </div>
</main>

<script>

    var row = parseInt(1);

    console.log('converting before document ready...');
    convertNewPickerControl("dateTimePickerBase_row1")

    $(document).ready(function () {
        console.log('converting within document ready...');
        convertNewPickerControl("dateTimePickerFrom_row1");
    });

    console.log('converting after document ready...');
    convertNewPickerControl("dateTimePickerTo_row1");

    function convertNewPickerControl(sender) {

        var savedStartDate = new Date();

        $("#" + sender).kendoDateTimePicker({
            format: "MM/dd/yyyy hh:mm:ss tt",
            value: savedStartDate,
            min: savedStartDate
        });
        console.log('...successfully converted.');
    }

    function addNewRow(sender) {

        var sourceRow = $('#row0');
        var newRow = $('#row' + row);
        var currentRowNumber = 'row' + row;
        var regex = new RegExp(currentRowNumber, "g");
        var proxyListRegex = new RegExp(/\.ProxyList\[\d+\]/g);
        var _rowRegex = new RegExp(/\_row\d+/g);

        var clonedRow = $('<div>').append(sourceRow.clone()).html().replace(regex, 'row' + (parseInt(row) + 1)).replace(proxyListRegex, '.ProxyList[' + row + ']').replace(_rowRegex, '_row' + (parseInt(row) + 1));

        clonedRow = clonedRow.replace("row0", "row" + (parseInt(row) + 1));
        newRow.after(clonedRow);

        /* convert new inputs to datetimepickers */
        var newFromControl = "dateTimePickerFrom_row" + row;
        var newToControl = "dateTimePickerTo_row" + row;

        convertNewPickerControl(newFromControl);
        convertNewPickerControl(newToControl);

        row = (parseInt(row) + 1);

    }
</script>

As can be seen in the console, the first and last calls to convertNewPickerControl() work, but the call within $(document).ready() does not (and neither do the calls made to convertNewPicker() in addNewRow() -- not shown below):

So...I know $(document).ready is executing as the console.log entry is noted. Why would it be working outside $(document).ready() but not within it (or via the call when adding a new row)?

DatePicker

answered on 08 Aug 2023