Questions on Kendo UI for jQuery Forum

1 answer

219 views

Issues with the slotByPosition method during group mode

I have implemented drag and drop onto a scheduler widget using sample code from Telerik. The scheduler "Drop Target Area" works fine when the scheduler IS NOT being grouped. However in grouped mode, the method "slotByPosition(left, right)" is always returning null.

function

createDropArea(scheduler) {

  scheduler.view().content.kendoDropTargetArea({

    filter:

".k-scheduler-table td, .k-event"

,

    drop:

function

(e) {

var grid = $("#grid").data("kendoGrid"

);

var sch = $("#" + scheduler.element[0].id).data("kendoScheduler"

);

var

offset = $(e.dropTarget).offset();

var

slot = sch.slotByPosition(offset.left, offset.top);

var

dataItem = grid.dataItem(grid.select());

if

(dataItem && slot) {

var offsetMiliseconds = new

Date().getTimezoneOffset() * 60000;

var

newEvent = {

            title: dataItem.Name,

            end:

new Date(moment(slot.endDate).add('minutes'

, 30)),

            start: slot.startDate,

            isAllDay: slot.isDaySlot,

            jobId: dataItem.Id,

         };

         scheduler.dataSource.add(newEvent);

         scheduler.dataSource.sync();

       }

    }

});}

Scheduler

answered on 15 Aug 2014

4 answers

253 views

Angular server-side filtering

General goal here is to have a searchable dropdownlist that:

1. Doesn't request all records from the server when it first loads.
2. Allows me to control the number of characters entered in the search box before the server filter is fired.
3. I don't know what Angular directive is used to make the dropdown show the filter ... k-filter ? filter ?

<input id="customerSearch" placeholder="Search Customer"
kendo-widget-name="customerSearch"
kendo-drop-down-list
k-on-select="customer_select(kendoEvent)"
k-suggest="true"
k-height="100"
k-data-text-field="'customer.name'"
k-data-value-field="'id'"
k-data-source="customerSearchDataSource"
filter="startswith"
ng-model="search"
k-template="'<span>${ data.customer.name }</span>'">

DropDownList

answered on 15 Aug 2014

7 answers

221 views

quick navigation issue with slide transition

The issue I have is with the tabstrip in a footer on ios devices with view transition slide. When you try to navigate quickly through the views the tabs can get 'stuck'. It seems to me that the mouse-up event doesn't fire because the tab you touch stays highlighted. Then when you try clicking it again it fires the click event twice consecutively. This behavior does not seem to occur on android devices.

I've created an example jsbin to help with replicating the issue, just be aware that it takes a few goes of flicking between the 2 views quickly to cause the issue - you have to touch the tabstrip at precisely the right time as soon as a view shows. And make sure you run it on an ios device; I've been testing with an iPad mini.

The attached screenshots show what happens when the issue occurs.

Regards
Dean

TabStrip (Mobile)

answered on 14 Aug 2014

9 answers

407 views

Combine multiple series into one legend item (click event/toggle)

How do I combine two series into one legend item? I want to place error bars "onto" a stacked area series. Since the stacked area messes up the placement of the error bars, I cannot put them on the same series. But I do want to be able to toggle them off and on together.

Charts

answered on 14 Aug 2014

3 answers

683 views

Kendo filterable row search box width

Hi!
The new kendoui grid feature of the filter row is a great improvement to the grid! We are trying to use it on our project but it seems that the filter input boxes can't seem to handle small column widths. We tried configuring the width of the input using the configuration columns.filterable.cell.inputWidth but seems to make no difference. Tried it in the kendoui documentation example here: http://dojo.telerik.com/UxUr but changing the number doesn't seem to change anything.

Any suggestions?

Grid

answered on 14 Aug 2014

1 answer

74 views

Kendo grid "column settings" on a mobile device

Hello,

When opening the mobile device's "column settings" menu, the label above the "sort ascending, descending, etc." options is the column id.

As this makes no sense in my application, I need to replace this id with the column name. Is there some built-in option, or could you provide a workaround?

Thanks

Grid

answered on 14 Aug 2014

3 answers

1.0K+ views

Grid with Date Only field - value off by one day

I suspect this question has already been asked and answered elsewhere in the forum, and, it might be more about JSON than the grid.

