Questions on Kendo UI for jQuery Forum

0 answers

44 views

I have a Dojo here: https://dojo.telerik.com/UhicOWUv

I want to hide the file list but I want to display an error message on the page if it doesn't upload. In the above example, I am attempting to upload a file that is too large. Instead of displaying an error message in the "messages" div, it is doing nothing so the user doesn't know it failed. How do I accomplish my goal of hiding the files list but showing a message when something goes wrong?

Here is the code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
</head>
<body>
  
<input type="file" name="files" id="photos" />
  <div id="messages"></div>
<script>
    $("#photos").kendoUpload({
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove"
        },
        showFileList: false,
      	validation: {
                allowedExtensions: [".pdf"],
                maxFileSize: 900000,
                minFileSize: 300000
            },
      error: function() { $("#messages").append("error"); }
    });
</script>
</body>
</html>

Upload

asked on 31 Oct 2023

0 answers

45 views

I want to create a multiple charts in one chart with data type as array of array

So I have data in this format

{

name: health

data:[[1,2],[2,2],[3,4]]

type:"area"

visible:true

},

{

name: health2

data:[[1,2],[2,2],[3,4]]

type:"line"

visible:true

}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .

asked on 28 Oct 2023

0 answers

344 views

Setting column width on exporting grids to Excel doesn't seem to work?

I am writing a function that takes a basic HTML table on the page, clones it, converts it to a kendo grid, so I can use the grid's export to Excel feature on any <table> markup regardless if it's a kendo grid or not.

I have it working, but one column is excessively wide in the export, I tried manually setting the column width to be smaller, but it won't get smaller. I have tried manually setting the column width to something huge to test, and that does work. So not sure why the smaller part isn't.

This same column also has <br> tags that I had to convert to \n and then manually adjust the cell height which works fine.

Here is the my function being bound to the excelExport event:

kendoGridObject.bind("excelExport", function (e) {
            var sheet = e.workbook.sheets[0];
            var columns = e.workbook.sheets[0].columns;
            var defaultColumnWidth = 64;
            var columnMaxCharCounts = [];
            console.log("exporting to excel");
            for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
                var row = sheet.rows[rowIndex];
                var heightMultiplier = 1;

                for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
                    var cell = row.cells[cellIndex];
                    
                    var cellMaxCharLength;

                    if (cell.value && cell.value.toString().indexOf("<br>") >= 0) {

                        var stringsSplitByLineBreaks = cell.value.split("<br>");
                        //add to the height multiplier for each instance of line breaks found in the cell
                        heightMultiplier += cell.value.trim().indexOf("<br>") !== -1 ? stringsSplitByLineBreaks.length - 1 : 0;
                        cell.value = cell.value.trim().replaceAll("<br>", "\n");
                        cell.value = cell.value.trim();
                        cell.wrap = true;

                        //get the longest character count from all the strings for determining how wide the column should be
                        cellMaxCharLength = stringsSplitByLineBreaks.reduce(function (a, b) {
                            return a.length > b.length ? a.length : b.length;
                        }
                        );
                    } else {
                        cellMaxCharLength = cell.value.length;
                    }

                    var currentMaxCharCount = columnMaxCharCounts.find(function (x) { return x.ColumnIndex == cellIndex });
                    if (currentMaxCharCount == null || currentMaxCharCount == undefined) {
                        columnMaxCharCounts.push({ ColumnIndex: cellIndex, CharCount: cellMaxCharLength });
                    } else {
                        currentMaxCharCount.CharCount = cellMaxCharLength > currentMaxCharCount.CharCount ?
                            cellMaxCharLength : currentMaxCharCount.CharCount;
                    }
                }

                if (heightMultiplier != 1) {
                    row.height = heightMultiplier * 20; //the default excel row height
                }
            }

            //go over every column and set the new widths based on the max character count
            for (var i = 0; i < columns.length; i++) {
                var column = columns[i];
                var maxCharLength = columnMaxCharCounts.find(function (x) { return x.ColumnIndex == i });
                column.width = maxCharLength.CharCount + 10;
                console.log("Post-Change: Column width for column " + i + ": " + column.width);
            }
        });

Yet went i open the export the third column (index 2) looks like this:

I thought there might have been some extra white space or something, but i made sure to trim everything and my console outputs the following column widths when I export:

Post-Change: Column width for column 0: 49
Post-Change: Column width for column 1: 19
Post-Change: Column width for column 2: 51
Post-Change: Column width for column 3: 23
Post-Change: Column width for column 4: 24
Post-Change: Column width for column 5: 19

So the widths are being set, and that should show the 3rd column is roughly equal in with to the first, yet it's about 3-4x as wide in the excel file.

