Questions on Kendo UI for jQuery Forum

4 answers

184 views

How to cancelChanges(model) for item in destroyed state?

I am using the following components:

Kendo 2015.3.1111 Commercial

jQuery 2.1.4

I have 2 grids setup with DragDrop. Each grid is bound to a kendo.data.DataSource. If a user removes an item from one grid and then decides to add that item back (before saving to the remote data source) I would like to cancelChanges on the datasource bound to the grid for the one item that was previously removed. This will prevent a remote destroy and remote create call for this one item where the user changed his/her mind.

* Everything else works in this configuration except the cancelChanges(model) call. I do not receive an error on the cancelChanges call, but the item does not go back to its pristine state and remains in the destroyed collection. When I make the sync call, the item is destroyed on the remote data. DataSource documentation suggests that cancelChanges will meet my needs. Please let me know where I am going wrong.

Here is my code in the Drop event of the grid. (DataSource config is below the Drop Code) Thanks for your help.

Ben

gridUserRoles.element.kendoDropTarget({

drop: function (e) {

if (viewModel.get('isInputEnabled')) {

var dataItem = rolesNotAssignedDataSource.getByUid(e.draggable.currentTarget.data("uid"));

rolesNotAssignedDataSource.remove(dataItem);

var destroyedData = rolesDataSource.destroyed();

if (destroyedData.length > 0) {

//see if tenantApplicationRoleKey is in the already destroyed items of the datasource

for (var i = 0; i < destroyedData.length; i++) {

if (dataItem.tenantApplicationRoleKey === destroyedData[i].tenantApplicationRoleKey) {

//Cancel destroy for this one item

var itemToRestore = destroyedData[i];

rolesDataSource.cancelChanges(itemToRestore);

return;

}

var addItem = {

tenantApplicationRoleId: dataItem.tenantApplicationRoleId,

tenantApplicationRoleKey: dataItem.tenantApplicationRoleKey,

name: dataItem.name,

tenantUserTenantApplicationRoleKey: 0,

tenantUserKey: viewModel.get('selectedUser.tenantUserKey')

};

rolesDataSource.add(addItem);

                    }

rolesDataSource = new kendo.data.DataSource({
    schema: {
        model: {
            id: 'tenantUserTenantApplicationRoleKey',
            fields: {
                tenantUserTenantApplicationRoleKey: {type: 'number'},
                createdByTenantUserName: { type: 'string', editable: false },
                createdOnDate: { type: 'date', editable: false },
                modifiedByTenantUserName: { type: 'string', editable: false },
                modifiedOnDate: { type: 'date', editable: false },
                name: { type: 'string', validation: { required: true } },
                tenantApplicationRoleId: { type: 'string', validation: { required: true } },
                tenantApplicationRoleKey: { type: 'number', validation: { required: true } },
                tenantUserKey: { type: 'number', validation: {required: true}}
            },
            errors: 'message'
        }
    },
    error: function (e) {
        console.log(e.xhr.responseText);
        var errorString = config.getErrorMessage(e);
        viewModel.set('showAlert', true);
        viewModel.set('alertMessage', errorString);
        kendo.ui.progress(editWindow.element, false);
    },
    transport: {
        read: {
            type: 'GET',
            url: config.apiUrl + 'api/Users/0/Roles',
            dataType: 'json',
            contentType: "application/json",
            beforeSend: function (req) {
                req.setRequestHeader('Authorization', 'Bearer ' + user.userProfile.token);
            }
        },
        create: {
            type: 'POST',
            url: function (e) {
                return config.apiUrl + 'api/Users/' + e.tenantUserKey + '/Roles';
            },
            dataType: 'json',
            contentType: "application/json",
            beforeSend: function (req) {
                req.setRequestHeader('Authorization', 'Bearer ' + user.userProfile.token);
            }
        },
        destroy: {
            type: 'DELETE',
            url: function (e) {
                return config.apiUrl + 'api/Users/' + e.tenantUserKey + '/Roles/' + e.tenantUserTenantApplicationRoleKey;
            },
            //dataType: 'json',
            contentType: "application/json",
            beforeSend: function (req) {
                req.setRequestHeader('Authorization', 'Bearer ' + user.userProfile.token);
            }
        },
        parameterMap: function (data, type) {
            if (type !== 'read') {
                return kendo.stringify(data);
            }
        }
    }
});

Data Source

answered on 19 Jan 2016

3 answers

96 views

Possible bug or scheduler misuse?

Hi,

Duplicate of error here: http://dojo.telerik.com/emIrI

Scenario: when timelineWorkWeek is selected and showWorkHours: true I get Uncaught TypeError: Cannot read property 'head' of undefined

I do know that showWorkHours is supported on day / week

Do you plan to support showWorkHours on timelineWorkWeek anytime soon?

Thank you

Scheduler

answered on 19 Jan 2016

1 answer

119 views

Culture files in v2016.1.112 have a bad UMD wrapper

I know there are threads about the main JS files having bad UMD wrappers, but the cultures have a different issue.

Prior to v2016.1.112, there weren't any dependencies on kendo.core in the culture files. They've been added as below, and are looking for kendo.core in the current path.

(function(f){

if (typeof define === 'function' && define.amd) {

define([ "./kendo.core" ], f);

} else {

f();

}

Obviously, kendo.core isn't in the same path as the culture files, so RequireJS fails to load the file.

Could a fix for this please be rolled into the same release that is presumably coming very soon?

Regards,

Sean.

General Discussions

answered on 19 Jan 2016

3 answers

2.7K+ views

Get Kendo UI Version

Is there a function to get the Kendo UI version we are working with?

Regards,

Simon

General Discussions

answered on 19 Jan 2016

6 answers

1.6K+ views

Grid custom transport update function not firing

Update:

Digging through the code, it seems that the settings.transport is being ignored in the code. I am looking at Kendo.web.js line 6171. Here the following is false:

transport.options.update == transport["update"]

Where "transport.options.update" is my function and "transport["update"]" is the default RemoteTransport Update method. So when the code below it fires, it calls the default and not mine. Is this a bug, or am I doing something wrong?

Maybe I have a dirty eye, but I don't see why this is not working:

var settings =
{
dataSource:
{
transport:
{
read: apiUrl,
update: function (e)
{
// Nothing, happens, this is never called
console.log("Hello?");
debugger;
alert('update');
}
}
}
}

but this DOES work:

var settings =
{
dataSource:
{
transport:
{
read: apiUrl,
update:
{
url: editApiUrl,
type: "POST",
data: function (e)
{
debugger;
alert('works');
}
}
}
}
}

I am copying the first sample from here:

var dataSource = new kendo.data.DataSource({
    transport: {
        update: function(options) {
            // make AJAX request to the remote service

            $.ajax( {
                url: "/orders/update",
                data: options.data, // the "data" field contains paging, sorting, filtering and grouping data
                success: function(result) {
                    // notify the DataSource that the operation is complete

                    options.success(result);
                }
            });
        }
    }
});

Grid

answered on 19 Jan 2016

1 answer

171 views

[Solved] NumericTextBox disappears with ng-switch

Hi,

i use NumericTextbox with ng-switch and try to rebind it when a decimals value changes. But when the k-rebind value changes, it simply disappears.

<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<div ng-repeat="a in list" ng-switch="a">
<input ng-switch-when="1" kendo-numeric-text-box k-min="0" k-max="100" k-decimals="decimals" k-format="format" k-rebind="decimals" k-ng-model="value" style="width: 100%;" />
</p>
</div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>

<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope, $timeout){
$scope.value = 50;

$scope.list = [1, 2, 3, 4];

$scope.decimals = 0;
$scope.format = "n0";

$timeout(function(){
$scope.format = "n3"
$scope.decimals = 3
}, 500);

})
</script>

Thanks for your help

Antje

NumericTextBox

answered on 19 Jan 2016

2 answers

613 views

Display text on button and change color of the button

Hello,

I want to display text on button based on the value from database.

So, button text varies in each row(Ex: In service, Expired, 30 days Expire).

1) How can I display text in button in Kendo row ?

2) I want to change the color of the button based on the above 3 values. (Ex: In Service - Green, Expired - Red, 30 day expire - Yellow)

I want to display that button in the custom command button in below code

How can I do this ?

@(Html.Kendo().Grid(Model)

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.UserName).Title("User").Filterable(false);

columns.Bound(c => c.Role).Title("Role");

//columns.Command(command => command.Custom().Click("showDetails"));

})

.HtmlAttributes(new { style = "height: 500px;" })

.Sortable()

.Scrollable(x => x.Height(400))

.Filterable()

.Pageable(x => x.Enabled(true).PreviousNext(false).PageSizes(true))

)