I am using the MVC wrappers to build a grid. The grid has two “date only” (no time) fields. I am using the Kendo DatePicker widget, but I suspect this is more appropriately a grid question. The grid is using .Ajax() for CRUD operations (which uses JsonResult).
Ex: return Json(new[] { m }.ToDataSourceResult(request, ModelState));

When the server and the user are in two different time zones, I get a displayed date that is off by one day. I assume this is because the time is midnight, and the time zone adjustment is turning midnight on the 15th into 11pm on the 14th (for example).

I tried sending UTC DateTime, but that did not work:
m.StartDate = m.StartDate.ToUniversalTime();

Is there a standard solution for this? I have seen a lot of writeups related to this issue, but most of them don’t directly address Kendo Grid using MVC wrappers and Ajax calls.

Thanks,
R

Grid

answered on 14 Aug 2014

6 answers

190 views

Can not specify Target of Validator

Hello *,

I want to specifiy the target of the validation messages, but it will not be accepted. The default target looks bad with a DatePicker. In the attachment you can see that the Validation message from the Datetimepicker is next to the element instead of the nex line.

best regards

01.

02.<div class="modal fade" id="modal-create-employment-status" tabindex="-1" role="dialog" aria-labelledby="modal-create-employment-status-label" aria-hidden="true">

03. <div class="modal-dialog">

04. <div class="modal-content">

05. <div class="modal-header">

06. <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>

07. <h4 class="modal-title" id="modal-create-employment-status-label">@GlobalResources.Create</h4>

08. </div>

09. <div class="modal-body">

10.

11. <form id="form-create-employment-status" class="form-horizontal" role="form">

12.

13.

14. <input type="hidden" id="employment-status-id" name="employment-status-id" />

15.

16. <div class="form-group">

17. <span class="k-invalid-msg" data-for="from"></span>

18. <span class="k-invalid-msg" data-for="dropdown-employee"></span>

19. </div>

20.

21. <div class="form-group">

22. <label for="dropdown-employee" class="col-sm-4 control-label">@GlobalResources.Employee</label>

23. <div class="col-sm-4">

24. <input class="" id="dropdown-employee" name="employee" required=""/>

25. </div>

26. </div>

27.

28. <div class="form-group">

29. <label for="from" class="col-sm-4 control-label">@GlobalResources.From *</label>

30. <div class="col-sm-4">

31. @(Html.Kendo().DatePicker()

32. .HtmlAttributes(new { required = "" })

33. .Name("from")

34. .Format("yyyy-MM-dd")

35. )

36. </div>

37. </div>

38.

39. <div class="form-group">

40. <label for="to" class="col-sm-4 control-label">@GlobalResources.To</label>

41. <div class="col-sm-4">

42. @(Html.Kendo().DatePicker()

43. .Name("to")

44. .Format("yyyy-MM-dd")

45. )

46. </div>

47. </div>

48.

49. <div class="form-group">

50. <label for="marginal-employment" class="col-sm-4 control-label">@GlobalResources.MarginalEmployment</label>

51. <div class="col-sm-4">

52. <label class="checkbox">

53. <input id="marginal-employment" type="checkbox" class="" name="marginal-employment">

54. </label>

55. </div>

56. </div>

57.

58. <div class="form-group">

59. <label for="amount-of-employment" class="col-sm-4 control-label">@GlobalResources.AmountOfEmployment</label>

60. <div class="col-sm-4">

61. @(Html.Kendo().NumericTextBox()

62. .IncreaseButtonTitle(GlobalResources.Increase)

63. .DecreaseButtonTitle(GlobalResources.Decrease)

64. .Name("amount-of-employment")

65. .Format("p")

66. // .Min(0)

67. )

68. </div>

69. </div>

70.

71. <div class="form-group">

72. <label for="dropdown-qualification" class="col-sm-4 control-label">@GlobalResources.Qualification</label>

73. <div class="col-sm-4">

74. <input class="" id="dropdown-qualification" name="qualification" />

75. </div>

76. </div>

77.

78. </form>

79. </div>

80. <div class="modal-footer">

81. <button type="button" class="btn btn-default" data-dismiss="modal">@GlobalResources.Cancel</button>

82. <button type="button" class="btn btn-primary" onclick="$('#form-create-employment-status').submit();">@GlobalResources.Save</button>

83. </div>

84. </div>

85. </div>

86.</div>

