Questions on Kendo UI for jQuery Forum

3 answers

169 views

[Solved] Opening several windows at once smoothness

Hi,

I have a site where it is possible up to 15 kendo windows could open all at once. And I have noticed a decrease in animation quality once we go past 5-6 windows.
I understand why this occurs, what I am wondering is if there is a better way for me to open these windows.

Mainly there is one time when so many windows will open at once, and once more when a user leaves (the windows close).

Is there something I can do to help keep this animation smoother when so many are coming on at once?

How could I open one at a time? Open 1, wait until its animation is completely finished, then open the next? I know that 'activate', according to the documentation, is called once the animation is complete but it does not seem that way, but maybe that is do to something else I am doing.

Thanks

Window

answered on 19 Sep 2013

2 answers

485 views

Group Header Template causing issues with other columns

I have a grid that I am binding to a server model. I use the .Ajax() so that I can group it by a column. I want to NOT display the column I am grouping by so I implemented the GroupHeaderFormat() and hide the column. When I do the ClientTemplate() formatting on a different column goes awry. I've attached screen shots that show the before and after. For "before" the code is this:

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

.Name("Grid2")

.Columns(columns =>

{

columns.Bound(p => p.production_date)

.Title("Date")

.ClientTemplate("#= kendo.toString(production_date, \"MM/dd/yyyy\")#");

columns.Bound(p => p.shift_name).Title("Shift");

columns.Bound(p => p.timestamp).Title("Time").ClientTemplate("#= kendo.toString(timestamp, \"hh:mm:ss\")#");

columns.Bound(p => p.responsible).Title("Responsible");

columns.Bound(p => p.area_name)

.Title("Area")

;

columns.Bound(p => p.alarm_message).Title("Alarm Message");

columns.Bound(p => p.comment).Title("Comment");

columns.Bound(p => p.charged_seconds)

.Title("Charged Time (min)")

.ClientTemplate("#= kendo.toString(charged_seconds, \"n2\")#")

.ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");

})

.DataSource(dataSource => dataSource

.Ajax()

.Group(groups => groups

.Add(p => p.area_name))

)

.HtmlAttributes(new { style = "border: 3px solid #666666" })

)

For "after" it is this:

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

.Name("Grid2")

.Columns(columns =>

{

columns.Bound(p => p.production_date)

.Title("Date")

.ClientTemplate("#= kendo.toString(production_date, \"MM/dd/yyyy\")#");

columns.Bound(p => p.shift_name).Title("Shift");

columns.Bound(p => p.timestamp).Title("Time").ClientTemplate("#= kendo.toString(timestamp, \"hh:mm:ss\")#");

columns.Bound(p => p.responsible).Title("Responsible");

columns.Bound(p => p.area_name)

.Title("Area")

.Hidden(true)

.GroupHeaderTemplate(@<text>Area: @item.Key</text>)

.ClientGroupHeaderTemplate("Fournd in Area: #= value")

;

columns.Bound(p => p.alarm_message).Title("Alarm Message");

columns.Bound(p => p.comment).Title("Comment");

columns.Bound(p => p.charged_seconds)

.Title("Charged Time (min)")

.ClientTemplate("#= kendo.toString(charged_seconds, \"n2\")#")

.ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");

})

.DataSource(dataSource => dataSource

.Ajax()

.Group(groups => groups

.Add(p => p.area_name))

)

.HtmlAttributes(new { style = "border: 3px solid #666666" })

)

Grid

answered on 18 Sep 2013

1 answer

110 views

Imagine something like this

in Kendo:

http://dobtco.github.io/formbuilder/

General Discussions

answered on 18 Sep 2013

1 answer

119 views

Inconsistent Select list binding values

In two seperate views I have similar code. The guts are the same yet the results of the binding framework differ. Could you please elaborate on the following discrepancy?
The first view is delcared as

<div data-role="view"

data-title="Form Unexpected but nice"

data-init="ns.viewA.init"

data-before-show="ns.viewA.beforeShow"

data-show="ns.viewA.show"

data-model="ns.viewA.viewModel">

...

<select data-bind="source:options,value:selectedOption"

data-text-field="display"

data-value-field="id"></select>

...

</div>

The second as

<div data-role="view"

data-title="Form Expected"

data-init="ns.viewB.init"

data-before-show="ns.viewB.beforeShow"

data-show="ns.viewB.show"

data-model="ns.viewB.viewModel">

...

<form>

...

<select data-bind="source:options,value:selectedOption"

data-text-field="display"

data-value-field="id"></select>

...

</form>

</div>

viewA is a read-only/navigational view for traversing a hierarchy and inspecting details of the current node.
viewB is an edit view for the one such node in viewA.

