Questions on Kendo UI for jQuery Forum

3 answers

1.1K+ views

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

2.1K+ views

[Solved] 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

269 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

190 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

180 views

[Solved] 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

318 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

answered on 04 Mar 2021

3 answers

369 views

Two level Kendo TabStrip

I am not sure if the TabStrip control is the right one to use for what I am trying to do.

Below is the screenshot of what I am working on:

TabStrip

answered on 04 Mar 2021

4 answers

154 views

Filter Date Range End date not filtering

Hi,

I'm able to filter the grid between two date ranges but if the users just enters the 2nd date and leaves the first date bank I'm not able to filter those results. Need some help getting the end date to filter as well.

Here is code below:

function FilterGrid() {

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

var orderDateFromFilter = $("#FromDate").val().split('-');

var orderDateToFilter = $("#ToDate").val().split('-');

if (orderDateFromFilter == "") {

orderDateToFilter = "";

$("#ToDate").val("");

$("#text5").val("");

$("#text6").val("");

}

else if (orderDateToFilter == "") {

$("#ToDate").val($("#FromDate").val());

$("#text6").val($("#text5").val());

orderDateToFilter = orderDateFromFilter;

}

var mydate1 = new Date(orderDateFromFilter[0], orderDateFromFilter[1]-1, orderDateFromFilter[2]);

var mydate2 = new Date(orderDateToFilter[0], orderDateToFilter[1]-1, orderDateToFilter[2]);

var filter = { logic: "and", filters: [] };

filter.filters.push({ field: "FilterByDate", operator: "gte", value: mydate1 });

filter.filters.push({ field: "FilterByDate", operator: "lte", value: mydate2 });

if (orderDateFromFilter== "" && orderDateToFilter == "")

filter = "";

grid.dataSource.filter(filter);

}

Grid

answered on 04 Mar 2021

1 answer

208 views

Why is the Grid apply a div with Cover class

using kendo version 2015.3.1111 (limitation to this version due to other maximum targets of system)

I've noticed using the kendo Grid that the below element is added to the DOM for each column (note the positioning is different per column):

<div class="cover" style="left: 47px; top: 1932.15px; width: 90px; height: 30px; position: absolute;">

On edit and save/cancel of a row this element is duplicated again and again. I noticed the issue as I hide an element on the main page when i hit edit in the grid and the positioning then changed and the hover/clickable area of the button was not on top of the button.

Note that if i override the style with display: none i fix the clicking issue without any noticeable side-effects however the DOM is still polluted with these numerous div elements.

Can anyone provide some insight and/or a resolution to remove these elements?

Grid