Questions on Kendo UI for jQuery Forum

1 answer

107 views

Hi,

I'm trying to use the Combobox on a very simple form and it works fine in Firefox. However, if I try and view the page in IE, I get the following error:

Unhandled exception at line 3, column 23238 in http://cdn.kendostatic.com/2013.1.514/js/jquery.min.js
0x80020003 - JavaScript runtime error: Member not found.

I'd be grateful if someone might help me understand how to troubleshoot.

Thanks!

ComboBox

answered on 31 Jul 2013

0 answers

122 views

no Html.Kendo().CheckList ?

Starting with Kendo and coming from base MVC 4. There doesn't seem to be a Kendo checkbox available. How do people account for consistent styling with checkboxes, radio buttons, etc... that Kendo does not provide?

Grid

asked on 30 Jul 2013

2 answers

271 views

Issue with k-dirty and right text alignment

We have a number of cases where we have right-aligned numeric values inside of our grids using the CSS text-align property. However, the k-dirty span is no longer aligned at the top left corner of the table cell. Since the table cells are styled using the HtmlAttributes property for the column, there does not seem to be an easy way to style the cell content without also affecting the k-dirty element. We have come up with a work-around by overriding the k-dirty class as follows:

.k-dirty {

display:block;

margin: -0.4em 0 0 -0.6em;

position:relative;

}

Has anyone come up with a better solution to this problem?

I have attached a small screenshot to illustrate the issue.

Thanks in advance!
Brian Roth

Grid

answered on 30 Jul 2013

5 answers

478 views

Setting value and getting dataItem to window variable

I have an autocomplete that load and saves just fine. The problem is when I come back to the screen to edit the page, I am losing the value of the autocomplete.

MVC View

<input type="text" id="clientContactAutoComplete" class="k-autocomplete" />

Javascript setting up field

