Questions on Kendo UI for jQuery Forum

2 answers

105 views

is it possible to configure grid using Or statement for multi-columns filtering?

basically right now grid using AND when filter column1 and column2 and column3, is it possible to change the filter logic to OR?

Grid

answered on 20 Apr 2021

4 answers

3.8K+ views

Setting the default filter operator?

How do I set the default filter operator in a grid?

I define my operators in the following way, and the default operator is Is Equal To. I would like to have Contains as my default operator.

filterable: {

extra: false, //do not show extra filters

operators: { // redefine the string operators

string: {

contains: "Contains",

startswith: "Starts With",

eq: "Is Equal To"

}

Grid

answered on 20 Apr 2021

7 answers

303 views

Invalid PDF created when using Material Design Icon

Hi,

I have a problem when exporting a pdf where the element being exported contained a Material Design Icon. The PDF is invalid and does not display correctly in Adobe Reader.

I check the validity here https://www.pdf-online.com/osa/validate.aspx

The PDF does render correctly in Chrome PDF viewer though.

Any suggestions as to why?

<html>
<head>
<meta charset="utf-8" />
<title>Getting Started with Kendo UI for jQuery</title>

<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>

<p>Hello <a href="https://docs.telerik.com/kendo-ui/intro/first-steps">Kendo UI for jQuery</a>!
This is version <strong id="kendoVersion"></strong>.</p>

<script>

$(function() {

$("#kendoVersion").text(kendo.version);

});

</script>

<script>
kendo.pdf.defineFont({
"Material Design Icons": "https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/fonts/materialdesignicons-webfont.ttf"
});
</script>
<script type="text/javascript">
var generatePDF = function () {
kendo.drawing.drawDOM("#PdfPrintTest", {
paperSize: 'auto',
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
}).then(function (group) {
kendo.drawing.pdf.saveAs(group, "test.pdf")
});
};
</script>
<button onclick="generatePDF();">Download</button>
<div id="PdfPrintTest">
Bob lives in a <span class="mdi mdi-grass"></span>. and he likes it a lot
</div>

</body>
</html>

General Discussions

answered on 20 Apr 2021

1 answer

457 views

Notifications not stacking

Hi team,

I'm trying to setup notifications on my project, using your demo : https://demos.telerik.com/kendo-ui/notification/templates. I managed to make notifications appears like in your tutorial, but they are not stacking when multiple of them are open in the same time.

Here's my code :

function showNotification(_title, _txt, _type) {

var notification = $("#notificationPopup").kendoNotification({

position: {

pinned: true,

top: 30,

right: 30

},

autoHideAfter: 0,

stacking: "down",

templates: [{

type: "success",

template: $("#successTemplate").html()

}, {

type: "warning",

template: $("#warningTemplate").html()

}, {

type: "error",

template: $("#errorTemplate").html()

}]

}).data("kendoNotification");

notification.show({

title: _title,

message: _txt

}, _type);

}

<span id="notificationPopup" style="display:none;"></span>

<script id="successTemplate" type="text/x-kendo-template">

<div class="notifSuccess">

<h3>#= title #</h3>

<p>#= message #</p>

</div>

</script>

<script id="warningTemplate" type="text/x-kendo-template">

<div class="notifWarning">

<h3>#= title #</h3>

<p>#= message #</p>

</div>

</script>

<script id="errorTemplate" type="text/x-kendo-template">

<div class="notifError">

<h3>#= title #</h3>

<p>#= message #</p>

</div>

</script>

I call showNotification() whenever I want one to appear, but they do one in front each other instead of stacking in the direction I indicated.

Any idea of what I missed ?

Best regards,

Valentin

Notification

answered on 20 Apr 2021

3 answers

963 views

Base64 of the edited image

how to get base64 from the edited image, any sample or documentation?

tks

ImageEditor

answered on 19 Apr 2021

6 answers

711 views

destroying grid does not completely destroy it, apparently

Sorry if this question formats oddly. I'm using Firefox at the moment and wordwrap isn't working correctly here on the forum with FF v22.0.

My application has to do multiple searches against a large database, one search after the other, every few minutes, all day long.

Users click a map, the app gets the latitude and longitude of the location, and then queries the database for entities within a given radius.
The entities are displayed in the grid. Lather. Rinse. Repeat.

I destroy the grid before each search and delay the search for a fraction of a second (I've tried as long as 1.5 seconds) to give the "destruction" time in which to complete.

On the second and subsequent searches, the grid loses its groupable feature. The grouping-is-not-allowed icon when the user tries to drag the column-header to the group-panel.

It may be relevant that the grid is on a panelBar.

function doSearch() {

    var existingGrid = $('#grid').data('kendoGrid');
    if (existingGrid) {
        existingGrid.destroy();
        existingGrid.wrapper.html("");
    }

    setTimeout(function () {
        FetchData();       // the success handler for this AJAX call instantiates and configures the grid
    }, 222);

}

Grid

answered on 19 Apr 2021

10 answers

2.5K+ views

Export pdf and send to the server instead of the client?

I need to capture a multi page form in pdf format and then save it to the server with the record and not to the client. This is the code I wrote that send it to the client, how can I modify it to send it to the server instead

root.options.set("pdf", {
multiPage: 'true'
});
$('#formContainer .appPage').each(function (section) {
kendo.drawing.drawDOM(this).then(function (group) {
group.options.set("pdf", {
margin: {
left: "1cm",
right: "1cm",
top: "1cm",
bottom: "1cm"
}
});
root.append(group);
});
});

kendo.drawing.pdf.saveAs(root, "App.pdf");

Drawing API

answered on 17 Apr 2021

1 answer

395 views

Dynamically display both text and animation with kendo.ui.progress

Hello,

I have been able to add text to the kendo.ui.progress with the below JQuery and CSS. However, there are only certain times when processing an AJAX operation that I would like to display text and animation via kendo.ui.progress. Is there a way to clear the "loading" message after the ajax call is complete?

kendo.ui.progress.messages = {

loading: "Processing file remittance. Please wait.."

};

kendo.ui.progress($("body"), true);

span.k-loading-text {

font-size: 1.1rem;

text-indent: 0;

top: 55%;

display: inline-block;

padding: 5px;

background-color: #fff;

border-radius: 5px;

border: 1px solid #555;

}

General Discussions

answered on 16 Apr 2021

3 answers

208 views

Spreadsheet component throwing error

hi,

Spreadsheet component is throwing an error while opening the attached file using fromFile method -> https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/methods/fromfile#:~:text=Clears%20the%20spreadsheet%20and%20populates,recent%20version%20of%20other%20browsers.

If I remove the filters than it works fine.

Can you please check.

Regards,

Jaspreet

Spreadsheet

answered on 15 Apr 2021

1 answer

109 views

Possible to hide the deleteTag? (X)

I can't find an options to hide the deleteTag. I want the user to select/deselect items by clicking on the items in the multiselect dropdown, and not by clicking the deleteTag on each tag.

I can change the popup-message when the mouse is hovering the 'X', but I can't find an option to remove the 'X'

MultiSelect

answered on 15 Apr 2021