Questions on Kendo UI for jQuery Forum

4 answers

326 views

A grid being 'editable' can be set during initialization. Can this be set at runtime as well? I have a 'edit' mode that I would like to use to enable/disable editing of the Grid contents. I see in the documentation that Grid.editable can be set at initialization, but I don't see how it can be changed at runtime (after initialization to use the documentation's terms.)

Grid

answered on 29 Mar 2013

2 answers

802 views

Adding a String to a DataSource that has been created from an Array

When creating a DataSource from an array, I can iterate the strings.

var arr = ["one", "two", "three"];

var datasource = new kendo.data.DataSource({

data: arr

});

datasource.read();

var data1 = datasource.data();

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

alert(data1[i]);

}

Then I add a new string to the datasource.

datasource.add("four");

var data2 = datasource.data();

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

alert(data2[i]);

}

As a result, three strings and one object are returned from the datasource.

What should be added, so that the loop returns four strings?

Michael G. Schneider

Data Source

answered on 29 Mar 2013

3 answers

157 views

Changing sort behavior

We have a kendo grid, which has a date field in it. That date field is sometimes empty. When kendo sorts ascending (future dates are at the end), the empty fields appear in the front. Is it possible to change the sort mechanism to make empty dates appear lower in the sort order (near the bottom) rather than higher?

Data Source

answered on 29 Mar 2013

1 answer

82 views

Perform an action on validation result

I'm trying to accomplish a simple task where upon validation result (failed or passed) I want to perform some action, for example set CSS style to a corresponding text element. I want to do this per form element. Is there a way to do this? Is there as event that one can subscribe to ,like onValidationComplete(validation_result) ?

Validation

answered on 29 Mar 2013

3 answers

77 views

Overriding the row generation code?

Is it possible to override the code that generates a row in the kendo grid?
I'd like to add more features to the row model's json, without necessarily putting the field in to the model object.

Currently, I'm using a backbone datasource and model to drive my grid. I'd ideally like to have a callback per model to add this reference. Is it possible to do?

Grid

answered on 29 Mar 2013

1 answer

182 views

Updating bound data does not update displayed node

A remote hierarchical data source delivers JSON that looks like the following: Note the .data property which contains additional information.