Grid

answered on 19 Jan 2016

1 answer

309 views

Mouse hover on ListView

Hi, is it possible to get a mouse hover event and the list item under the mouse?
I tried doing a JQuery hover on the item elements of the ListView but it never fires. Has anyone tried to accomplish this?

ListView

answered on 19 Jan 2016

9 answers

222 views

PDF export - can't see the title

Hi,

On PDF export the dataItem's title does not appear properly.

Here is my code:

schema: {
model: {
fields: {
id: {from: "id", defaultValue: null, nullable: true},
start: {type: "date", from: "start"},
end: {type: "date", from: "end"},
recurrenceRule: {from: "recurrenceRule", defaultValue: "FREQ=WEEKLY"},
route_id: {
from: "route_id",
defaultValue: $scope.editSite.routes.length > 0 ? $scope.editSite.routes[0] : 0,
validation: {required: true}
},
route_name: {from: "route_name"},
isAllDay: {type: "boolean", defaultValue: false}
}
}
}

<div id="scheduler" kendo-scheduler class="clear" k-options="schedulerOptions">

<span k-event-template class='route-scheduler-title'>{{dataItem.route_name}}</span>

</div>

Scheduler

answered on 19 Jan 2016

3 answers

843 views

Locked columns - Get selected rows

Hi,

I have a selectable grid which has one locked column.
When using select() method to get selected rows, I get duplicated results.

If I select one row the result will contain two jQuery objects, beside the row there will also be separate jQuery object containing just the selected locked column.

Check this example: http://dojo.telerik.com/EyEMO

Is this how it should work or is this a bug?
In my case I would like to get the same results as I would get without locked column.

Grid

answered on 19 Jan 2016