Questions on Kendo UI for jQuery Forum

3 answers

710 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

317 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

130 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

11.9K+ 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

1 answer

309 views

Setting month view to display 5 weeks instead of 6 (when appropriate)

I was asked to hide the first or last row in the month view when all the entries on that row are actually for the next or previous month. For example for the month of October 2013, the bottom row contains all days in November.

There is no out of the box way to do this but it's actually pretty easy. I'd like to share my solution and get feedback, please let me know is there is a better way to do it.

//define the cells and rows

var gridCells = $("td[role='gridcell']");

var gridRows = $("tr[role='row']");

//figure out if we should hide the first and/or last row

//class will be null if it's normal, otherwise 'k-other-month'

if (gridCells[6].getAttribute("class") != null) { $(gridRows[0]).css("display", "none"); }

if (gridCells[35].getAttribute("class") != null) { $(gridRows[5]).css("display", "none"); }

I call the above code in my 'dataBound' event handler because I refresh the datasource during navigation. The 'navigate' handler is probably more appropriate in most cases.

My only concern is that there are other possible classes for the gridcells which I am not yet aware of, which would cause the row to be unintentionally hidden. Maybe it would be better to check if the class is not 'k-other-month' instead of just looking to see if it is not null?

Scheduler

answered on 31 Oct 2013

3 answers

362 views

In-cell adding/ editing for Grid with row hierarchy or detail template

Hi Kendo UI Team,

I have a grid with dummy data and a client template. I'm attempting to add new records.

<div id="grid">

</div>

<script id="detail-template" type="text/kendo-ui-template">

<div>

<p>#: FirstName # #: LastName #'s age is #: Age #</p>

</div>

</script>

<script type="text/javascript">

$(document).ready(function(){

$("#grid").kendoGrid({

sortable: true,

editable: "incell",

toolbar: ["create"],

columns:[

{

field: "FirstName",

title: "First Name"

},

{

field: "LastName",

title: "Last Name"

}],

dataSource: {

schema: {

model: {

id: "Id",

fields: {

FirstName: {

type: "string"

},

LastName: {

type: "string"

},

Age: {

//data type of the field {Number|String|Boolean} default is String

type: "number",

// used when new model is created

defaultValue: 1

}

},

data: [

{

Id: 1,

FirstName: "Joe",

LastName: "Smith",

Age: 30

},

{

Id: 2,

FirstName: "Jane",

LastName: "Smith",

Age: 20

}]

},

detailTemplate: kendo.template($("#detail-template").html()),

dataBound: function ()

{

this.expandRow(this.tbody.find("tr.k-master-row").first());

},

});

</script>

Right now I can only edit the fields defined as grid columns, but not the field in the detail template. How can I fix this?

Grid

answered on 31 Oct 2013

1 answer

253 views

[Solved] Event Text Color for Flat Theme

If I use the theme called Metro Black and have a resource that sets the background color for the event, the text color is either black or white depending on the background color. It is not somthing that I set, but seems to be handled in the css. If I change the theme to Flat, the text color is always white, even if the background color of the event is white and is therefore not readable.

Is there something I can do to make the Flat theme behave the same way as the Metro Black theme with regards to the event text color?

Thanks,

Scheduler

answered on 31 Oct 2013

1 answer

279 views

How to update scheduler majortick

Hi:

I'm trying to update the majortick during runtime
I have the following:

<script type='text/javascript'>

$("#doctors").change(function () {

var scheduler = $("#scheduler").data("kendoScheduler");

scheduler.majorTick(60); //interval of 60 minutes

kendo.bind($("#scheduler"), scheduler);
$("#scheduler").data("kendoScheduler").refresh();

});

</script>

Somehow, the code is not updating the intervals as a show in the code.

I appreciate in advance

John

Scheduler

answered on 31 Oct 2013

1 answer

79 views

Kendo UI for standard ASP.NET Pages

Hi Support,
We want to convert our application to HTML5. I see Kendo UI is the best solution for it, but i found that Kendo UI is only available for ASP.NET MVC base. We don't follow MVC pattern in our current application. I just want to make sure, is Kendo UI available for standard ASP.NET pages, If yes please send me that link and also online demo link, i will explore it in detail.

Thanks
Abu Sufyan

General Discussions

answered on 31 Oct 2013