Telerik Forums
Kendo UI for jQuery Forum
6 answers
102 views

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

Plamen
Telerik team
 answered on 18 Jul 2018
5 answers
781 views

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

 

dipak
Top achievements
Rank 1
 answered on 18 Jul 2018
1 answer
506 views

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?

Preslav
Telerik team
 answered on 17 Jul 2018
1 answer
1.4K+ views

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. 

 

 

 

Peter Milchev
Telerik team
 answered on 17 Jul 2018
2 answers
57 views

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.

 

Eyup
Telerik team
 answered on 17 Jul 2018
1 answer
14.1K+ views

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>
Tsvetina
Telerik team
 answered on 17 Jul 2018
1 answer
1.7K+ views

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.

Stefan
Telerik team
 answered on 17 Jul 2018
4 answers
1.4K+ views
Using client side paging, we load the data for our grid. The multi-select filter works just fine. Now, we change some parameters and reload the grid but the additional options that should now appear in the filtering do not appear. Is there a way to have the grid reload the multi select filter options after the data is rebound on the grid?
Bryan Patrick
Top achievements
Rank 1
 answered on 16 Jul 2018
4 answers
2.2K+ views
Hello, i'm trying to change the "title" value for a popup kendoWindow and it works for the first iteration, but when i try to change the title based on user data values, the "title" doesn't change and from what i've read, the "title" isn't a dynamic value, so i've tried a bunch of different solutions i've found on forums, but no luck so far.

 

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>
...................
</html>
           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 });
            },                                                     
robert
Top achievements
Rank 1
 answered on 16 Jul 2018
1 answer
1.4K+ views

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

Georgi
Telerik team
 answered on 16 Jul 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?