Telerik Forums
Kendo UI for jQuery Forum
1 answer
66 views
Hi. I have a listview with an html template. I need to call an async function to get an image url from our service based on the value of one of the returned fields. How can I use await in the template? Or is it even possible? This is a simplified part of my template. I tried a few different ways to get it to work, but just get an invalid template error. Any help is appreciated.

<script type="text/x-kendo-template" id="lvProducersTemplate">
     <div>
          <div>
             #if(RFLogoId) {
                var logoUrl = await utils.getRFLink(RFLogoId);
             }#
             <img alt="profile img" src="#:logoUrl#">                            

          </div>
</div>
</script>

Martin
Telerik team
 answered on 04 Feb 2025
1 answer
47 views

Hi
I would like to use SaveAsPdf export in my application. I need to place the export button somewhere other than on the tollbar.
Is there a way to make such export in the background without auto clicking through each page in the gui, like in the case of using toolbar: ["pdf"]?

It must have the ability to export all pages and auto paper size.

Example:

https://dojo.telerik.com/PUvxeVje

Martin
Telerik team
 answered on 31 Jan 2025
2 answers
182 views
When I use the auto complete with the auto separator and use spaces after the separator, it does not work. As shown below in the image, I type 'France,denm', the suggest will not appear. If I type, 'France, denm' it will suggest Denmark.


Darron
Top achievements
Rank 1
Iron
 answered on 29 Jan 2025
1 answer
33 views

Hello,

 

