Hello
I have 2 topics concerning the KendoUI Upload Widget:
1. Drag of uploaded image in Safari browser (Mac) starts upload
I have a DIV area onto which users can upload images. In the background I create a thumbnail of that and display it in the mentioned DIV area. Recently I realised in Safari browser (Mac) that if I drag such a displayed thumbnail onto that DIV it will upload that thumbnail too as an image and therefore a copy will be created. I would like to avoid that. Let's say:
- Ok: Drag images from outside into upload DIV
- Not ok: Drag thumbnail displayed in the DIV onto the same DIV that starts an upload
Since this "problem" exists not in Firefox and Safari I assume this is a browser behaviour. Question is if I can check whether a thumbnail will be re-uploaded or an image from outside.
2. Case sensitive upload validation
I have created a filter upload be restricting to specific image types:
allowedExtensions: [
'.jpg'
,
'jpeg'
,
'.png'
,
'.gif'
,
'.svg'
,
'.mp3'
,
'.mp4'
],
It works fine and does what it should. Recently a customer told me he can't upload his JPG-File. I checked that and found out that the extension was uppercased (.JPG). After renaming his image to 'xxx.jpg' I was able to upload the image. That tells me that the extension check is case sensitive. Of course I have enhanced the allowedExtenions list with all valid image extensions in upper case which will cover most situations. But what if someone wants to upload an image called 'image.Jpg'? Technically it is correct but will be prohibited.
All over: If it doesn't break the KendoUI security rules it would be nice if the extension check is not checking for case sensitive.
Regards
I have used Kendo Grid in my project, i need access values in each row, row wise. And need to compare the values between two columns.
For example:-
Student ID Student Name Student Physics StudentChemistry
1 xx 44 33
2 yy 55 66
The marks between two columns is required to be compared, and have to highlight the cell which contain less value.
Any row wise data iteration example would be helpful.
Thanks in advance.
Dipak
Hello,
I have a case when I want to have different behavior for clicking when user have clicked with control key pressed. Unfortunately I have no information on data which is passed to 'change' handler. Is there a way to obtain this information and have condition in logic depending if ctrl key is pressed or not?
Hi I add overflow-x: scroll to my grid and I get something odd, the scroll are cut in the middle of grid.
if I want to fix that in need to set width in px way I need to do that???(Look at the picture attached)
If there is another option I would love to hear.
I have a kendo grid with no datasource specified. Items get added to the grid via a javascript function:
var grid = $("#MyGrid").data("kendoGrid");
grid.dataSource.insert(data);
After items are added to the grid, if I call grid.saveAsExcel(); nothing gets exported and the grid get's cleared out.
What approach should I use to get the data to export?
No server call should be needed for this at all. I just want to export the items that have been added via javascript.
Hello i'm trying to figure out a way to conditionally "hide" a column using an "#if" statement, if a user is NOT a SuperUser and i'm trying this "#if" approach because i know that the 'template' : '#if(isAppAdmin == true) statement works fine. Or another approach that would work would be if there's a way to "hide" the 'edit' command button if a user is NOT a SuperUser, thanks for any suggestions or pointers!
{
'title' : 'Is Admin',
'field' : 'isAppAdmin',
'width' : '90px',
'hidden' : '#if(isSuperUser == false) {# true # } else {# false #}#',
'template' : '#if(isAppAdmin == true) {# yes # } else {# no #}#'
},
<script>
$(document).ready(function () {
$(".k-grid-edit",
"#grid").hide();
});
</script>
<
script
type
=
"text/x-kendo-template"
id
=
"admin-template"
>
<
div
class
=
"admin-container"
>
<
label
></
label
><
input
data-role
=
"combobox"
class
=
"k-combobox"
data-placeholder
=
"Select user..."
data-text-field
=
"userName"
data-value-field
=
"userId"
data-filter
=
"startswith"
data-bind
=
"value: selUser,source: userDs"
style
=
"width:300px;"
/>
<
a
>
<
img
data-bind
=
"click: onAddNew, attr: {src: addNewImgUrl}"
style
=
"vertical-align:middle;"
/>
<
span
>Add new</
span
>
</
a
>
</
div
>
<
hr
class
=
"hr-style"
/>
<
div
style
=
"margin:5px;"
>
<
div
id
=
"gridAppUsers"
data-role
=
"grid"
data-columns="[
{
'title' : 'User ID',
'field' : 'userId',
'width' : '130px'
},
{
'title' : 'Name',
'field' : 'userName',
'width' : '150px'
},
{
'title': 'Position',
'field': 'position'
},
{
'title' : 'Email',
'field' : 'email',
'width' : '170px'
},
{
'title' : 'Phone',
'field' : 'phoneNumber',
'width' : '120px'
},
{
'title' : 'Is App User',
'field' : 'isAppUser',
'width' : '90px',
'template' : '#if(isAppUser == true) {# yes # } else {# no #}#'
},
{
'title' : 'Is Admin',
'field' : 'isAppAdmin',
'width' : '90px',
'hidden' : '#if(isSuperUser == false) {# true # } else {# false #}#',
'template' : '#if(isAppAdmin == true) {# yes # } else {# no #}#'
},
{
'title' : 'Is Super User',
'field' : 'isSuperUser',
'width' : '90px',
'template' : '#if(isSuperUser == true) {# yes # } else {# no #}#'
},
{ 'command' : ['edit', 'destroy'], 'title': ' ', 'width': '180px' }
]"
data-editable
=
"inline"
data-sortable
=
"true"
data-scrollable
=
"true"
data-selectable
=
"single, row"
data-bind
=
"source: appUserDs , events: { save: onSave, remove: onDelete }"
>
</
div
>
</
div
>
</
script
>
<
script
>
$(document).ready(function () {
$(".k-grid-edit", "#grid").hide();
});
</
script
>
Say I have an event handler function defined for a grid's beforeEdit event:
beforeEdit:
function
(e) {
deferredpromise = doSomethingAsync(e.sender, e.model);
// we'll return back here immediately, while whatever async stuff we started is still executing
// and we'll return to Kendo from here before it is done
}
The code in doSomethingAsync() does an AJAX call, among other things. As far as I can tell, there's no way to have this work inside a Kendo event like beforeEdit? My function is going to return immediately, and even if I return a promise, Kendo isn't designed in any way to take it back and wait on it before continuing with preparing the editor? And there's no way short of somehow blocking on Javascript's execution while waiting for my ajax to complete (a horrible no-no) to prevent returning control to Kendo from the beforeEdit handler?
The problem I'm trying to solve is others making changes being made to the underlying remote database on records being displayed in the grid. If "myAttribute" starts out as "123" when the page is loaded, then someone else somehow modifies that to "456", if the first person edits the record to change something else, the stale "123" value will be sent out and used in the update. I was going to have the beforeEdit handler retrieve the data for the row being edited from the remote server, compare it to the dataRec, and update any stale fields, but I run into the async problem described above.
I don't know if this might sort-of-work anyway - the async handler would use the model's set() method, and perhaps the editor window would visually refresh any elements that get modified by the async handler behind its back after the binding is done and the window is up? Even then, there would be potential timing issues with the user and UI.
I just wanted to see if I was missing something obvious on waiting on the async to complete before returning from beforeEdit. The alternative we are looking at would be to add modification timestamps to the database tables involved, and if an update come in from Kendo and the stamps in the payload don't match the database record, the update would be rejected. Aside from not wanting to monkey with our existing database schema unless absolutely necessary, it would require the user to re-enter their edits after a refresh.
I also tried to add just a text html value bound to what i know is a populated field "employeeViewModel.ssn", but the binding doesn't seem to show the data, so thanks for any pointers ect!
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>New Employee</
title
>
</
head
>
<
body
>
<
div
id
=
"employeeWin"
style
=
"margin:5px;padding:5px;"
>
<
table
class
=
"bip-table"
cellpadding
=
"0"
cellspacing
=
"0"
>
<
tr
>
<
td
width
=
"60%"
>
<
input
class
=
"k-textbox"
type
=
"text"
disabled
=
"disabled"
style
=
"width:100%"
data-bind
=
"value:
employeeViewModel.ssn"
/>
</
td
>
</
tr
>
...................
onEmployeeUpdateSSN: function (e) {
var ssn = e.data.employeeViewModel.ssn;
var dob = e.data.employeeViewModel.dateOfBirth;
var lastName = e.data.employeeViewModel.lastName;
var firstName = e.data.employeeViewModel.firstName;
var title = lastName +","+firstName+ " SSN: " + ssn + " DOB: " + dob;
$('#winAddNew').kendoWindow({
actions: {},
width: '400px',
height: '300px',
title: title,
animation: {
open: {
effects: "fade:in",
durration: 1000
},
close: {
effects: 'fade:out',
duration: 1000
}
},
content: Bip.Common.bipWebPath() + 'templates/EmployeeUpdateSSNWin.html',
modal: true,
iframe: true,
resizable: false,
scrollable: false,
close: function () {
var data = $('#employeeData').val();
if (data.length > 2) {
var jObj = JSON.parse(data);
if (jObj.isSaved === true) {
var eItem = that.get('employeeItemDs').get(jObj.ssn);
//if (eItem) {
// alert('Emloyee ' + jObj.firstName + ' ' + jObj.lastName + ' already
existed'); //wrkipjames
//}
//else {
//that.setNewEmployeeData(jObj);
that.setNewEmployeeSSN(jObj);
//}
}
}
$('#employeeData').val('');
}
});
$('#winAddNew').data('kendoWindow').open();
$('#winAddNew').data('kendoWindow').center();
//$('.k-window-title').text(title);
//$('employeeWin').text(title);
//$('employeeWin').prev().find(".k-window-title").text(title);
//$('employeeWin').prev().find(".k-window-title").setOptions({
// title: "Notes on " + title,
// width: "60%"
//});
//window.element.find(".k-window-title").text(title);
//e.container.kendoWindow("title", title);
//$(e.container).parent().find(".k-window-title").text(title); works for the initial title, but doesn't change
//var dataItem = $('#cFoo', this.element)[0].kendoBindingTarget.source;
//var tHis = this;
//dataItem.bind('set', function (pEvent) {
// if (pEvent.field == 'Foo')
// tHis.setOptions({ title: 'Editing ' + title });
//});
//$('#winAddNew').data.setOptions({ title: title });
},
Hi All,
I am working on Telerik Kendo Grid. The scenerio is :
Passing function with parameter in columns.bound client template, but getting the below error
"Uncaught ReferenceError: InvoiceStatus is not defined"
Note : With out giving parameter in the function its working fine.
Please verify the code below :
<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<NH.Accounts.Models.ProviderPaymentMemberLevel>() //<a onclick='alert(\"#: encode(OrderName) #\")' href='\\#'>#= OrderName #</a> ClientTemplate("#=someFuntion(ExecutionStartDateTime)#");
.Name("grid_#=ProviderId#")
.HtmlAttributes(new { style = "backgroud-color:#27326e " }) //"<a onclick=\"showOrderDetail('#= OrderName #')\" href='\\#'>#= OrderName #</a>"
.Columns(columns =>
{
//"#if(TotalBalance > 0) {#" + "<span style='padding-right: 10px;'>$ #=TotalBalance#</span><input type='checkbox' 'checked=checked' class='master-pay-checkbox' data-providerid='#=ProviderId#'></input>#}#"
columns.Bound(o => o.InvoiceStatus).Filterable(false).Width(10).ClientTemplate("#= GetInvoiceStatusColor(InvoiceStatus) #").HtmlAttributes(new { style = "text-align: left" });
Thanks
Bhanu