This is but one example, when using this across several different tables it can happen to 1 or mulitple columns. I thought it had to do with the fact that I am converting <br> to \n and that messed with the column widths, but I've seen it even happen on columns with no <br> tag.

What's going on and how do I make that third column smaller?

Grid

updated question on 26 Oct 2023

0 answers

37 views

Problem in return data from controller using api read

i have controller using java as @RequestMapping("/charts") and it return in Json format but my question this data is not reflected in my Grid why.

 $("#grid").kendoGrid({
                        dataSource: {
                           
                    transport: {
                         read: {
                             url: function(options) 
                             {   return "${pageContext.request.contextPath}/charts";
                                         },
                            
                            dataType: "json",
                            type: "GET"
                        }
                        },
                            
                            schema:{
                                model: {
                                    fields: {
                                        id: { type: "number" },
                                        fullName : { type: "string" },
                                        address: { type: "string" },
                                        email : { type: "string" },
                                        password: { type: "string" },
                                        designation: { type: "string" },
                                        salary: { type: "number" }
                                    }
                                }
                            },

                            aggregate: [ { field: "fullName", aggregate: "count" },
                                
                                          { field: "salary", aggregate: "sum" }
                                          ]
                             
                       ,pageSize: 8 },
                        sortable: true,
                        scrollable: false,
                       pageSize: 5,
                       pageSizes: true,
                        hieght:20,
                         pageable: {
                
           pageSizes: [4, 6,10,"all"],
           buttonCount: 5
                },
     columns: [
                   { field: "id", title: "ID", width: 180  },
                   { field: "fullName", title: "Name",width:300,
                    template: "<div style=color:red>#=fullName#</div>" ,footerTemplate: "Total Count: #=count#"  },
                     { field: "address", title: "Address",width:300 },
                      { field: "email", title: "Email",width:200},
                      { field: "password", title: "Password" ,width:200},
                            { field: "designation", title: "Designation" ,width:300},
                            { field: "salary", title: "Salary" ,width:200,footerTemplate: "Total Sum: #=sum#"},
                            { width:200,
                              template: "<a class='k-button' href='/Home/Index'>Redirect</a>"   }
                            
                        ]
                    });

Charts

Data Source

Grid

asked on 22 Oct 2023

0 answers

43 views

Tree List Jquery Remove Binding for large datasets is too slow

I am json_encoding a php array for javascript variable that is used for the local binding to the kendo tree list. There can be 50000+ records for the kendo tree list and loading time of the page is around 15-20 seconds. The higher the amount do records the higher the loading times.

The kendo tree list was previously remote binding, but found the performance of the tree list was poor when expanding parenet nodes. Therefore, resorted to local binding. Perfromance once loaded is good, but now number of records inserted are increasing.

How long should the kedno tree list take to load when locally binding 50,000+ records?

Thanks,

Fraser

TreeList

asked on 19 Oct 2023

0 answers

58 views

How can I change the input color of an Editor while using a dark theme.

Hi,

I've got an application where the user can choose the kendo ui theme.
Within this application I use the Kendo editor component.

Is there a possibility to change the textcolor of the editor.
Or to add a CSS class.

I won't define style="color: #FFF" is must be something like class="<k-negative-color-to-this-theme>"

Here is a Dojo Example with a dark theme

https://dojo.telerik.com/oCeTOPir

In the example the background is dark and the color also?

regards

Maik

Editor

asked on 16 Oct 2023

0 answers

37 views

aspnet-mvc grid hierarchy

i have enabled the Content Security Policy (CSP) in my mvc project i have view where i have mvc grid hierarchy

https://demos.telerik.com/aspnet-mvc/grid/hierarchy exmple i have used

when i add Deferred to the grid the inner grid wont work

i get an error

jquery-3.6.3.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #Grid_#=EmployeeID#
at se.error (jquery-3.6.3.min.js:2:13911)
at se.tokenize (jquery-3.6.3.min.js:2:21922)
at se.select (jquery-3.6.3.min.js:2:22749)
at Function.se (jquery-3.6.3.min.js:2:7196)
at a.find (jquery-migrate.min.js:2:1675)
at E.fn.init.find (jquery-3.6.3.min.js:2:25319)
at E.fn.init (jquery-3.6.3.min.js:2:25808)
at new a.fn.init (jquery-migrate.min.js:2:1276)
at E (jquery-3.6.3.min.js:2:1051)
at HTMLDocument.<anonymous> (Index:505:1618)

code cshtml