Given the provided ListView MVVM example (https://demos.telerik.com/kendo-ui/listview/mvvm),

I was wondering if there is a way to load the ListView in edit mode for the first entry upon loading the page.

Would anybody be able to provide a JQuery code snippet of how this can be achieved? Alternatively, could I get an example of an MVVM ListView that has calls the "add" feature upon opening the ListView in a KendoWindow?

 

Thank you,

C

Georgi Denchev
Telerik team
 answered on 28 Jan 2025
1 answer
85 views

The following line results in an error message stating that kendo.mobile.Application() is not a constructor.

I'm also getting the error when I attempt to run any of the kendo mobile examples in Dojo.

For example, the "Open in Dojo" example from here will not run. show - API Reference - Kendo UI Loader - Kendo UI for jQuery and has the same error.

This is my "import" area:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
<link href="@Url.Content("~/Content/kendo/2024.4.1112/default-main.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2024.4.1112/classic-moonlight.css")" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2024.4.1112/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2024.4.1112/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="@Url.Content("~/Scripts/FilteredDropDownFunctions.js")"></script>
<script src="@Url.Content("~/Scripts/AutoSaveOnNavigateFunctions.js")"></script>

This is the code causing the error:

<script>
    var app = new kendo.mobile.Application();
    if(kendo.support.browser.safari) { kendo.support.pointers = false; } 

    ....

</script>

Nikolay
Telerik team
 answered on 28 Jan 2025
1 answer
39 views

My users are saying that on iPad and iPhone where to see a tooltip you are required to click rather than hover it is too difficult to click on the marker.

Markers are by requirement not visible but the users still need to click the correct position on the line to show the Tooltip.  It seems that the area to click is very precise and very small. It doesn't seem an issue on Desktop where Hover is available to show tooltip on Category series.

I'm looking for a way to make the clickable are bigger/easier for mobile devices.  I found a similar forum question for a bar chart.  I have put it into the the below Dojo but am struggling to make it apply to markers on a line chart.

https://dojo.telerik.com/nCgEHXin

Martin
Telerik team
 answered on 24 Jan 2025
2 answers
50 views

The modal isn't very large, so the calendar popup shows outside the modal.

When selecting a day or month, the date picker is updated and the modal remains open.
When selecting a year, the modal closes. 

As though the mouse click gets passed to the page.

Kendo: 2024.1.319

Peter
Top achievements
Rank 1
Iron
 answered on 24 Jan 2025
1 answer
77 views

Using KendoUI latest version, the exportToExcel function in Spreadsheet seems broken.

Console shows error:

 

Nikolay
Telerik team
 answered on 24 Jan 2025
1 answer
40 views

Hi, complicated question regarding the dynamic sizing of JSON data blocks into dataSources inserted into a spreadsheet.

I was getting large dataSources (blocks of data in JSON format) from our responses from API requests, so I bumped up the global row and column sizes for the spreadsheet component:


Problem solved!!! However, I found that this change significantly decreases the performance of imports into the spreadsheet control:

$("#spreadsheet").kendoSpreadsheet({
  rows: 300,
  columns: 20000
});

A little research confirmed this problem with importing an excel spreadsheet into the Kendo spreadsheet component:

   

Memory Usage:
Initializing with a large dataset consumes a lot of memory. When you import an Excel file, the spreadsheet control needs additional memory to process and render the imported data. This can lead to memory exhaustion and slow performance.


Rendering Overhead:
The spreadsheet control has to render all the rows and columns, even if they are empty. This increases the rendering overhead, making the control less responsive when importing data.


Data Processing:
Importing an Excel file involves:

(1) parsing the file,

(2) converting it to the spreadsheet's internal format

(3) And then rendering it.

With a large number of pre-initialized rows and columns, this process becomes more complex and time-consuming.

Garbage Collection:
The large initial dataset can lead to frequent garbage collection cycles, which can further slowdown the import process. Garbage collection is triggered more often to manage the high memory usage, impacting overall performance. (this is where I noticed frequent garbage collection calls in the browser's Dev Tool Performance page) ...there is probably other stuff hampering the import also as mentioned above.


$("#spreadsheet").kendoSpreadsheet({
 //No explicit settings for rows or columns. Default at 200 rows, and 50 columns.
});

Another workaround found on CoPilot suggested doing this on declaration and initialization of the spreadsheet component:

  // Initialize with a smaller dataset
$("#spreadsheet").kendoSpreadsheet({
  sheets: [{
      name: "Sheet1",
      rows: 100,
      columns: 50
  }]
});

But here is what happens when I do that:

I have better results with this:
SIZE INIT. KENDO SPREADSHEET | Kendo UI Dojo

But there is space below the rows for some reason....that's ok but I know somebody won't like it. :)

So no to the latter approach, and even with an additional resize the grid does not render; the rows and columns do not appear, and the creator and user is stuck with that little blue line.

My workaround was to use the default size of 200 rows and 50 columns.... which significantly improves the loading time of the Excel spreadsheet. This also allows the excel importer topreserve the size of the spreadsheet even if it exceeds the global rows and columns configuration options.

However, when I try to receive an API response message and put it into a kendo dataSource then insert that dataSource into a sheet within the sheet's settings/configurations option:


spreadsheet.fromJSON({
   sheets: [{ name: data.reportName, rows: 19000, column: 65, dataSource: { data: data.MyJsonData, schema: { model: reportModel } } }] //initialize the sheet property with the first report sheet.
            });

The global rows and columns size will override the dataSource size and cut it off at a maximum of 200 rows and 50 columns. hmmm.

(Q) The question is ... how to handle the dynamic sizing of incoming JSON blocks correctly so that the:
 (1)  Initialized first empty grid renders properly (not a problem if you don't initialize an initial sheet with rows and columns).
 (2) The default global values for row and columns are overridden when you insert the sheet coming from the API.

(?)

QUESTION: What is the recommended way of handling this? I have no control or say whether the user can exceed the limit of the default rows and columns configuration options.

Martin
Telerik team
 answered on 23 Jan 2025
1 answer
32 views

 

      I am trying to recreate the stock template for the org chart so I can add a tooltip and I have everything, except I can't figure out how to access the cardColors array to set the border color of the card.   I thought something like border-color: #= this.cardColors[item.level]# would work, but item is not defined.  What is the proper template entry to access the proper cardColor for the level of the org chart item?

 

Martin
Telerik team
 answered on 21 Jan 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?