Questions on Kendo UI for jQuery Forum

5 answers

767 views

Hello,

A while a go, posted this question about how to select a row after a grid refresh.

The answer given back then was a great workaround. However, once deployed in production with large amount of data, I realized many client's grid were not loaded within 50 milliseconds, leaving the first row unselected.

Increasing the delay might fix the problem for some people but how long should we wait to make sure every grids are loaded? In the other hand, I don't want to add transform my problem into unnecessary.

What's missing here is an event triggered by the Grid.

Is there a way to create an event named DataBounded (or AfterDataBound) that would fired once the grid will complete the loading of the data received from the dataSource?

Best regards,

Simon

Grid

answered on 27 Nov 2013

2 answers

583 views

Grid binding to a One-to-many Model

Hi All

I'm trying to get the Kendo Grid to display with a hierarchical row displaying history data for a given row.
My colleague has setup the project with the primary model having a one to many relationship to the second model.
Models are as follows:

public class CrossReferenceRelationship

{

public int Id { get; set; }

[Display(Name = "From Partner")]

public string FromPartner { get; set; }

[Display(Name = "To Partner")]

public string ToPartner { get; set; }

[Display(Name = "From Role")]

public string FromRole { get; set; }

[Display(Name = "From Account")]

public string FromAccount { get; set; }

[Display(Name = "To Account")]

public string ToAccount { get; set; }

[Display(Name = "Is Deleted")]

public bool IsDeleted { get; set; }

public ICollection<CrossReferenceRelationshipHistoricEntry> HistoricEntries { get; set; }

}

public class CrossReferenceRelationshipHistoricEntry

{

public int Id { get; set; }

public int XrefId { get; set; }

[Display(Name = "From Partner")]

public string FromPartner { get; set; }

[Display(Name = "To Partner")]

public string ToPartner { get; set; }

[Display(Name = "From Role")]

public string FromRole { get; set; }

[Display(Name = "From Account")]

public string FromAccount { get; set; }

[Display(Name = "To Account")]

public string ToAccount { get; set; }

[Display(Name = "Action Type")]

public string ActionType { get; set; }

[Display(Name = "Method Used")]

public string MethodUsed { get; set; }

[Display(Name = "Modified By")]

public string ModifiedBy { get; set; }

[Display(Name = "Modified Datetime")]

public DateTime ModifiedDatetime { get; set; }

}

He then maps these using EntityMapper, populating these objects.
So far my view contains the following code for the Kendo grid:

@(Html.Kendo()

.Grid(Model)

.Name("adminGrid")

.Columns(columns =>

{

columns.Bound(crr => crr.Id).Filterable(false).Width(100);

columns.Bound(crr => crr.FromPartner).Width(200);

columns.Bound(crr => crr.FromAccount).Width(200);

columns.Bound(crr => crr.ToPartner).Width(200);

columns.Bound(crr => crr.ToAccount).Width(150);

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Scrollable()

.ClientDetailTemplateId("HistoricEntries")

.Filterable()

.HtmlAttributes(new { style = "height:430px;" })

.Events(events => events.DataBound("dataBound"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(crr => crr.Id))

.Create(update => update.Action("Partner_Create", "CrossReferenceRelationship"))

.Read(read => read.Action("Read", "CrossReferenceRelationship"))

.Update(update => update.Action("Update", "CrossReferenceRelationship"))

.Destroy(update => update.Action("Delete", "CrossReferenceRelationship"))

)

<script id="HistoricEntries" type="text/kendo-tmpl">

@(Html.Kendo().Grid<CrossReferencePortal.Models.CrossReferenceRelationshipHistoricEntry>()

.Name("historyGrid_#=Id#")

.Columns(columns =>

{

columns.Bound(he => he.FromPartner);

columns.Bound(he => he.FromAccount);

columns.Bound(he => he.ToPartner);

columns.Bound(he => he.ToAccount);

columns.Bound(he => he.FromRole);

columns.Bound(he => he.ActionType);

columns.Bound(he => he.MethodUsed);

columns.Bound(he => he.ModifiedBy);

columns.Bound(he => he.ModifiedDatetime);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Read(read => read.Action("HistoryRead", "CrossReferenceRelationship", new { Id = "#=Id#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

I feel I should be able to bind the history grid to the primary grid's Model, so that I can simple expose the HistoricEntries e.g.
crr.HistoricEntries

Is this possible and are there any examples showing something similar?

Many thanks
Christian

Grid

answered on 27 Nov 2013

1 answer

62 views

Move valueAxis to min with 'object' data (vs 'array' data)

Hi All,

I was trying to move the valueAxis to the minimum value, however this is not working when the data is an object compared to the examples where it uses data arrays. Is there a way to move the axis with this kind of configuration? Please see the following jsFiddle:

http://jsfiddle.net/kousei2040/D42M6/10/

Thanks in advance.

Charts

answered on 27 Nov 2013

1 answer

804 views

Not able to select a dropdown value using selenium automation.

Hi ,

I am facing an issue to select a dropdown value using selenium. Please suggest how can we automate to select kendo ui dropdown value using selenium.

DropDownList

answered on 27 Nov 2013

7 answers

796 views

Column Filter, Reorder and highlight don't want to lost after refresh.

Dear Support Team,

I'm new for Kendo UI Grid. For the moment, I enable "Filterable, groupable, sortable and reorderable" at the grid. And I do refresh the grid every 3 minutes to get the latest data. But if the user do Filter or Reorder or sorting or grouping at the grid, I don't want to effect that setting when the grid has been auto refresh is on.
Currently all the setting are gone after refresh. Is there any way not to lost such setting?

Here is part of my code :

var grdTmp = grdReport.data("kendoGrid");

grdTmp.destroy();

grdReport.empty();

grdReport.kendoGrid({

dataSource: {

data: vMenuData,

pageSize: 20 //To replace with Header Value

},

dataBound: onMenuDataBound,

reorderable: true,

groupable: true,

sortable: true,

selectable: "row",

filterable: true,

pageable: {

refresh: true,

pageSizes: true

},

columns: vMenuHead,

schema: vMenuSchema

});

Thanks & Regards

Grid

answered on 27 Nov 2013

1 answer

444 views

Override validation message with custom icon

Is it possible to replace the validation message with my own image? I would like to provide an image and set it's title to the validation message. If there is a way to provide a validation message template, that would be great.

Thanks!

Validation

answered on 27 Nov 2013

3 answers

95 views

Preview not available from MVC wrappers?

I am using the KendoUI MVC wrappers, I believe Q2 2013. In the documentation I see that the ColorPicker has a preview flag that can disable the preview pane. This does not appear to be available in the MVC wrapper? Am I missing something?

Thanks
Dave Goughnour

ColorPicker

answered on 27 Nov 2013

1 answer

72 views

Grid tabbing problem in Google Chrome

Hello,

We see that tabbing doesn't work in Chrome on the grid control samples . We try to tab on header and page indexes in grid, but it doesn't hit on appropriate areas.
We admitted this behaviour in our application too (kendo v2013.2.716).
It is to be noted you may see this issue only in Chrome.

Should we expect fixing of the mentioned above bug by new releases of kendo or maybe you can propose workaround?

Thank you,

Best regards

Grid

answered on 27 Nov 2013

1 answer

676 views

Custom destroy command click event not firing

Hello,

In my Grid i have a column with 2 commands, which both use custom functionality like this.

{

className: "btn-edit",

text: "Bewerken",

name: "edit",

click: function (e) {

e.preventDefault();

var tr = $(e.target).closest("tr"); /* get the current table row (tr) */

var data = this.dataItem(tr);

CIX.CRM.Navigate('/businesses/' + data.ID, '/administration', data);

}

},

{

className: "btn-destroy",

name: "destroy",

text: "Verwijderen",

click: function (e) {

e.preventDefault();

var tr = $(e.target).closest("tr"); /* get the current table row (tr) */

var data = this.dataItem(tr);

CIX.CRM.MessageDialog("Verwijderen", data.Code + ' - ' + data.Name, "Weet u zeker dat u " + data.Name + " wilt verwijderen ?", [{ title: "Ja", action: _delete }, { title: "Nee", action: _cancelDelete }], data);

}

The problem is... when i give the 2nd command the name "destroy", the click event of that command is never called. When i give it another name, it doesn't show the destroy icon and leaves the inner span with an empty classname.

is there another way to have an icon with the destroy action without breaking the click event handler ?

Thanks in advance.

Grid

answered on 27 Nov 2013

1 answer

217 views

ListView, Template and right Arrow

Hi!
I am using a ListView together with a template to show information to my users.
If the user presses an item in my listview, a new listview apperes showing sub data for the item the user pressed.
When I'm not using a template, a > sign is visible to the right, notifying the user that the item can be pressed.

How can I add this > sign to my template so it looks the same as the build in one?
My current template looks like this:

Regards
Per

<script type="text/x-kendo-template" id="feedTemplate">

<div style="float:right">

>

</div>

<img class="item-image" src="${ImageUrl}" />

<h3 class="item-title">${Title}</h3>

<p class="item-description">${Description}</p>