Questions on Kendo UI for jQuery Forum

6 answers

323 views

How to place an editor into Custom Edit Template

I'm using a Custom Edit Template for my scheduler.

I have two textareas (description & notes) that I would like to be kendo editors. Can this be achieved?

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

<div class="content-wrapper">

<div class="row m05">

<div class="col-sm-2 text-right">

<label for="description">Activity</label>

</div>

<div data-container-for="description" class="col-sm-8">

<textarea name="description" class="k-textbox" required="required" data-bind="value:description"></textarea>

</div>

<div class="row m05">

<div class="col-sm-2 text-right">

<label for="notes">Notes</label>

</div>

<div data-container-for="notes" class="col-sm-8">

<textarea id="notes" name="notes" class="k-textbox" data-bind="value:notes"></textarea>

</div>

<div class="row m05">

<div class="col-sm-2 text-right">

<label for="recurrenceRule">Repeat</label>

</div>

<div data-container-for="recurrenceRule" class="col-sm-8">

<div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>

</div>

</script>

Scheduler

answered on 08 Mar 2021

1 answer

484 views

Configure Data Transport to include Header / ContentType

Using a Kendo Grid to do inline editing. It works absolutely great and love everything Kendo brings to the table. I'm working on doing some refactoring and trying to remove as much duplicate code from an application because ... well because it needs to happen. :-)

So I'm curious, is there a way to specify default values for transport. For example, below you can see a Read, Update, Destroy and in each case I have to set the content type, send auth tokens in the header, etc.

Thanks,

Richard

transport: {

// eslint-disable-next-line consistent-return

parameterMap: function (data, type) {

if (type !== "read" && data) {

return kendo.stringify(data);

}

},

read: {

url: "https://api.domain.com/Billings/",

dataType: "json",

beforeSend: function (xhr) {

xhr.setRequestHeader("TOKEN", "SomethingHere");

xhr.setRequestHeader("SECRET", "SomethingHere");

}

},

update: {

type: "PUT",

url: "https://api.domain.com/Billing",

dataType: "json",

contentType: "application/json;charset=utf-8",

beforeSend: function (xhr) {

xhr.setRequestHeader("TOKEN", "SomethingHere");

xhr.setRequestHeader("SECRET", "SomethingHere");

}

},

destroy: {

type: "DELETE",

url: "https://api.domain.com/Billing",

dataType: "json",

contentType: "application/json;charset=utf-8",

beforeSend: function (xhr) {

xhr.setRequestHeader("TOKEN", "SomethingHere");

xhr.setRequestHeader("SECRET", "SomethingHere");

}

},

Grid

answered on 08 Mar 2021

1 answer

92 views

ForeignKey column does not work under multi-column header

Hello,

I figured out that when I put a foreign key column under a multi-column header, it does not connect to the reference data source and shows raw foreign keys (numbers) instead.

Please see https://dojo.telerik.com/ipObEVAG for the example (made out of foreign key example).

Do I miss something or is it a bug?

Thanks.

Grid

answered on 08 Mar 2021

3 answers

1.0K+ views

Inline Edit Grid Showing Empty Rows

Hi Quite new to Telerik UI for Jquery. Trying to get an inline edit grid with ajax source. But for some reason all the rows are empty even though the ajax json result is not empty.

Have reference the demo Inline editing in https://demos.telerik.com/kendo-ui/grid/editing-inline but still unable to identify the issue. Here's my code below. Does any one know wat the issue is? or point me in the right direction? P.S can ignore the transport links... once I get read to work, then can move on to other links..

Thanks.

01.var crudServiceBaseUrl = "";

02. dataSource = new kendo.data.DataSource({

03. transport: {

04. read: {

05. url: "@Url.Action("KendoGrid_Read","Admin")",

06. dataType: "json"

07. },

08. update: {

09. url: crudServiceBaseUrl + "/Products/Update",

10. dataType: "jsonp"

11. },

12. destroy: {

13. url: crudServiceBaseUrl + "/Products/Destroy",

14. dataType: "jsonp"

15. },

16. create: {

17. url: crudServiceBaseUrl + "/Products/Create",

18. dataType: "jsonp"

19. },

20. parameterMap: function(options, operation) {

21. if (operation !== "read" && options.models) {

22. return {models: kendo.stringify(options.models)};

23. }

24. }

25. },

26. batch: true,

27. pageSize: 20,

28. schema: {

29. data: "data",

30. total: "total",

31. errors: "errors",

32. model: {

33. fields: {

34. id:"CompanyId",

35. CompanyId: { type:"number", editable: false, nullable: false },

36. CompanyName: { type: "string", editable: false },

37. CompanyGroupId: { type:"number", editable: false },

38. IsActive: { type: "boolean" },

39. Multiplier: { type: "number", validation: { min: 0, required: false } }

40. }

41. }

42. }

43. });

44.

45.

46. $("#grid").kendoGrid({

47. dataSource: dataSource,

48. pageable: true,

49. height: 550,

50. toolbar: ["create"],

51. columns: [

52. { field: "CompanyName", title: "Company Name" },

53. { field: "CompanyGroupId", title: "Unit Price" },

54. { field: "Multiplier", title: "Multiplier" },

55. { field: "IsActive", title: "Is Active", width: "120px" },

56. { command: ["edit", "destroy"], title: " " }

57. ],

58. editable: "inline"

59. });

60. });