The discrepancy is that in viewA, when selectedOption changes, the value of selectedOption is the actual object, not the id of the object.
However, in viewB, value of selectedOption is properly set to the ID of the option selected from the drop down.

I've tried changing the markup around each to see if i could get matching behaviors from the two, however, I've not been able to replicate
identical behavior between the them. Any ideas why this occurs?

MVVM

answered on 18 Sep 2013

6 answers

112 views

[Solved] using Razor & remote links?

Is there a way to use external links, equivalent to using the data-rel="external"?

I have this and I am trying to open the log out link outside my app so the # is not appended.
items.AddLink().Icon("settings").Url("Logout","Account").Text("Settings");

General Discussions

answered on 18 Sep 2013

3 answers

1.3K+ views

DataSource transport with function

Hi,

According to DataSource Transport API, I am using the following code for my transport:

01.var historyTransport = {

02. read: function (options) {

03. $.ajax({

04. url: "../../AppData/Batch/History.json",

05. dataType: "json",

06. success: function (response) {

07. // notify the data source that the request succeeded

08. console.log('successfully load History.json');

09. var rows = [];

10. $.map(response.rows, function (n,i) {

11. var obj = { status: n.cell[0] };

12. rows.push(obj);

13.

14. });

15. var historyData = {};

16. historyData.rows = rows;

17. options.success(historyData);

18.

19. },

20. error: function (response) {

21. // notify the data source that the request failed

22. console.log('failed to load History.json');

23. }

24. });

25. }

26.}

I am having a very strange problem with this options.success function. my json object from the ajax response looks like this

Object {rows: Array[7675], page: 1, total: 1, records: "1"}

options.success() has no problem to parse it. However, if i want to do some reformatting by creating a separate object historyData, i will have an error from options.success() saying TypeError: Cannot call method 'slice' of undefined, unless i name the array property of historyData - rows.

it almost feels like the DataSource options.success() function is expecting an array called rows. it was pure coincident that my original json contains this rows property.

can anyone help to explain whether my finding is true? and what exactly is this options parameter? there is no document about it.

Thanks
amp

Data Source

answered on 18 Sep 2013

3 answers

119 views

Kendo UI grid problem

I am using kendo grid and have put template column containing checkbox in it.This template column has checkbox in header which is used to select all checkboxes of the column.When I first time check the header check box it checks all the check boxes in column but after and also unchecks the check boxes first time.But when I select header check box second time,It does not select checkboxes in the column.When I show the property of column checkbox in firebug it shows checked property to true but visibaly it is uncheckedCan you please let me knkow what is the reason for it?

General Discussions

answered on 18 Sep 2013

3 answers

247 views

problem with auto scaling in group chart

Hi,

The problem here is obvious. The autoScale for value axis is not working for some reason. I can set up min and max value which works but the data comming from server can vary greatly so we really need autoscale option.
here is the code. Any help or point st the right direction would be appreciated. thanks

function createSalesChart() {

return $("#report-sales-chart").height(400).kendoChart({

title: "Sales Report Chart",

dataSource: chart_data,

autoBind: false,

seriesDefaults: { type: "line", stack: false, missingValues: "interpolate" },

series: [

{

field: "Gross_Total",

name: "Gross Total",

groupNameTemplate: "#= group.value # (#= series.name #)",

//name: "#= group.value # (#= series.name #)",

groupName: "#= group.value #",

axis: "currency"

}

],

categoryAxis: {

field: "Date",

baseUnit: "days",

labels: {

format: "MMM",

skip: 4,

step: 4

}

},

valueAxis: {

name: "currency",

/* autoScale: true,

AutoScale: true,

autoscale: true,*/

color: "blue",

labels: { format: currency_prefix+"{0}"+currency_suffix },

//min:0,

//max:1000

},

legend: { position: "bottom" },

tooltip: { visible: true, format: "0" },

plotArea:{

background: "#EEE"

}

});

}

Charts

answered on 18 Sep 2013

2 answers

91 views

[Solved] Validation does not work properly on Kendo UI Mobile

I'm trying to do a simple input validation with a text and password that is binded to a view-model, basically both are required.
When kendo.validator is triggered it only validates the text input and not the password input.

Is there anything that im doing wrong? Please help check the attached code.

General Discussions

answered on 18 Sep 2013

1 answer

57 views

Icenium Designer cannot recognise table tag , getting nested error in designer.

Hi All,

I was implemeting a table html tag in the Icenium designer though the application works it is still throwing a error in the Icenium designer . Please let me know any solution for this as the table tag is important in my design of the application.

Thanks

Gaja Naik

General Discussions

answered on 18 Sep 2013