Questions on Kendo UI for jQuery Forum

2 answers

281 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

494 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

118 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

334 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

509 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

204 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

114 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

133 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

2 answers

98 views

Split view navigation using Action Sheet

I am having trouble navigating the main-pane of a split view off of an action sheet on the left-pane.

http://jsbin.com/uguwug/1/edit

Is there something I am missing ?

Thanks

Robin

SplitView

answered on 30 Jul 2013

1 answer

188 views

Editor keeps growing instead of scrolling on iPad

When we enter or view text in the Kendo Editor using an iPad, the editor appears to grow indefinitely instead of scrolling. When very long text is viewed, this means there is no way to get to the bottom of the text, since there is no scrollbar. This happens even when we view the editor demo (http://demos.kendoui.com/web/editor/index.html) on an iPad. We need to set a maximum height on the Editor so that iPad scrolling is available, and the editor does not grow. How can we constrain the height of the editor in this way? Setting HtmlAttributes with a max-height doesn't appear to do anything.

Editor

answered on 30 Jul 2013