Questions on Kendo UI for jQuery Forum

2 answers

121 views

In Speadsheet, cells are not exporting to excel with border

When creating cells they are created roughly as follows

{
value: String(result[0][i]["date_description"]),
 ...CONFIG_LEFT,
borderTop: { color: "#000000", style: "solid", width: 1 },
borderBottom: { color: "#000000", style: "solid", width: 1 },
borderLeft: { color: "#000000", style: "solid", width: 1 },
borderRight: { color: "#000000", style: "solid", width: 1 },
},

This displays correctly on the browser view but when I go to export it and then open it in excel only the bottom border shows up

Spreadsheet

updated answer on 11 Sep 2024

0 answers

240 views

How to update Multiselect data?

Hi!

I initialized a multiselect:

 let kendoMultiSelect = $("#multisel").kendoMultiSelect({
     dataSource: ['item1'],
     value: ['item1'],
     autoClose: false
 }).data("kendoMultiSelect");

and function of refresh multiselect data:

$.ajax({
     url: myUrl,
     type: "POST",
     data: window.kendo.stringify({ objId: that.objId }),
     contentType: "application/json",
     cache: false,
     async: true,
     success: function (response) { //response - array (for example: ['new1', 'new2', ...])
         let widget =  $("#multisel").getKendoMultiSelect();
         widget.dataSource = response;
         widget.value = response; //I need all the data to be selected at once
     }
 });

After success query the multiselect did not update.

When I try to open the multiselect dropdown I get an error: "TypeError: this.dataSource.flatView is not a function"

How can I update the multiselect.

Data Source

General Discussions

MultiSelect

asked on 10 Sep 2024

0 answers

100 views

kendoGrid cannot works without 'async:false'

when jquery is 1.X,we can do like this

<script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: dataSource,
                columns: [{
                    field: "ContactName",
                    title: "Contact Name",
                    values: getDictName('type')
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }]
            });
			function getDictName(type){
			   $.ajax({
			   url:"demo.action",
			   success:function(result){
                      return result;//the result like:[{key:'a',value:'apple'},{key:'o',value:'orange'}]
                }});
			}
			
        });
    </script>

but when we change jquery to 3.X, the function of 'getDictName' is not work,because jquery-3.x is not support for 'async:false', so before the function-getDictName returned the result, the kendoGrid is already performed.

Grid

asked on 05 Sep 2024

1 answer

51 views

Spreadsheet for quick input

I'm looking into using Spreadsheet to enter data into an underlying database quickly.

Like the table below, where the columns A, B, C and D would be loaded from the database, the columns E and F (Sales and VM) should be editable (from row 2), and the Total column (G) should sum Sales and VM.

	A	B	C	D	E	F	G
1	Location	Location group	Country	Manager	Sales	VM	Total
2	A	X	1	I	6	3	9
3	B	X	1	I	2	2	4
4	C	Y	1	II	3	1	4
5	D	Y	2	II	4	2	6
6	Total						23

The underlying database would be updated whenever a cell in either column E or F (Sales or VM) was updated (onChange).

On change I would need to be able to get the value of the column header (row 1 ), and the value in the cell from the updated row in column A.

Is all this possible?

/Morten

Spreadsheet

answered on 04 Sep 2024

0 answers

168 views

Auto Height for List View

I have a kendo UI Jquery list view. It has a search bar that filters the datasource. I want the height to be a maximum of 50vh. My issue is that when I only have 1 item, the height is too large. How do I make it automatically calculate the height? Here is a dojo. To demonstrate, set the max and min to 31 so you only have one item, you will notice that the gray box doesn't shrink to fit the one item. If I remove the height option, it doesn't ever show anything.

https://dojo.telerik.com/@dojolee/ApicowUQ

ListView

asked on 03 Sep 2024

1 answer

143 views

Confused about data grid options to allow scrolling/resizing.

I'm trying to make a few of our datagrids that end up having way too many columns a bit more manageable for users.

Setting the table to 'scrollable: true' seems like it should fix one issue and allow the datagrid to overflow with scrollbars, so you an scroll the table itself rather than the entire page.

