Telerik Forums
Kendo UI for jQuery Forum
1 answer
56 views

Hi,

I have the Scheduler (Day View), I need to show my time slots (I will get it from API) in the header.

 

I need to show them in the header :

 

 

This API Response :

 

Neli
Telerik team
 answered on 21 Aug 2024
0 answers
81 views

Hello,

I have a kendo grid created from an HTML table like this:

<div class="content">
    <table id='k-grid'>
        <thead>
            <tr>
                <th data-field="my_value1">Title 1</th>
                <th data-field="my_value2">Title 2</th>
            </tr>
        </thead>
    </table>
</div>

I need to update its toolbar at runtime with setOptions in another file and I can't modify the grid setup.
So I did :


const options = kendoGrid.getOptions();
if (!options.toolbar) {
    options.toolbar = [];
}
options.toolbar.push(
    { template: `<div class='vr'></div>` },
    { template: `<select id='my-selector'></select>` }
);
kendoGrid.setOptions({ toolbar: options.toolbar });

 

But when I refresh the Grid using setOptions, the columns  titles are lost and take the value of the data-field attributes.
I know this is expected behavior with reference to the setOptions documentation and the init from Table - documentation.

My goal is to make updating the toolbar completely transparent to creating the grid in order to reuse it on any table without breaking it.

How can I keep the data in the original HTML table and apply it to the newly created grid with setOptions please?

Théodore
Top achievements
Rank 1
 updated question on 20 Aug 2024
5 answers
2.3K+ views

This is my code

1. I want to export master & its related child record to excel and its working fine if i didnt use grouping. but whereas if i add grouping, then its not working. 

2. Also how to remove the header in child records while exporting to excel.

Expecting your help.

Code
Top achievements
Rank 1
Iron
 updated answer on 20 Aug 2024
1 answer
55 views
Does the DropDownTree support virtualization and valuemappers like the DropDownList does? I have a tree with 500 nested items on 3 levels (parent, child, grandchild). 
Nikolay
Telerik team
 answered on 19 Aug 2024
1 answer
44 views

Hello,

I am trying to build a grid that has a combobox in it that should be filled from an Ajax request. But based on the demo on the page, I am not being able to determine where the combobox is filled.

I appreciate any help on the matter, if possible with a code sample so that I can understand it better.

Regards,

Alexandre

Martin
Telerik team
 answered on 16 Aug 2024
0 answers
78 views

If I include a certain kedo ui theme like default or nova or uniform in my asp.net mvc view/web page that uses kendo ui, then what would be the quickest way to apply the kendo ui theme to everything on the asp.net mvc view i.e. to the textboxes, buttons etc.?

The asp.net mvc view/web page is always applying boostrap theme to the textboxes, buttons etc, but I want to change it so that the kendo ui theme gets automatically applied to these textboxes, buttons etc.

I know that I could execute jquery code on document  ready event that looks for all elements in the web page and then changes each element to a corresponding kendo ui element (example code as below), but this would involve quite a bit of coding in jquery.


 $(document).ready(function () {
        let allElements = document.querySelectorAll("button,input,textarea");
        console.log("allElements length is " + allElements.length);
        for (let i=0; i < allElements.length; i++) {
            let emt  = allElements[i];
            emt.className = "";
            console.log("element tag name is " + emt.tagName);
             if (emt.tagName === "BUTTON") {
                 $(emt).kendoButton();
            } else if (emt.tagName === "INPUT" && (emt.getAttribute("type") === "text" || emt.getAttribute("type") === "password")) {
                 $(emt).kendoTextBox();
            } else  if (emt.tagName === "TEXTAREA" ) {
                 $(emt).kendoTextArea();
             }
        }
        $(".jumbotron").kendoResponsivePanel({breakpoint:769});
        });

It would be really cool if by simply removing bootstrap.css from the web page, the entire page would automatically have the kendo ui theme applied or a single method could be called on the global kendo ui object like kendo.applyTheme(<theme-name>).
SUNIL
Top achievements
Rank 3
Iron
Iron
Iron
 updated question on 16 Aug 2024
1 answer
153 views

All 

I have upgraded our Kendo UI spreadsheet  jQuery to 2024.3.80, however it is causing strange UI issues. 

 

The UI Loads at a huge zoom level (e.g a single icon taking over the entire screen etc...) so it is unusable

 

If I swap the stylesheet back to 8.2.1.tabs and all sorts look very strange

 

My imports are as  below 

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css" />
<script src="https://unpkg.com/@progress/kendo-licensing/dist/index.js"></script>
<link href="https://kendo.cdn.telerik.com/themes/2024.3.806/default/default-main.css" rel="stylesheet" />
<!-- <link href="https://kendo.cdn.telerik.com/themes/8.2.1/default/default-main.css" rel="stylesheet" /> -->
<script src="https://kendo.cdn.telerik.com/2024.3.806/js/kendo.all.min.js"></script>
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

Neli
Telerik team
 answered on 15 Aug 2024
1 answer
87 views

I want some of my date time pickers to have a width of 140px.

 https://dojo.telerik.com/@mortenma71/eSAhOyaN/9

It works when I set the width using inline style:
<input id="datepicker" value="10/10/2011" style="width:140px;" />

It doesn't work when I set the width using a CSS class.

Without !important the CSS class seem to have no effect:
<style>.width-140 { width: 140px; }</style>
<input id="datepicker2" value="10/10/2011" class="width-140" />

With !important the CSS class effects the width, however the svg-picker-icon doesn't show:
<style>.width-140-important { width: 140px !important; }</style>
<input id="datepicker3" value="10/10/2011" class="width-140-important" />

I only observed the problem now; I'm sure it worked in an earlier kendo/CSS version.

How can I set the width using a CSS class and retain the svg-picker icon?

/Morten

Martin
Telerik team
 answered on 14 Aug 2024
1 answer
100 views

 

I have a request for a group of dropdown lists with complex filtering in the lists. The issue is that they don't want any previously selected options to be erased when filtering. My actual list can have thousands of options but for the sake of example I'm going to make it shorter:
Let's say the lists are called "favorite fruit 1" and "favorite fruit 2". Someone already chose "Banana" in favorite fruit 1. Now they want to filter the options by "Color: Red" and "Fiber: above 4g". They want the selected option for favorite fruit 1 to remain "Banana" but the list of options available for favorite fruit 1 and 2 to both contain only fibrous red fruits. (Again, I over simplified it for example. This makes more sense when you have thousands of options). Is there a way to do this?

The layout would be something like this:

<select id="color"></select>
<select id="fiber"></select>

<select id="fruit1" value="1"></select> <!--Bananas is selected-->
<select id="fruit2"></select>

 

My dataSource would be something like this:
[
  {
    fruitId: 1,
    fruitName: "Banana",
    color: "Yellow",
    fiber: "below 4g",
    potassium: "high"
  },
  {
    fruitId: 2,
    fruitName: "Apple",
    color: "Red",
    fiber: "above 4g",
    potassium: "low"
  },
  ...
]


Neli
Telerik team
 answered on 13 Aug 2024
2 answers
199 views

Hi Team,

When a drodpdownlist is loading data, the loading icon (k-input-loading-icon) has a wrong height causing the widget height to change too, resulting in a weird "pumping effect" in the form.

To reproduce, simply look at the dropdownlist demo page :

https://demos.telerik.com/kendo-ui/dropdownlist/cascadingdropdownlist?autoRun=true&theme=bootstrap-main

Any workaround?

 

Regards,

Laurent.

Kendo Dude
Top achievements
Rank 2
Iron
Iron
 updated answer on 09 Aug 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?