Questions on Kendo UI for jQuery Forum

2 answers

460 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

94 views

Imagine something like this

in Kendo:

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

General Discussions

answered on 18 Sep 2013

1 answer

109 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

97 views

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

108 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

230 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

83 views

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

47 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

10 answers

950 views

Style MVC DropDownListFor Helper to look like Kendo ComboBox

Hi,

I've browsed through the Kendo Styling documentation and found many simple ways to style my regular, hum-drum forms. However, I was wondering if there is a way to apply the ComboBox styles to MVC Helpers like DropDownListFor() and so on? I use MVC Helpers on a lot of my forms and would like to be able to standardize my Text and Dropdown lists to look the same.

I've tried applying the Kendo classes to my DropDownList's directly like this:

@Html.DropDownListFor(model => model.AccountTypeID, new SelectList((System.Collections.IEnumerable)ViewBag.AccountTypesDD, "Key", "Value"),

new { @class = "k-combobox" })

I've attempted to attach classes like "k-combobox, k-dropdown-wrap ect." but nothing styles the DropDownList to mimic the Style of a Kendo ComboBox.

I understand that this is probably because most of the Kendo Styles require layered <span/> tags to apply properly, but was wondering if there is an out-of-the-box way to apply them to MVC Helpers?

Thanks
Landon

ComboBox

answered on 18 Sep 2013