Questions on Kendo UI for jQuery Forum

1 answer

407 views

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

103 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

200 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

306 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

102 views

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

103 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

223 views

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

0 answers

941 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

2 answers

894 views

Position of Toolbar for editor

Is there any way to position the inline editor toolbar , say to the right of the editor div, rather than at the top. During my tests if I use an iPad then the toolbar disappears above the fold, when focus is on the editor, as the iPad keyboard appears, of course when I lose focus, on the editor again, the toolbar hides too, so I can't format the text. If I could position the toolbar to the left or the right, that would help.

Editor