@using PM.Common;
@using PM.Common.Helper;
@using PM.PartnerManagement.Models;
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@(Html.Kendo().Grid<PM.PartnerManagement.Common.Employeeviewmodel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.FirstName).Width(130);
columns.Bound(e => e.LastName).Width(130);
columns.Bound(e => e.Country).Width(130);
columns.Bound(e => e.City).Width(110);
columns.Bound(e => e.Title);
})
.Sortable()
.Pageable()
.Scrollable()
.ClientDetailTemplateId("template")
.HtmlAttributes(new { style = "height:600px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(6)
.Read(read => read.Action("HierarchyBinding_Employees", "Test"))
)
.Events(events => events.DataBound("dataBound")).Deferred()
)
<script id="template" type="text/kendo-tmpl" >
@(Html.Kendo().Grid<PM.PartnerManagement.Common.orderViewmodel>()
.Name("Grid_#=EmployeeID#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(110);
columns.Bound(o => o.ShipCountry).Width(150);
columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
columns.Bound(o => o.ShipName).Width(300);
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("HierarchyBinding_Orders", "Test", new { employeeID = "#=EmployeeID#" }))
)
.Pageable()
.Sortable().Deferred()
.ToClientTemplate()
)

</script>

<script nonce="@PM.Common.Constant.Nonce">
function dataBound() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
</script>

<script nonce="@Constant.Nonce">
@Html.Kendo().DeferredScripts(false);
</script>

CS

using PM.Core.Repositories;
using PM.Portal.Controllers;
using PM.Portal.Filters;
using System.Web.Mvc;
using PM.Core.Repositories.Interface;
using Kendo.Mvc.UI;
using System.IO;
using Newtonsoft.Json;
using System.Collections.Generic;
using Kendo.Mvc.Extensions;

namespace PM.PartnerManagement.Controllers
{
[Authorize(Order = 1)]
public class TestController : BaseController
{
#region GLOBAL VARIABLES USED IN THIS CONTROLLER

ICommonRepository _repoCommon = new CommonRepository();
IWorkOrderRepository _repoWorkOrder = new WorkOrderRepository();

#endregion

//[WebRoleFilter]
public ActionResult Index()
{
return View();
}

public JsonResult HierarchyBinding_Employees([DataSourceRequest] DataSourceRequest request)
{
string text = System.IO.File.ReadAllText(@"C:\Neeraj Repo\PartnerManagement\Dev\Bill360_Dev\Bill360_New\PM.PartnerManagement\Json\Employee.json");
List<PM.PartnerManagement.Common.Employeeviewmodel> GetEmployees = Newtonsoft.Json.JsonConvert.DeserializeObject<List<PM.PartnerManagement.Common.Employeeviewmodel>>(text);
return Json(GetEmployees.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
}

public JsonResult HierarchyBinding_Orders(int employeeID, [DataSourceRequest] DataSourceRequest request)
{
string text = System.IO.File.ReadAllText(@"C:\Neeraj Repo\PartnerManagement\Dev\Bill360_Dev\Bill360_New\PM.PartnerManagement\Json\order.json");
List<PM.PartnerManagement.Common.orderViewmodel> Getorders = Newtonsoft.Json.JsonConvert.DeserializeObject<List<PM.PartnerManagement.Common.orderViewmodel>>(text);

return Json(Getorders.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
}
}

Grid

asked on 09 Oct 2023

0 answers

51 views

Detached FontIcons from Themes

As of R3 2023 release, the font icons are detached from the themes css files. If you are still using font icons, make sure to include a reference to the font icons in your applications. You can read more information about the change in the following blog post: https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes. It contains essential information about the change for all products and migration articles to svg icons.

General Discussions

asked on 06 Oct 2023

0 answers

42 views

Export as Excel is not working properly.

In Export as Excel limited data is only Shown, If we add more data in the Kendo Table Grid, Additionally, When we click on Export as Excel, only the same set of data is shown, without any new data being added to the Excel Sheet.

See here Data is upto 45 in Kendo Table but when we export as Excel then only upto 32 data is loading, no new data is being loaded on Excel Sheet.

Data Source

ListView

Spreadsheet

asked on 03 Oct 2023

0 answers

47 views

When using ColSpan in Kendo Form, the output looks strange.

Hello, kendo practitioners! I always get a lot of help.
While creating an input form using KendoForm, I used colSpan to create a 2-space field, but it is displayed out of proportion as shown below.

The field's label area is displayed larger.

The code was written as follows.

$('#grid').kendoForm({
    grid: {
        cols: 4,
        gutter: 20
        },
    items: [{
               field: "field1",
               label: "Field1"
            },{
               field: "field2",
               label: "Field2"
            },{
               field: "field3",
               label: "Field3",
               colSpan: 2
            }]
});