Grid

answered on 07 Mar 2021

14 answers

1.9K+ views

How can I use "Disable Items for Selection" in my situation?

https://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/selection/disable-items-for-selection

{field: 'operDay', title: '조업요일', width: 100, editor: _this.columnEditor.dayDropDownEditor}

dayDropDownEditor : function (container, options) {

$('<input id="' + options.field + '" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList({

suggest: true,

dataSource: [

{id:'1', name:'월요일', operDay: '월요일', isDeleted: false },

{operDay: '화요일', isDeleted: false },

{operDay: '수요일', isDeleted: false },

{operDay: '목요일', isDeleted: false },

{operDay: '금요일', isDeleted: false },

{operDay: '토요일', isDeleted: false },

{operDay: '일요일', isDeleted: false }

],

dataTextField: 'operDay',

dataValueField: 'operDay',

valuePrimitive: true,

select: function(e){

if(e.dataItem.isDeleted){

e.preventDefault();

alert("why?");

}

},

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

});

}

Hello, I need the feature in the link above. Some of the dropbox items I specified are deactivated and reactivated upon request. But I don't know how to apply that code to my code. Because there are some differences. I attach my code above.

<input id="dropdownlist" /> <button class="k-button"> Mark Oranges as deleted</button>

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

<span class="#: isDeleted ? 'k-state-disabled': ''#">

#: name #

</span>

</script>

This is the part I don't know, and it's also where the error occurs.

1. I think there is no ID that can be specified because it creates input dynamically. = <input id: dropdownlist> (There is option.field, but it is not recognized even if it is specified as #operDay.) 1-1. As a result, you cannot access the dataSource. 2. Where should I write the <script> <span> ... </ span> </ script> section? column? jsp? I tried to template it in a column, but I get an "isDeleted is not defined" error. I'm thinking that I don't recognize it. Please let me know how you can use that code ...

DropDownList

answered on 05 Mar 2021

1 answer

223 views

Editor space issue when Grammarly extension

Editor top getting blank space when Grammarly extension loaded.

see the image

how to fix the this issue on editor side.

Editor

answered on 05 Mar 2021

1 answer

147 views

can't pan all the way back after panning chart

I have a chart, with a grouped bubble series. Using dates on the X-Axis, months, with a 12 month period displaying initially. Chart has about 10 years of data, and after scrolling to the left and panning the chart, when attempting to scroll back to the right, I can't pan all the way back to the end, the scrolling stops about 6 months short. The chart displays correctly initially, but once you scroll the recent months off of the view, you can't get back to them.

Wondering if this is an issue that has been encountered before, and if so, there may be a known data cause or some configuration setting I'm missing.

If necessary, I can create a sample. Current chart code is bound to API services, so a little difficult to just drop into this post.

Charts

answered on 05 Mar 2021

3 answers

133 views

Kendo UI jquery Form - every component size

Hi,

Does anyone know how to customize the size of every components in Kendo Form using JQuery at the beginning of form component initialization stage?

Thanks.

Eric

Form

answered on 05 Mar 2021

4 answers

255 views

Widgets inside a wizard

I want to create a wizard from an existing form that includes several kendo widgets. The form and its widgets work fine until I initiate the wizard. The first step of the wizard includes a country dropdown and that stops working as soon as the wizard has been initialised. The dropdown doesn't respond to any clicks, nor are there any errors displayed in the browser console. One of the checkboxes should trigger a view model method, but that's not working either.

The form is used to add data to the database. The same form is used to update the database (without needing a wizard) and works as intended when updating.

Help?

Regards,

Henk

Wizard