Questions on Kendo UI for jQuery Forum

9 answers

1.1K+ views

Example of Stacked Bar Chart using Remote Data

I want to map different 'Series' on 'Stacked Bar Chart' at run time utilizing remote JSON file.

My JSON file include following attribute Project ID, Year, Month and Expense. No. of projects is decided at run time.

[{"ProjectID":1,"Year":2011,"Month":11,"Expense":202.02},{"ProjectID":1,"Year":2011,"Month":12,"Expense":266.91},{"ProjectID":1,"Year":2012,"Month":1,"Expense":274.91},{"ProjectID":1,"Year":2012,"Month":2,"Expense":287.3},{"ProjectID":1,"Year":2012,"Month":3,"Expense":279.47},{"ProjectID":5,"Year":2011,"Month":11,"Expense":261.16},{"ProjectID":5,"Year":2011,"Month":12,"Expense":258.13},{"ProjectID":5,"Year":2012,"Month":1,"Expense":315.84},{"ProjectID":5,"Year":2012,"Month":2,"Expense":344.66},{"ProjectID":5,"Year":2012,"Month":3,"Expense":346.18}]

I have seen the example on the Demo Page in which 'Series' is mapped to the field names.

series:
[{
field: "nuclear",
name: "Nuclear"
}, {
field: "hydro",
name: "Hydro"
}, {
field: "wind",
name: "Wind"
}],

Is it possible to bind 'Series' by specifying fields along with values like

series:
[{
field: "ProjectID=1",
name: "My First Project"
}, {
field: "ProjectID=5",
name: "My Fifth Project"
}, {
field: "ProjectID=8",
name: "Most Eighth Project"
}],

Thanks!

Charts

answered on 01 Nov 2013

1 answer

178 views

Grid Batch Editing

I am using the Kendo Grid Batch Editing Tool. I do not want to use the create button. I want to save(create) the records if the do not exist and if they do exist I want to update the records.

This should all be performed under the update function.

Basically I want to combine the following lines of code somehow:

xxx.Entry(entity).State = EntityState.Added;
xxx.Entry(entity).State = EntityState.Modified;

Grid

answered on 01 Nov 2013

5 answers

419 views

[Solved] Show week number in custom view

Hi!

i am creating a custom schedule view like that:

var SchedulerWeekView = kendo.ui.MultiDayView.extend({

options: {

selectedDateFormat: "{0:D} - {1:D}"

},

nextDate: function () {

var startDate = this.startDate();

return new Date(startDate.setDate(startDate.getDate() + 7));

},

previousDate: function () {

var endDate = this.endDate();

return new Date(endDate.setDate(endDate.getDate() - 7));

},

name: "SchedulerWeekView",

calculateDateRange: function () {

var selectedDate = this.options.date,

start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),

idx, length,

dates = [];

for (idx = 0, length = 7; idx < length; idx++) {

if (start.getDay() <= 5 && start.getDay() > 0) {

dates.push(start);

}

start = kendo.date.nextDay(start);

}

this._render(dates);

}

});

I would like to show the week number on selectedDateFormat. Right now it shows: {week start date} - {week end date}.
Is that possible to change format to show the week number?

Thanks!

Scheduler

answered on 01 Nov 2013

1 answer

149 views

Mobile navbar is half hidden when going from portrait to landscape on iPad Mini

I encountered this problem awhile back and am just now getting around to troubleshooting it. I am using an iPad Mini with iOS 7.0.3. This issue does not occur on a Samsung Galaxy S3 or a Nexus 7 tablet. This bug occurs with KendoUI 2013.2.716 and the most recent internal build 2013.2.1024.

On the iPad Mini, we loaded up our app website in portrait mode, and it looked normal. But when rotating the iPad to landscape mode, the top navbar suddenly lost about 50% height, so it was now half hidden. You can still scroll the content like normal, but the navbar remains half hidden. The strangest thing is that if you tap anywhere above the address bar (where the time and battery level indicators are displayed), the navbar will suddenly scroll back fully into view. What the heck is going on?