But when I add 'scrollable: true' to our datagrid, I get a very different result...instead of allowing the really wide table to scroll, in collapses all the columns to fit the width of the window. In some ways, this is useful--but not at all what that property is meant to do, is it?

Am I misunderstanding something?

General Discussions

answered on 03 Sep 2024

1 answer

81 views

Kendo Editor MVVM doesnt seem to work with Javascript initialization.

While Kendo Editor MVVM works with "data" attributes, if I try to use it with Javascript initialization MVVM doesnt work.

WORKING

NOT WORKING

$("#bodyEditor2").kendoEditor({

        bind: "visible: isVisible, value: html, events: { change: onChange }"

        }).data("kendoEditor");

I was trying to set the "encoded" property to false and neither this worked correctly.

Full dojo:

https://dojo.telerik.com/@ChrisMylonas/IpuWoQUP

Editor

MVVM

answered on 03 Sep 2024

1 answer

58 views

I need to upgrade the existing project to Kendo UI R1 2022 (version 2022.1.11.9)

Need an upgrade from Kendo UI version 2016.3.914 to 2022.1.11.9 (R1 2022)

Doubts- do I need a commercial license for it?

and How can I get the Kendo UI for jQuery bundle (including js, css and other files) for this specific version not the latest one?

Licensing

answered on 03 Sep 2024

2 answers

87 views

How to use JSON return in DropDownTree

I have a JSON return from an endpoint that is hierarchical in a way but has different field names on each level for the ID and text. How would I make a kendo Drop Down Tree with this data without having to recreate the entire list? I will need to use the valueMapper, loadOnDemand, and get the value like this: .value(). It is like this (except with a lot more records):

[
  {
    stateId: 1,
    stateName: "Florida",
    cities: [
      {
        cityId: 1,
        cityName: "Orlando",
        stores: [
          {
            storeId: 101,
            storeName: "I4"
          },
          {
            storeId: 202,
            storeName: "International Drive",
          },
          {
            storeId: 240,
            storeName: "UCF"
          }
        ]
      }
    ]
  }
]

DropDownTree

Hierarchical Data Source

answered on 29 Aug 2024

0 answers

67 views

Responsive Panel is scrolling

I am seeing an issue with the Kendo Responsive Panel component. There is a Kendo Menu inside the responsive panel, but when displaying the horizontal menu its showing horizontal and vertical scroll bars when hovering over the menu item that says Foo, and also its not showing the menu group item since the height of the responsive panel is limited to the initial height of the horiontal menu. I am using Kendo UI jQuery R2 2020. The code I have is as given below. The dojo sample can be seen at https://dojo.telerik.com/@sun21170/uPisoRoW

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Kendo UI Responsive Panel is scrolling for a menu inside it</title>
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.common.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.rtl.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.moonlight.min.css">
    <link rel="stylesheet" href="Styles/kendoUIMVC/kendo.mobile.all.min.css">
    <script src="Scripts/kendoUIMVC/jquery.min.js"></script>
    <script src="Scripts/kendoUIMVC/kendo.all.min.js"></script>
</head>
<body>
<nav id="nav1">
<button class="k-button" id="btnMenuToggle" data-role="button" role="button" aria-disabled="false" tabindex="0"><span class="km-icon km-drawer-icon"></span></button>
<div id="sidebar">
    <ul id="mainMenu"></ul>
</div>

</nav>
<script>
    $(document).ready(function() {
        $("#sidebar")
            .kendoResponsivePanel({
                breakpoint: 769,//have this more than 768 since if its 768 then responsive panel will not display at screen width >= 768 rather than screen width > 768
                orientation: "left",
                toggleButton: "#btnMenuToggle"
            })
            .children("#mainMenu").kendoMenu({
            orientation: ($(window).width() > 768 ? "horizontal" : "vertical"),
            direction: "bottom left",
            dataSource: [
                {
                    text: "Foo", items: [
                        {text: "Qux ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Abc! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Klm! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"},
                        {text: "Hi Xyz! ddsd sdsdsd dsdsd sdddsdds sdsdsd dsdsdsdsd zzz"}
                    ]
                },
                {text: "Bar"}
            ]
        });
    });
</script>
</body>
</html>

ResponsivePanel

updated question on 27 Aug 2024