Questions on Kendo UI for jQuery Forum

1 answer

140 views

TreeList refresh issue with AngularJS and column template

Hi,
I have a treelist with a column template (angular templates).

When I call refresh or setDataSource method TreeList doesn't refresh columns that contain angular templates for existing rows.

All works fine when I use kendo templates instead angular templates.

You can find attached an example that reproduce the issue when I'm trying to call setDataSource method.

I'm using a lot of angular templates in my grids and I want to continue to use them also in treelist.

Can you help me?

Thanks

TreeList

answered on 02 Dec 2014

1 answer

206 views

Referencing an Angular controller inside a ModalView

As a content of a modalView I'd like to use an Angular template (because the whole app is Angular based). But it seems like it doesn't see an Angular controller. So, for example, ng-click for a button inside a template doesn't work. On the other hand if I use onclick for the button it works fine (with just JavaScript code outside of any angular controller). The question is if it is possible at all to use an Angular controller/directive inside a modalView?

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="//cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.silver.mobile.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2014.1.416/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>

<script src="Scripts/angular-kendo.js"></script>

<script id="template" type="text/x-kendo-template">
<div ng-app="MyApp" ng-controller="MyCtrl">
<button ng-click="closeD()">cancel</button> 

</div>
</script>

<script>
angular.module("MyApp", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http) {
$scope.openD = function () {
var template = kendo.template($("#template").html());
$("#modalview-login").html(template);
$("#modalview-login").data("kendoMobileModalView").open();
}
$scope.closeD = function () {
$("#modalview-login-button").data("kendoMobileModalView").close();
}
});

</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<div>
<button ng-click="openD()">Open ModalView</button>
</div>
<div id="modalview-login" data-kendo-mobile-modal-view="modal" style="width: 50%;"></div>

</div>
<script>
function closeD() {
$("#modalview-login").data("kendoMobileModalView").close();
}
</script>
</body>
</html>

ModalView

answered on 02 Dec 2014

3 answers

161 views

[Solved] Slide In Effect using AngularJS

Hi There,

I'm looking at how Kendo UI implement "Slide In" effect at http://demos.telerik.com/kendo-ui/fx/slidein, I'm curious whether if I could do that with Angular since Kendo UI is supporting Angular out of the box now.

Specifically for this line:
var slide = kendo.fx($("#slide-in-share")).slideIn("left")

What would the angular version for it?

Cheers,
Leo

Effects

answered on 02 Dec 2014

3 answers

1.2K+ views

[Solved] Kendo Grid Checkbox with Angular JS

I am using angular js and I have a kendo grid in a directive which we are using as a widget on a page. I have one of the grid column defined as a checkbox. If I check this checkbox on a row all other checkboxes on all the rows should be unchecked. The Save button will call the service and issue a ajax call and update the row with the checkbox value.

I cannot figure out how to trigger the checkbox click to check/uncheck all the other checkbox and also when the user clicks the Save button how to get the current value of the checkbox.

I have attached my directive controller and the service which has the grid options. Any help will be appreciated. Thanks
Ajay.

Grid

answered on 02 Dec 2014

1 answer

103 views

Datefilter lte work like lt

Hello everyone

We found another bug in the kendo grid.
The Operator "lte" in the Date-Filter work like "lt".

You can reproduce the issue in this fiddle:
http://jsfiddle.net/mesk1dx9/

Try to filter the date with "is before or equal to" 7/8/1996 an you only will get the first two entrys before 7/8/96, not the follwoing two who are at 7/8/96.
Is there a workaround now?

Greetings

Grid

answered on 02 Dec 2014

2 answers

232 views

Diagram Sample - "box-col" style ?

Greetings,

I'm driving myself crazy trying to figure out where the box and box-col css classes are defined in this diagram sample: http://demos.telerik.com/kendo-ui/diagram/api

When I launch the sample from the link above it has a nice column layout.

When I choose to Edit the sample (scroll down to the top of the code part and hit the edit button), the dojo version of the diagram sample runs, but there are no column layouts.

Diagram

answered on 01 Dec 2014

2 answers

560 views

Custom edit modal

Is there a way to launch a custom modal when clicking the edit button in shape toolbar? I can launch my custom modal from edit event but still getting the standard edit popup window.

See attached for details.

Thanks.
Rich

Diagram

answered on 01 Dec 2014

3 answers

101 views

Transport methods and ids created on the server

My model looks like follows:

var Sample = kendo.data.Model.define({

id: 'id',

fields: {

id: {

type: 'string',

nullable: true,

editable: false

},

....

}

});

My dataSource uses this model and implements transport methods as functions because I need header and other optios on $.ajax calls. I only represent the create function below:

...

transport: {

create: function(options) {

$.ajax(...).done(options.success).fail(options.error);

}

},

...

My ajax call returns an updated object with an id created on the server, a created date, an updated date and more.

My issue is the object added to the datasource with a null id and sent to the server for creation is not updated with the data I receive in response from the server.

After some digging into the kendo source code, it seems that an update is attempted by searching the object with the same id, but in my scenario teh id changes because it is created on the server. In this case, the object is not updated.

Can you please validate the following workaround or suggest any better ways:

...