I uploaded a Youtube video so you can see the process in action. This bug is occurring on our own web project AND on Kendo's mobile application overview demo located at http://demos.kendoui.com/mobile/m/index.html#/mobile/m/application/index.html

General Discussions

answered on 01 Nov 2013

1 answer

64 views

once the record edited in Grid, automatically another record should be updated in grid

I am having Sample record in Grid as following

No Name Price
1 Wheat 12
2 Bread 15
3 Egg 20
4 Milk 15
5 Egg 13

In grid i edit the 3rd record price (Egg) to 15 and saved in grid
once it is done the fifth record (Egg) Price also need to automatically update to 15.

is it possible with Kindo UI.
Thanks in Advance..

Grid

answered on 01 Nov 2013

3 answers

722 views

[Solved] TreeView expanding all nodes and thus loading entire tree

I am trying to load the tree data on demand using the read and sending down id, hasChildren, and expanded - since I want to expand the root initially. Only the root node has the expanded value true, all others have it false.

My data source is:

dataSource: new kendo.data.HierarchicalDataSource({

transport: {

read: {

url: '/WidgetJson/OrgTree',

type: 'POST',

dataType: 'json',

data: function (currentParams) {

var params = {};

params['includeCardAccounts'] = true;

return params;

}

},

schema: {

model: {

id: 'OrgId',

hasChildren: 'HasChildren',

expanded: 'Expanded'

}

}),

dataTextField: 'OrgDescription'

and the first JSON response from the server is:

[{"OrgId":46431736,"OrgDescription":"XYZ DEPT Company","HasChildren":true,"Expanded":true}]

and this is the root item and is properly expanded in the tree view - properly reflecting the "Expanded":true.
the second JSON response from the server is (truncated for brevity):

[{"OrgId":46431761,"OrgDescription":"OPExxxxxx - Ixx","HasChildren":true,"Expanded":false},{"OrgId":46431760,"OrgDescription":"OS xxxxxx IBA","HasChildren":true,"Expanded":false},{"OrgId":46431759,"OrgDescription":"ODSxxxxxx- IBx","HasChildren":true,"Expanded":false}]

Note that the first item in this JSON object ("OPExxxxxx - Ixx") is shown with the "Expanded":false, but in the treeview it is displayed as expanded.

...and there are about 26 total AJAX requests that load the tree (all with "Expanded":false). Is there anything here that would indicate why we are expanding each node and therefore loading all children?

One odd thing to note is that the plus/minus of all nodes including the root are in the "+" state even though all nodes are expanded. When I click the plus/minus to collapse a node, it remains "+" and when I click it again to expand it, it changes to "-". Not sure that sheds any light on the issue, but thought it was odd and perhaps useful.

Thanks,
--Ed

TreeView

answered on 01 Nov 2013

1 answer

330 views

RequestValidation token with Kendo grid

Is there a way to have the validation token with kendo grid ?

Grid

answered on 31 Oct 2013

4 answers

1.2K+ views

[Solved] Kendo UI Server Bound Grid - UIHint and DisplayTemplate

Is it possible to make use of the UIHint attribute on a model property such as -

[Display(Name = "Days Late"), UIHint("_DaysToDate"), ReadOnly(true

)]

public int

? DaysLate 

{

get; set

; 

}

In order to specify a DisplayTemplate partial as a Template for grid data?

We have a fairly generic grid HTML helper method that uses model attributes whilst binding -

private static GridBuilder<dynamic> CreateDynamicGrid<TBaseViewModelType>(this HtmlHelper helper, string gridName, string provisioningControllerName, string formActionName = "Edit",

bool checkboxRowSelect = false

)

{

var type =

typeof

(TBaseViewModelType);

var modelProperties =

type.GetProperties().Where(p => p.IsScaffoldable()).ToList();



var

identityProperty = type.GetProperty("Id"

);



var idFieldName =

string

.Empty;

if (identityProperty != null

)

{

idFieldName =

identityProperty.Name; 

}

return

helper.Kendo().Grid<dynamic>()

 .Name(gridName)

.Columns(columns

=> {

columns.Template(t => t).ClientTemplate("<input

class='select-row' type='checkbox' />").HeaderTemplate(t =>

"<input class='select-all-rows' type='checkbox' />")

.Width(40).Visible(checkboxRowSelect);

columns.Template(t =>

t).ClientTemplate(helper.ActionLink(VisionWebResources.Action_More, formActionName,

provisioningControllerName, new { id = string.Format("#= {0} #", idFieldName) },

null).ToHtmlString()).Visible(identityProperty != null).Width("4em"

);

modelProperties.ForEach(p =>

columns.Bound(p.GetPrevailingType(), p.Name).Format(p.GetFormatString()).HtmlAttributes(p.GetHtmlAttributes()).Width(InitialColumnWidth));

})

 .DataSource(ds => ds.Ajax() 

.PageSize(15)

.Read(r => r.Action("Read"

, provisioningControllerName))

.Model(model => 

{ 

model.Id(

"Id"

);

foreach (var property in modelProperties) {model.Field(property.Name,

property.GetPrevailingType));

 }

 }) 

)

.Editable(ed =>

ed.Enabled(false

))

.Events(events => events.DataBound(

"function() { "

"if (typeof (gridDataBound) === 'function') { gridDataBound(); }" +

"}").Change("function() { "

+

"

if (typeof (gridFocusedRowChanged) === 'function') { gridFocusedRowChanged(); }

" +

 "

}")) 

.Filterable()

.HtmlAttributes(new { @class = "grid"

})

.Navigatable()

.Pageable(pages

=>

{

    pages.PageSizes(

new

[] { 15, 25, 40 });

    pages.Refresh(

true);

//Provides a button to refresh the current grid page

 })

.Resizable(resize => resize.Columns(true

))

.Scrollable(scrollable =>

scrollable.Height(425))

.Selectable(selectable =>

selectable.Mode(GridSelectionMode.Single))

.Sortable(sortable =>

sortable.AllowUnsort(false

));

 }

The grid has a dynamic model which is based partially on a fixed ViewModel and partially on dynamic fields which are created and managed by the users within the database (and thus cannot be known in advance). As such the binding is programmatic and not directly to a model. The dynamic fields do not require a display template, I simply wanted to provide some context around our approach.

The line that builds up the columns from the fixed ViewModel is-

modelProperties.ForEach(p => columns.Bound(p.GetPrevailingType(), p.Name).Format(p.GetFormatString()).HtmlAttributes(p.GetHtmlAttributes()).Width(InitialColumnWidth));

Can I add the "ClientTemplate" method to load a partial based on the UIHint value for the property, perhaps use @Html.DisplayFor(), or must this be explicit text?

Grid

answered on 31 Oct 2013

1 answer

137 views

Stock chart Navigator component's labels/readings are overlapping with each other.

Hi,

Stock chart Navigator component's labels/readings are overlapping with each other as highlighted in the attached screen shot. Please help us in resolving this issue.

Charts

answered on 31 Oct 2013

1 answer

12.0K+ views

Horizontal Scroling?

I would like my grid to be able to scroll horizontally when either the users browser is too small OR when they add additional columns using the Columns menu...

I have tried putting overflow-x:scroll on the surrounding div, but that solution has two problems.
1.) The footer (paging etc..) scroll with the data columns which looks crappy and is not wanted.
2.) The part of the grid that is not visible upon load is not styled, meaning that is has no alternating row colors on it when you start scrolling to the right.

Is there a Kendo supported Vertical scrolling property that I am missing?

Thanks
Jason

Grid

answered on 31 Oct 2013