001.openEditModal: function(event) {

002. event.preventDefault();

003. var dataItem = this.dataItem($(event.currentTarget).closest("tr"));

004.

005. $("#dropdown-employee-list").remove();

006. $("#dropdown-employee").kendoDropDownList({

007. dataTextField: "Text",

008. dataValueField: "Value",

009. dataSource: {

010. transport: {

011. read: {

012. dataType: "json",

013. url: "/Employee/GetEmployee?employeeId=" + dataItem.EmployeeId

014. }

015. },

016. schema: {

017. data: "items",

018. total: "count"

019. }

020. },

021. value: dataItem.EmployeeId

022. });

023. $("#dropdown-qualification-list").remove();

024. $("#dropdown-qualification").kendoDropDownList({

025. dataTextField: "Text",

026. dataValueField: "Value",

027. dataSource: {

028. transport: {

029. read: {

030. dataType: "json",

031. url: "/Employee/GetQualifications"

032. }

033. },

034. schema: {

035. data: "items",

036. total: "count"

037. }

038. },

039. value: dataItem.Qualification.Id

040. });

041.

042. $("#from").kendoValidator({

043. rules: {

044. //implement your custom date validation

045. dateValidation: function (input) {

046. var currentDate = kendo.parseDate($(input).val(), "dd.MM.yyyy", "de-DE");

047. //Check if Date parse is successful

048. if (!currentDate) {

049. return false;

050. }

051. return true;

052. }

053. },

054. messages: {

055. //Define your custom validation massages

056. required: "Das Feld Von ist erforderlich!",

057. dateValidation: "Datumsformat ungültig!"

058. }

059. });

060.

061. $("#dropdown-employee").kendoValidator({

062. rules: {

063. //implement your custom date validation

064. dateValidation: function (input) {

065. var currentDate = kendo.parseDate($(input).val(), "dd.MM.yyyy", "de-DE");

066. //Check if Date parse is successful

067. if (!currentDate) {

068. return false;

069. }

070. return true;

071. }

072. },

073. messages: {

074. //Define your custom validation massages

075. required: "Das Feld Angestellter ist erforderlich!",

076. dateValidation: "Datumsformat ungültig!"

077. }

078. });

079.

080. // fill up fields

081. $("#employment-status-id").val(dataItem.EmploymentStatusId);

082. $("#from").data("kendoDatePicker").value(dataItem.From);

083. $("#to").data("kendoDatePicker").value(dataItem.To);

084. if (dataItem.MarginalEmployment) {

085. $("#marginal-employment").prop('checked', true);

086. }

087. else {

088. $("#marginal-employment").prop('checked', false);

089. }

090.

091. $("#amount-of-employment").data("kendoNumericTextBox").value(dataItem.ContractPercent);

092. //

093.

094. $("#form-create-employment-status").unbind("submit");

095. $("#form-create-employment-status").submit(function (e) {

096. e.preventDefault();

097. $.ajax({

098. type: "POST",

099. url: "/Employee/UpdateOrCreateEmploymentStatus",

100. data: $("#form-create-employment-status").serialize()

101. }).done(function (data, textStatus, jqXHR) {

102. $('#EmploymentStatusGrid').data('kendoGrid').dataSource.read();

103. $('#EmploymentStatusGrid').data('kendoGrid').refresh();

104. $('#modal-create-employment-status').modal('hide');

105. })

106. .fail(function (jqXHR, textStatus, errorThrown) {

107. alert(errorThrown);

108. });

109. });

110.

111. $('#modal-create-employment-status').modal('show');

112.}

Validation

answered on 14 Aug 2014

5 answers

102 views

Set view to the initial state

Hi,

I am building a data entry screen using Kendo UI SPA. My users will do lot of data entry each day. So after filling in a form and pressing Save should save the records and again present them the same screen for data entry. How can I reset all the controls (or View Model) to initial state?

Thanks

SPA

answered on 14 Aug 2014

3 answers

968 views

How to Add Horizontal lines to Column Chart, and Rotated labels?

I have a column chart built with Kendo DataViz, and i'd like to add the following to it:

1. Two Horizontal lines, over the full length of the chart
2. Rotated labels to the left of each columns.

Can't seem to find a working demo for both of these features.
The image attached is a sample of what i'd like to achieve.

would appreciate any help on how to do this.

Thanks,

Charts

answered on 14 Aug 2014