$("#clientContactAutoComplete").kendoAutoComplete({

minlength: 4,

placeholder: "Select Client Contact",

dataSource: new kendo.data.DataSource({

serverFiltering: true,

transport: {

read: {

url: '/DataService/LoadContacts',

dataType: "json"

},

parameterMap: function () {

return {

search: $("#clientContactAutoComplete").data("kendoAutoComplete").value()

};

},

pageSize: 10

}),

dataTextField: "FullName",

template: kendo.template($("#clientContactTemplate").html()),

style: "width: 300px",

select: function (e) {

window.clientContactAutoCompleteDataItem = this.dataItem(e.item.index()); // this is the window variable I need to set /////////////////////////

var fullName = window.clientContactAutoCompleteDataItem.FirstName;

if (window.clientContactAutoCompleteDataItem.MiddleName != null) {

fullName = fullName + " " + window.clientContactAutoCompleteDataItem.MiddleName;

}

if (window.clientContactAutoCompleteDataItem.LastName != null) {

fullName = fullName + " " + window.clientContactAutoCompleteDataItem.LastName;

}

window.clientContactAutoCompleteDataItem.FullName = fullName;

// Add DSR information to the display part of the grid if necessary.

if (!pipelineUtilities.isNullOrEmpty(window.clientContactAutoCompleteDataItem.DSRConsultantName)) {

window.clientContactAutoCompleteDataItem.FullName = window.clientContactAutoCompleteDataItem.FullName + " {DSR - " + window.clientContactAutoCompleteDataItem.DSRConsultantName + "}";

}

GetOffLimitsText();

},

}).data("kendoAutoComplete");

Javascript to set value to the field when coming back to the screen to edit

// get the object

var clientAC = $("#clientContactAutoComplete").data("kendoAutoComplete");

// set the saved value to the field

clientAC.value(window.ClientFullName); --- this is working

// get the selected dataItem and set it to the window variable

clientAC.search(window.ClientFullName);

window.clientContactAutoCompleteDataItem = clientAC.dataItem(0); --- this is failing

I need someway to get at that dataItem that was just set to the field and set it to the window variable, but I can't seem to make it work

AutoComplete

answered on 30 Jul 2013

1 answer

113 views

ObservableObject double dependent fields

Consider the following code. Within the incidentPercentage method, I am using another dependent method, but I am not able the use the recommended "this.get" syntax here. The only way I could get it to work was to call the other dependent methods directly. Please advise. Is this OK to do?

var viewModel = kendo.observable({
dataItem: {},
details: function() {
return this.get('dataItem').details;
},
hourCount: function() {
var dataItem = this.get('dataItem');
return (dataItem.hasOwnProperty('status') ? dataItem.status.length : 0);
},
incidentCount: function() {
return _.without(this.get('dataItem').status, 1, true).length;
},
incidentPercentage: function() {
return Math.round(
this.incidentCount() / this.hourCount() * 100
);
}
});

General Discussions

answered on 30 Jul 2013

2 answers

303 views

Kendo editable template and French characters decoding

I use ressource files to translate the website labels. All is fine in every part of the website but in the popup to edit an item in my kendo Grid, my characters aren't decoded. My grid uses an editable popup which itself use a template. My grid is define itself in a template because i use nested Grids (this one is on the 4th level). Every level is created using ClientDetailTemplateId()
My View :

01. <script id="LicenceGridTemplate" type="text/kendo-tmpl">

02. @(Html.Kendo().Grid<Administration.Models.LicenceModel>()

03. .Name("LicenceGrid_#=UserID#")

04. .DataSource(dataSource => dataSource

05. .Ajax()

06. .Read(read => read.Action("GetLicences", "Licence", new { userID = "#=UserID#" }).Type(HttpVerbs.Get))

07. .Model(m =>

08. {

09. if (currentUser.Type == (int)PAService.PartnerEDM.UserRole.Admin)

10. {

11. m.Field(f => f.ApprovalState).DefaultValue(PAService.PartnerEDM.ApprovalState.Approved);

12. }

13. m.Id(l => l.LicenceID);

14. })

15. .Create(update =>

16. {

17. if (currentUser.Type == (int)PAService.PartnerEDM.UserRole.Admin)

18. {

19. update.Action("AddLicence", "Licence").Data("GetLicenceAdditionalData");

20. }

21. else

22. {

23. update.Action("RequestLicence", "Licence").Data("GetLicenceAdditionalData");

24. }

25. })

26. .Update(update =>

27. {

28. if (currentUser.Type == (int)PAService.PartnerEDM.UserRole.Admin)

29. {

30. update.Action("EditLicence", "Licence").Type(HttpVerbs.Post);

31. }

32. })

33. .Events(e => e.Error("grid_error"))

34. )

35. .Columns(columns =>

36. {

37. columns.Bound(m => m.ApprovalState);

38. columns.Bound(m => m.CentralPoint);

39. columns.Bound(m => m.NextExpirationDate).Format("{0:d}").HtmlAttributes(new { cellType = "NextExpirationDate" }).Width(160);

40. columns.Bound(m => m.SerialNumber);

41. columns.Bound(m => m.WebLicenseCount).HtmlAttributes(new { cellType = "WebCount" });

42. columns.Bound(m => m.MobileLicenseCount).HtmlAttributes(new { cellType = "MobileCount" });

43. columns.Bound(m => m.ExcelAddInLicenseCount).HtmlAttributes(new { cellType = "ExcelCount" });

44. if (currentUser.Type == (int)PAService.PartnerEDM.UserRole.Admin)

45. {

46. columns.Command(command => command.Edit().Text(" ")).Width(100);

47. }

48. })

49. .ToolBar(toolbar =>

50. {

51. if (currentUser.Type == (int)PAService.PartnerEDM.UserRole.Admin)

52. {

53. toolbar.Create().Text(@ressourceManager.GetString("Add"));

54. }

55. else

56. {

57. toolbar.Create().Text(@ressourceManager.GetString("RequestLicence"));

58. }

59. })

60. .Editable(editable =>

61. {

62. editable.Mode(GridEditMode.PopUp);

63. if (currentUser.Type == (int)PAService.PartnerEDM.UserRole.Admin)

64. {

65. editable.TemplateName("LicenceEditTemplate");

66. }

67. else

68. {

69. editable.TemplateName("LicenceRequestTemplate");

70. }

71. editable.Window(w => w.Width(600));

72. })

73. .Events(e => e

74. .Edit("AdaptLicenceEditPopup")

75. .DataBound("UpdateDatesColors")

76. .Save("UpdateCalculatedFields")

77. .DetailExpand("grid_detailexpand")

78. .Cancel("Cancel")

79. )

80. .Sortable()

81. .Filterable()

82. .Resizable(resize => resize.Columns(true))

83. .ToClientTemplate()

84. )

85.</script>

The problematic label:

1.@Html.LabelFor(l => l.IsDemo)

Which get its name from:

1.[LocalizedDisplayName("IsDemoLicence")]

2.public bool IsDemo { get; set; }

which render as State in English, but as &201;tat in French. Note that the same label is decoded correctly outside of the popup (in my grid headers).
What am I doing wrong? Thanks in advance.

UPDATE : The popup decode the characters correctly for the top level grid, which means that the problem seems to come from the templates.

Grid

answered on 30 Jul 2013

2 answers

494 views

Prompt to save changes when in batch editing mode

Hi,

I'm using the grid in an MVC 4 application, utilising the batch editing. I have two problems with the grid that I cannot work out.

1) If the user tries to navigate away from the page while there are dirty models I wish to prompt them appropriately. I tried the script below, however the data collection is of zero length and hasChanges returns false. Could you advise on the best way of providing this functionality please.