transport: {

create: function(options) {

var that = this;

$.ajax(...)

.done(function(response) {

that.get(null).accept(response); //<--------------------- this actually updates the item with id === null

options.success(response);

)

.fail(options.error);

}

},

...

Data Source

answered on 01 Dec 2014

8 answers

291 views

Read Can't get Right Json from Server

I found a very strange problem, and it took my another 4 hours, can't solve it:

BackGround: the latest kendoUI. the scheduler could show it's self, with no js errors. The client-side code is below:

jQuery("#workcalendar").kendoScheduler({

date: new Date(),

startTime: new Date("2013/6/13 07:00 AM"),

height: 600,

views: [

"day",

{ type: "workWeek", selected: true },

"week",

"month",

"agenda"

],

//timezone: "Etc/UTC",

dataSource:

{

transport:

{

read:

{

type: "POST",

url: "KPIGetData/DimData.aspx?SearchInput=schedulerevent",

dataType: "json"

},

update:

{

type: "POST",

url: "KPIGetData/DimSavingData.aspx?SearchInput=schedulereventedit",

dataType: "json"

},

create:

{

type: "POST",

url: "KPIGetData/DimData.aspx?SearchInput=schedulereventadd",

dataType: "json"

},

destroy:

{

type: "POST",

url: "KPIGetData/DimData.aspx?SearchInput=schedulereventdel",

dataType: "json"

}

,

parameterMap: function(options, operation)

{

if (operation === "read")

{

var result ="&SearchValue="+CurrentUserID+"&StartTime="+SearchTimeStart+"&EndTime"+SearchTimeEnd;

alert("hit:"+result);

return kendo.stringify(result);

}

else if (operation !== "read" && options.models)

{

return {models: kendo.stringify(options.models)};

}

,

schema:

{

model:

{

id: "taskId",

fields:

{

taskId: { from: "TaskID",type: "number"},

title: { from: "Title",defaultValue: "No title", validation: { required: true }},

start: { type: "date", from: "Start" },

end: { type: "date", from: "End" },

description: { from: "Description" },

recurrenceId: { from: "RecurrenceID" },

recurrenceRule: { from: "RecurrenceRule" },

recurrenceException: {from:"RecurrenceException"},

ownerId: {from: "OwnerID", defaultValue: 1},

isAllDay: {type: "boolean",from:"IsAllDay"}

}

},

requestEnd: function(e)

{

var response = e.response;

alert("here:"+response +"|"+JSON.stringify(response));

},

error: function(e) {

alert(e.status);

}

});

On the server side, it's asp.net c#. And I have an A/B test.

Test A:

string test1 = "[{\"TaskID123\":\"885\"}]";

Response.Clear();

Response.ContentType = "application/json";

Response.Charset = "UTF-8";

Response.Write(test1);

Response.End();

In Test A, I just write a json string into an variable, then response back it to the browser. In the requestEnd: I received it correctlly. Please NOTE that I know it's not a full set of the fields, my point is not talking about that, just see the Test B.

Test B:

DataTable dt = null;

DataRow[] drdtv = null;

using (System.Data.SqlClient.SqlConnection cn = new System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings["HROK"].ConnectionString))

{

cn.Open();

string sql = "select top 1 TableID from OAOrderTaskFactBill";

SqlCommand cmd = new SqlCommand(sql, cn);

SqlClient.SqlDataAdapter ada =new SqlClient.SqlDataAdapter();

ada.SelectCommand = cmd;

ada.Fill(dt);

}

string test2 = "[{" + "\"" + "TaskID" + "\"" + ":" + "\"" + dt.Rows[0]["TableID"].ToString() + "\"" + "}]";

Response.Clear();

Response.ContentType = "application/json";

Response.Charset = "UTF-8";

Response.Write(test2);

Response.End();

Please NOTE that the C# has no errors, and the server could return the json VERY WELL. I know it because I copy the "KPIGetData/DimData.aspx?SearchInput=schedulerevent/&SearchValue="+CurrentUserID+"&StartTime="+SearchTimeStart+"&EndTime"+SearchTimeEnd" in to the brower address-line and enter to see the return json. In TestA and TestB, both return [{"TaskID123":"885"}]

But in TestB, the Scheduler can't receive the json in the requestEnd: at all!
alert("here:"+response +"|"+JSON.stringify(response));
it shows: here:undefined|undefined

I test these for many times, the result is the same.
I found that the ONLY diffrent between A/B is, in TestA, the Json is in a constant, hard coded string like 885, even you hard code it into an variable, it's a constant in fact. But in TestB, the Json is created from a real variable, which get value from database.

So the conclusion is, (I know it's impossible, but don't know what's wrong), the Scheduler's Read could only get Json from a hard coded constant string, may be your demo site use the hard coded constant string Json to demo in your backend? When the Json is not hard coded in the C#, Scheduler will get an undefined or just an empty.

By the way, I have tested this:
return new JavaScriptSerializer().Serialize(Tasktings);
Taskting is a list<> which created to hold the values.
The result is same.

I swear I met this problem( a hard coded json in c#, is diffrent with one created from variable) many years ago. But I did not write down what happened and how to solve it.

Please help, the scheduler is very hard to use, document and online demo has litte full-example, only show one of the few main functions.
I have spend over 15 hours in the sheduler, I am very sorry, but please help.

yours,
Ivan

Scheduler

answered on 01 Dec 2014

3 answers

349 views

How to implement Grid with checkbox column and virtualization?

Hi there,

I would like to implement grid with virtualization and one column with checkboxes. Each checkbox should display it's 'checked/unchecked' states when scrolling among pages.

Thanks in advance,

Andrii Frankiv

Grid

answered on 01 Dec 2014