jQuery182041788989288830735_1364362919255([

{"id":"6a488457-5b85-48fc-be24-b469219564c4"

,"sprite":"custom3"

,"text":"Silk"

,"hasChildren":true

,"data"

:{"nodetype":"Fabric"

,"level":3

,"activity":0

,"maintenance":NaN

,"status":3

}

,

{"id":"8a9e479a-4448-462e-9151-b1913cc1660e"

,"sprite":"custom3"

,"text":"Wool"

,"hasChildren":true

,"data"

:{"nodetype":"Fabric"

,"level":3

,"activity":0

,"maintenance":NaN

,"status":3

}

,

{"id":"da373cd1-4264-4096-9955-5527e6c49dd9"

,"sprite":"custom3"

,"text":"Canvas"

,"hasChildren":true

,"data"

:{"nodetype":"Fabric"

,"level":3

,"activity":0

,"maintenance":NaN

,"status":4

}

])

The template in the .kendoTreeView constructor is thus and will display additional status information when the treeview is rendering a 'level 3' node:

window.reportUrl = '/reporter';

window.statusCode = [ 'bla', 'bla', 'bla' ];

template:

"<span class='name'>#: item.text #</span>"

+ "# if (item.data.level == 3) {#"

+ "# if (item.hasChildren) {#"

+ " | <a href='#= window.reportURL #?id=#= item.id #' title='View Report' target='_blank'>"

+ "<img alt='View Report' class='cm-icon' src='/images/report.png'>"

+ "</a>"

+ "#}#"

+ "# if (('status' in item.data) && !isNaN(item.data.status)) {#"

+ " | <span class='cs-status'>Status: #= window.statusCode[item.data.status] #</span>"

+ "#}#"

My problem is that when a some property .data changes, the tree node is not redrawn.
User does some activity runs a getJSON that returns an updated status for an id.

$.getJSON ( .... )

.done (function (info) {

// info looks like {result:{id:<some-id>,status:<some-status>}}

var tv = $('#treeview').data('kendoTreeView');

var dsData = tv.dataSource.get(info.result.id);

dsData.data.set('status', info.result.status); // does not cause node to be redrawn

dsData.set('data.status', info.result.status); // does not cause node to be redrawn

dsData.set('text', 'BLA BLA BLA'); // DOES cause node to be redrawn

});

What would need to be done to have the treeview observe the 'additional information' in dsData.data (or dsData.data itself) and rerender when something gets set ?

I would prefer to _not_ have to do something like this (untested):
dsData.set('data.status', info.result.status);
dsData.set('text', dsData.text');

Thanks,
Richard

TreeView

answered on 29 Mar 2013

5 answers

833 views

Change datasource

Hi,

I've created a chart in ASP.NET MVC using the following code:

@(Html.Kendo().Chart(Model)

.Name("Regions")

.Title("Regions")

.DataSource(ds =>

{

ds.Read(read => read.Action("GetClientRecordsCountByRegion", "Home"));

ds.Sort(sort => sort.Add(model => model.Region).Ascending());

}

)

.Series(series =>

{

series.Pie("TrademarkCount", "Region")

.Labels(lbl => lbl.Visible(true).Template("#= category #: #= value #")

.Align(ChartPieLabelsAlign.Circle)

.Position(ChartPieLabelsPosition.OutsideEnd));

})

)

On a button click, I would like to refresh the chart with new data by either calling another Action or passing parameters into the current action. How do I do that?

I tried setDataSource and then redraw as shown below but its not working. Please help. Thanks!

function refreshsource()

{

var dataSource = new kendo.data.DataSource({

transport: {

read: {

type: "GET",

url: "/Home/GetClientRecordsCountByRegionNew",

dataType: "json"

}

});

var chart = $("#Regions").data("kendoChart");

chart.setDataSource(dataSource);

chart.redraw();

}

Charts

answered on 29 Mar 2013

3 answers

366 views

GridForeignKey ComboBox Initial Value is 0 ?

Subject says it all. In my GridForeignKey.cshtml I've placed a combo box rather than the dropdownlist. For editing values in my grid it works fantastically. When adding a new row inline however, the default value displayed is 0. This is a non-nullable field with no default. How can I get my own "Select..." text in there initially or nothing at all?

Thank you!
Michael

ComboBox

answered on 29 Mar 2013

3 answers

651 views

Popup Modal to Add a New Record Does Not Display when the Grid is sorted/filtered

I am using the Grid with remote data, but client side paging/filtering/sorting. The data source is pre-filtered, and setup as follows:

var

dataSource = new kendo.data.DataSource({

error: function (e) {

alert(e.errors);

},

filter: {

field: "CreatorADGuid",

operator: "eq",

value: '@ViewBag.UserId'

},

pageSize: 40,

batch: true,

transport: {

read: {

url: "/api/project/",

dataType: "json"

},

update: {

url: "/api/project/",

type: "POST",

dataType: "json"

},

create: {

url: "/api/project/",

type: "PUT",

dataType: "json"

}

},

schema: {

data: "Body",

total: function (response) {

return response.Body.length;

},

model: {

id: "Id",

fields: {

Id: {

type: "string",

defaultValue: Constants.emptyGUID

},

Title: {

type: "string",

validation: {

required: true

},

editable: true

},

ScheduAllId: {

type: "string",

editable: true

},

CreatorDisplayName: {

type: "string",

editable: false

},

CurrentStatusDate: {

type: "string",

defaultValue: '@DateTime.Now.ToShortDateString()',

editable: false

}

},

errors: "MessageDetails"

}

});

The grid is using a custom templated toolbar that contains a button which allows a user to add a new record. This all works as expected if I do not sort or filter the grid. If the grid is sorted/filtered, clicking the button does not display the popup to add a new record. If I then unfilter/unsort the grid after clicking the button, an empty row is added to the beginning of the grid. The following is my grid:

$("#project-grid").kendoGrid({

dataSource: dataSource,

toolbar: kendo.template($("#project-toolbar-template").html()),

pageable: true,

height: $('body').height(),

sortable: {

mode: "multiple",

allowUnsort: true

},

filterable: true,

columns: [

{

field: "Title",

title: "Title",

template: kendo.template($("#project-title-template").html())

},

{

field: "ScheduAllId",

title: "ScheduAllId",

width: "20%"

},

{

field: "CreatorADGuid",

title: "Creator",

template : '#= CreatorDisplayName #',

width: "20%"

},

{

field: "CurrentStatusDate",

title: "Created Date",

width: "20%",

format: "{0:dd/MM/yy}"

},

{

command: ["edit"],

title: " ",

}],

editable: {

mode: 'popup',

template: kendo.template($("#project-edit-template").html()),

},

edit: function (e) {

var editWindow = e.container.data("kendoWindow");

if (e.model.isNew()) {

e.container.data("kendoWindow").title('Add New Project');

}

else {

e.container.data("kendoWindow").title('Edit Project');

}

});

Please advise if this is a known defect, and possibly a work-around as our requirement is to have the grid pre-sorted for users, but also give them the ability to add a new record while the grid is sorted. I've tried this in the latest 2013 Q1 build and it still behaves as described above. Thank You.

Grid

answered on 29 Mar 2013

2 answers

423 views

Kendo DatePicker cannot select a date

Hi,

I am using Kendo DatePicker() in a MVC 3 application along with IE 7. Somehow when i visit my view in the browser, Kendo DatePicker() shows me the date but keeps the today's date selected and does not let me select any other date. It let me browse months and years but does not let me select a date? This is how i am using the Kendo DatePicker()

<div class="editor-field">
             @Html.Kendo().DatePicker().Name("StartDate").Min(new DateTime(1900, 1, 1)).Max(New DateTime(2099, 12, 31)).Value(DateTime.Today)

            @Html.ValidationMessageFor(Function(model) model.StartDate)
        </div>
Also after investigating this in the IE developer toolbar, i am getting the Unselectable = on as shown in the image attached.
However the same thing using Google Chrome works fine and lets me select the date. Any ideas please on what i could be doing wrong? Need help really urgently.

DatePicker

answered on 29 Mar 2013