window.onbeforeunload = confirmLeavePage();

function confirmLeavePage() {

debugger;

var dataSource = $("#ValuesGrid").data("kendoGrid").dataSource;

var data = dataSource.data();

var hasChanges = dataSource.hasChanges();

for (var loop = 0; loop < data.length; loop++) {

if (data[loop].dirty) {

hasChanges = true;

break;

}

if (hasChanges) {

return

"You have made changes to the current values. The changes will be lost if you leave this page without clicking the save button"

;

}

2) If the grid is paged and you make changes in page 1 you correctly get the red indicator to show the changes, however if you navigate to page 2 and then back to page 1 the red indicator is no longer visible.

Grid

answered on 30 Jul 2013

1 answer

188 views

Titles with double-quotes (") seem to break the tooltips.

During testing my titles were ["This is a test"] and this resulted in the tool tip rendering as "(9:00AM to 9:30AM) ["

Scheduler

answered on 30 Jul 2013

3 answers

107 views

All lists loading

Hello,

I'm implementing cascading dropdown lists in my web app. I currently have three lists and have them set up following the example listed on your site. However, when I make a selection in the first dropdown, the other two will then read in their data and become enabled. It doesn't cascade down properly like in the example. I don't see any difference between the example and how I have things coded, so perhaps someone here can see what I'm doing wrong. I want my lists to cascade properly. Thanks for any and all help. Code sample listed below.

<p>

<label class="searchLabel" for="state">State:</label>

@(Html.Kendo().DropDownList()

.Name("state")

.HtmlAttributes(new { style = "width:275px" })

.OptionLabel("Select state...")

.DataTextField("StateName")

.DataValueField("StateAbbr")

.DataSource(source => source.Read(read => read.Action("GetStates", "Home")))

)

</p>

<p>

<label class="searchLabel" for="county">County:</label>

@(Html.Kendo().DropDownList()

.Name("county")

.HtmlAttributes(new { style = "width:275px" })

.OptionLabel("Select county...")

.DataTextField("CountyName")

.DataValueField("CountyName")

.DataSource(source => source.Read(read => read.Action("GetCounties", "Home").Data("filterCounties"))

.ServerFiltering(true))

.Enable(false)

.AutoBind(false)

.CascadeFrom("state")

)

</p>

<p>

<label class="searchLabel" for="city">City:</label>

@(Html.Kendo().DropDownList()

.Name("city")

.HtmlAttributes(new { style = "width:275px" })

.OptionLabel("Select city...")

.DataTextField("CityName")

.DataValueField("CityName")

.DataSource(source => source.Read(read => read.Action("GetCities", "Home").Data("filterCities"))

.ServerFiltering(true))

.Enable(false)

.AutoBind(false)

.CascadeFrom("county")

)

</p>

<script>

function filterCounties() {

return {

state: $("#state").val()

};

}

function filterCities() {

return {

state: $("#state").val(),

county: $("#county").val()

};

}

$(document).ready(function() {

$("#state").data("kendoDropDownList");

$("#county").data("kendoDropDownList");

$("#city").data("kendoDropDownList");

});

</script>

DropDownList

answered on 30 Jul 2013

1 answer

130 views

Grid Sorting,paging,filtering,expand child,collapse child,refresh handles via button click

dear all,

i've the kendo grid which i need to manually enable the grid properties like sorting,filtering,paging,grouping via button click to the grid

i.e it is like a toolbar for the grid to enable or disable the sorting,filtering,paging,grouping,refresh when button click event occurs

this is my sample code to enable the properties

$("#grouping").click(function () {

$("#grid").data("kendoGrid").groupable(true);

});

$("#removegrouping").click(function () {

$("#grid").data("kendoGrid").groupable(false);

});

 $("#sorting").click(function () {

               $("#grid").data("kendoGrid").sorting(true);

            });

but it shows the error
may any one help for this thread
thanks in advance

Grid

answered on 30 Jul 2013