Questions on Kendo UI for jQuery Forum

1 answer

115 views

[Solved] Set Different widths for different drop downs on the same screen

I need to Set 3 drop downs with different widths, they all have common css, how do we go about doing this?? Kind of urgent any help will be much appreciated.

DropDownList

answered on 31 Jul 2013

1 answer

931 views

Manually open the autocomplete suggestion and refresh the data

I just have a simple needs, building intellisense feature for my app, got everything working but the KendoUI autocomplete doesn't have open method to manually open the popup when the user type ".",

see the sample code, see line 41 (where I need to manually open the autocomplete) and line 51 , replace the suggestion list

01.var tree = GetTheListOfSuggestionFromSomewhere();

02.var data = _.chain(tree)

03. .map(function (t) {

04. if (t.parent === "")

05. return t.name;

06. return undefined;

07. })

08. .filter(function (t) {

09. return typeof t !== "undefined";

10. })

11. .value();

12.

13.console.log(data);// this log out array of string

14.

15.var dataSource = new kendo.data.DataSource({

16. data: data

17.});

18.var input = $(element).data("kendoAutoComplete") ||

19. $(element).kendoAutoComplete({

20. dataSource: tree,

21. dataTextField: "path",

22. change: function () {

23. var path = this.value();

24. console.log("selected path ", path);

25.

26. },

27. filter: "startswith",

28. placeholder: "Select path...",

29. separator: ""

30. }).data("kendoAutoComplete");

31.

32.$(element)

33. .change(function () {

34. value($(this).val());

35. console.log("new value", value());

36. })

37. .val(value())

38. .on("keydown", function (e) {

39. if (e.which === 110 || e.which === 190) {

40. var path = $(this).val() + ".";

41. console.log("show the auto complete", path);

42. var filtered = _.chain(tree)

43. .filter(function (t) {

44. return t.parent === path;

45. })

46. .map(function (t) {

47. return t.name;

48. })

49. .value();

50. console.log(filtered);

51. //input.setDataSource(dataSource);

52. dataSource.data(filtered);

53. input.refresh();

54. }

55. });

AutoComplete

answered on 31 Jul 2013

3 answers

4.4K+ views

[Solved] DatePicker set value incorrectly

Guys,

I want to set DatePicker a new value in a different function from where I define the DatePicker. Right now, I do like this:

function A() {
    $("#Date").kendoDatePicker({ min: new Date($('#TodaysDate').val())});
}

function B() {
    var NewDate = kendo.toString(this.value(), 'MM/dd/yyyy');
    $("#Date").val(NewDate);
}

It turns out that the date appears in the dialog is correct, but the date highlighted in the calendar is wrong. It's just like enter a new date in the dialog but doesn't press the Enter. Anyone has any idea how to fix it?

Thanks!

DatePicker

answered on 31 Jul 2013

1 answer

145 views

Error viewing very simple page

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

152 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

336 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

534 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

159 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

368 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

543 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