Questions on Kendo UI for jQuery Forum

2 answers

10.2K+ views

all items in a grid

what could be the best way to get all the models in a grid (including the rows that are not edited)

thanks
ajeesh

Grid

answered on 08 Mar 2018

1 answer

114 views

custom MVVM widget visibility binding issue

Hello,

I am trying to create a custom MVVM widget. I noticed that when my widget is bound and the "visible" binding is declared -- this error logs in the console:

typeError: cannot read property '0' of undefined.

I have created a dojo from an example provided in your tutorial on how to build a custom widget and am able to reproduce:

https://dojo.telerik.com/ayaQEsaV

Please advise.

MVVM

answered on 07 Mar 2018

5 answers

273 views

dataSource text vs Text

Hi Guys,

.kendoMenu({dataSource: menuItems}); menuItems is JSON from the controller.

In my C# code, I have the property as Text (capital 'T'), but KendoUI expects a small 't'. I don't want to have properties in my C# starting with small letters. How do I tell Kendo that it should look for 'Text' rather than 'text'?

Thanks,

Andrei

Menu

answered on 07 Mar 2018

1 answer

1.4K+ views

Need conditional colouring option in Kendo UI Grid + Export the same with colour to Excel

Hi,

I am having a requirement for conditional cell colouring in Kendo UI grid and user should be able to extract the same coloured cells in excel using Kendo Export to Excel feature.

Please refer the attached screenshot in which I need to colour based on following conditions

1) Colour the entire Order ID column with Gray background

2) Colour Green and yellow background for the selected country and state in Ship Country and Ship city respectively

3) Mark Red colour for those columns where Freight is less than 25

So, I am looking for a way through achieve this conditional colouring in export to excel as well, i.e. by clicking on export to excel user can download the excel with all these cells coloured.

Can you please assist me in achieving this.

Grid

answered on 07 Mar 2018

8 answers

2.0K+ views

Restrict Allowed File Types

I need to be able to restrict the allowed files types in the upload widget. I see there's some old threads on this (here and here), but any links to examples are dead now.

Ideally I would be able to pull a list of allowed file types from our DB to be used with the uploader, but if it has to be a static list, that would work as well.

Upload

answered on 06 Mar 2018

1 answer

6.1K+ views

[Solved] How to define a custom filter operator

I started to write my first app with Kendo UI. Most of the work will be done on the Kendo Grid by filtering, sorting and manipulating values.

The grid itself seems to be pretty powerful and suits my needs quite well. However, it looks like I am not able to fulfill all my filtering needs using the regular built-in filtering functions.

For instance: I need to be able to filter all the items from a column having some special characters in them. Special characters are input by the user via k-textbox.

I already wrote a JS function that returns true/false depending on whether the given string contains any of the special character present in the k-textbox.

How could I bind this function as a filter operator for column filtering? I would like to have it on the client side so that I don’t need to send data back and forth all the time. I tried searching for solutions from the forum and the web in general, but I am still a bit lost.

It would be neat if I could use it as a string filter operator like the built-in filters, something like this:

filterable: {

operators: {

string: {

contains: "Contains",

eq: "Is equal to",

special:"Contains special characters",

}

},

Any ideas and help are welcome. Thank you!

Grid

answered on 06 Mar 2018

1 answer

289 views

Grid icons not always rendering properly

I created a .css file from http://themebuilder.telerik.com/aspnet-mvc based on Bootstrap 4. When I downloaded it, I noticed that the 'WebComponentsIcons' WOFF is now embedded as base64. GREAT!

However, often when I refresh my browser (F5), the sort, filter, paging icons do not render properly and give me ugly ASCII chars (please see attached).

Telerik UI for ASP.NET MVC R1 2018 (2018.1.221)

Chrome 64.0.3282.186

Internet Explorer 11.0.9600.18861

Grid

answered on 06 Mar 2018

2 answers

124 views

[Solved] Keyboard navigation in filter demo

I was checking out https://demos.telerik.com/kendo-ui/treeview/filter-treeview-in-dialog for a demo on how to client-side filter a treeview component. The demo works like a charm butI noticed that keyboard navigation is broken when the treeview is filtered (it works fine when not filtered). Is there a work around of fix for this problem?

Thanks,
Ron

TreeView

answered on 06 Mar 2018

1 answer

181 views

Selected item in Treeview not visible in modal window (scroll needed)

Hello,

I face a problem with treeview and larger tree structure. When I select some item and the modal window appears, I cannot see the selected item, it is necessary to scroll down, if selected item is out of visible area.

The second problem I face is witjh automatic scroll, when moving around tree using keyboard, automatic scroll does not work.

Thank you for your kind help.

TreeView

answered on 06 Mar 2018

3 answers

1.5K+ views

Passing data from window to parent object.

I have a window with a list box and on the window close I'm trying to move the data from that list into a list in the parent window.

Here is the html snippet for the window content

<div id="selectcontactwindow" class="k-content">

<script type="text/javascript">

$(document).ready(function () {

$("#parent").val("Select an Agency Contact");

$("#contactselect").kendoComboBox([

{ text: "Contact 1", value: 1 },

{ text: "Contact 2", value: 2}]);

$("#add").click(function () {

var obj = $("#contactselect option:selected");

if ($("#selectedcontacts option[value="+obj.val()+"]").length == 0) {

$("#selectedcontacts")

.append($("<option></option>")

.prop("value", obj.val())

.text(obj.text()));

}

});

$("#remove").click(function () {

$("#selectedcontacts option:selected").remove();

});

</script>

<table>

<tr>

<td>

<label for="parent" class="k-label">Parent</label>

</td>

<td>

<input id="parent" disabled="disabled" type="text" class="k-textbox"/>

</td>

</tr>

<tr>

<td>

<label for="contactselect" class="k-label">Select a Contact</label>

</td>

<td>

<select id="contactselect" class="k-combobox" placeholder="Please select a contact" >

</select>

</td>

</tr>

<tr>

<td>

<label for="selectedcontacts" class="k-label">Selected Contacts</label>

</td>

<td>

<select id="selectedcontacts" multiple="multiple" class="k-list-container" style="width: 100%">

<option value="11">Contact 11</option>

<option value="12">Contact 12</option>

</select>

</td>

</tr>

<tr>

<td></td>

<td>

<button id="add" class="k-button">Add</button>

<button id="remove" class="k-button">Remove</button>

</td>

</tr>

</table>

</div>

Here is the code for the parent window.
     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title></title>
    <link href="../Styles/kendo.common.min.css" type="text/css" rel="stylesheet"/>
    <link href="../Styles/kendo.metro.min.css" type="text/css" rel="stylesheet"/>
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        <script type="text/javascript">
            $(document).ready(function () {
                var window = $("#window");
                $("#openwindow").click(function () {
                    window.data("kendoWindow").open().center();
                });
                if (!window.data("kendoWindow")) {
                    window.kendoWindow({
                        content: "selectcontact.htm",
                        title: "Select a Contact",
                        actions: ["Refresh", "Close"],
                        visible: false,
                        modal: true,
                        close: onClose
                    });
                }
                function onClose(e) {
                    $("#selectedcontacts option").each(function() {
                        $("#returnedcontacts")
                            .append("<option></option>")
                            .prop("value", $(this).val())
                            .text($(this).text());
                    });}
            });
        </script>
        <p id="window"></p>
        <button id="openwindow" class="k-button">Open Window</button>
        <br/>
        <select id="returnedcontacts" multiple="multiple" ></select>
    </div>
</body>
</html>

Any idea why the code in my onClose event isn't doing anything?

Window

answered on 06 Mar 2018