Questions on Kendo UI for jQuery Forum

5 answers

8.5K+ views

I'm trialing Kendo UI and currently experimenting with the Toolbar widget. Got it working ok, but I need to right align certain items on the toolbar - any idea how I would do this?

Toolbar

answered on 06 Nov 2023

1 answer

737 views

Month picker content template

I have a kendoDatePicker with dept set to year acting as a month filter on data displayed in a grid.
I want to visualize for the user if a particular month has data and am looking for a way to customize the content of the month cells.

$("#period-filter").kendoDatePicker({
    start: "year",
    depth: "year",
    format: "MMM yyyy",
    value: new Date
});

See screenshot.

It seems the API does not support such a scenario out of the box.

Any suggestions?

/Morten

DatePicker

answered on 06 Nov 2023

1 answer

104 views

Opened a Dropdownlist in window.parent Error

i have two html (main.html and submission.html), but when i tried to open a kendo window to window.parent (main.html) and create a kendo dropdownlist from the kendo window and pass datasource to the dropdownlist, but it will have error

main.html

submission.html

window.parent.$("<div>").kendoWindow().content("<div id="dropdownlist"></div>").center().open();

window.parent.$("#dropdownlist").kendoDropDownList({

dataSource: [ { id: "1", name: "123" } ],

dataTextField: "name",

dataValueField: "id",

optionLabel: "-- Please Select --"

})

</script>

DropDownList

Window

answered on 01 Nov 2023

1 answer

519 views

Sizing an icon on a kendoButton

Now that we are supposed to switch to svg icons, away from the font icons, I was wondering if there is an easy way to size the buttons? I use a custom class for the buttons right now and on two of the buttons I am using icons:

They seem to have shrunk. I am guessing this is because of the switch from font icons to the svg icons?

To be honest the icon on the refresh button for v 2020.1.118 disappeared and I had to find a suitable replacement.

So some of the sizing issue for that button might be caused by what icon I picked -- icon: "refresh" didn't seem to produce an icon, so I went with icon "arrowRotateCwIcon".

I just need some sugestions on how to maintain my custom style and get the icons to appear bigger. The style I am using is below:

.submit {
    width: 110px;
    height: 30px;
    padding: 20px 16px 20px 16px;
    border-radius: 4px;
    background-color: #1e98d7;
    box-sizing: border-box;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.35);
    font-family: "Roboto Medium", "Roboto", sans-serif;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: normal;
    letter-spacing: 0.4px;
}

    .submit:hover {
        background-color: #0084cf;
        box-sizing: border-box;
    }

    .submit:active {
        background-color: #50a5d5;
        box-sizing: border-box;
    }

Regards,

George

Button

Styling

answered on 01 Nov 2023

2 answers

158 views

Search and Filter does not filter with child grids/tables when using detailInit()

Hi,

Need to understand how I can get the filter and search features for the Kendo grid to search for strings in child grid rows as well as the parent grid rows... right now if I use the Search window, or the Filter feature at the parent level, the Kendo grid will only search in the domain/area of the parent rows.

How can I include the child rows? This is problematic because, as I understand it the child rows are not loaded until the user clicks the left side triangle icon to open the child rows. Customer wants this.

My understanding is this would require all the child rows to rendered... then searched, and all rows with out the string or or substring would be filtered out?

Before I embark on manipulating the grid, wondered if there was a better solution or way to go about this?

Regards,

George

Filter

Grid

answered on 31 Oct 2023

0 answers

293 views

Show error when file upload fails

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

1 answer

401 views

Paging message not showing

I'm testing out Kendo grid for .net core razor.

@(Html.Kendo().Grid<Models.Address>(Model.addresses)

.Name("grid")
.Scrollable()
.Pageable(pager => pager
.Messages(messages => messages.Display("Records from {0} to {1} of {2}"))
)
.Sortable()

.Columns(columns =>
{
columns.Bound(column => column.Id);
columns.Bound(column => column.StreetAddress);
columns.Bound(column => column.City);
columns.Bound(column => column.Zip);
columns.Bound(column => column.Id).ClientTemplate("<input type='button' class='k-button' onclick=\"location.href='./AddressEdit/#=Id#'\" value='Edit' />")
.Title(" ");
})
.DataSource(ds => ds
.Ajax()
.PageSize(20)
.ServerOperation(false)
)
)

For some reason the paging information below always has style display:none when inspecting the source. Is there a setting to make it visible?

<span class="k-pager-info k-label" style="display: none;">Records from 41 to 60 of 200</span>

Grid

answered on 31 Oct 2023

1 answer

136 views

[Solved] Treelist not allowing filter when reorderable

I am seeing an issue with my kendo treelist control in version (2023.2.718) which is reproducible in kendo dojo (https://dojo.telerik.com/iDogeqoh). Essentially, I set my treelist to be reorderable and filterable using row filters. When I do this, I cannot type into the filter and holding and dragging the filter box seems to treat it like a header instead. In fact, when you click and drag that box, the screen freezes and you can't do anything with the page... I found that the selector being passed to the reorderable filter was '.k-grid-header th.k-header' which was being filled by the filter row. If you change this value to '.k-grid-header tr:not(.k-filter-row) th.k-header', the issue goes away.

TreeList

answered on 31 Oct 2023

0 answers

154 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

1 answer

269 views

[Solved] Difference between treelist and grid

When both perform the same action, the grid does not work.

treelist : https://dojo.telerik.com/ecIlIhOt/9
grid: https://dojo.telerik.com/OnUZeMEc/7

action: run -> button1 click -> select Item -> button2 click

The tree list can be selected, but the grid cannot.

Why is that so? Thank you for your reply.

Grid

TreeList

answered on 27 Oct 2023