Questions on Kendo UI for jQuery Forum

2 answers

2.6K+ views

Update selected rows column throws Cannot read property 'set' of undefined

When running the code below, the first selected row updates but the next one throws a "Cannot read property 'set' of undefined".

I have the datasource batch set to true and am using dataItem for each selected row and setting the value from there.

var grid = $("#grid").data("kendoGrid");

var selectedRows = grid.select();

if (selectedRows.length > 0 && unit != "") {

$.each(selectedRows, function (i, row) {

var data = grid.dataItem(row);

data.set('UnitsInStock', unit);

});

grid.saveChanges();

}

Here is a dojo sample of it http://dojo.telerik.com/aFIwuYUs

Grid

answered on 20 Apr 2021

1 answer

515 views

Kendo Tooltip position with DatePicker

Hello,

please check this example: https://dojo.telerik.com/EVEToriY

When tooltip is used with DatePicker, it shows over picker icon. Is there any way how to display it next to icon and not next to input?

I know I can use offset property to move it, but it is little hack for me.

Regards

René

ToolTip

answered on 20 Apr 2021

11 answers

5.9K+ views

Column readonly in edit mode but editable in add mode?

Hi,
I have a Kendo UI grid where the first column is readyonly:




schema: {
    data: "data",
    model: {
        id: "ID",
        fields: {
            firstName: { editable: false },
            lastName: { validation: { required: {message: "Must not be empty!"}} }
        }
    }
},



In edit mode this is just fine, but if I want to add a new row/item then of course the firstName should be editable.

How I can get this working?



I tried to find a 'best practice' but seems to be not so easy.

Is there any 'best practice'?



Thanks a lot!

Grid

answered on 20 Apr 2021

2 answers

114 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.9K+ 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

326 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

509 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

1.0K+ 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

762 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.6K+ 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