Questions on Kendo UI for jQuery Forum

2 answers

1.4K+ views

DropDownList with value bound to property not showing item when datasource is refreshed.

Hi,

I'm having a problem with a dropdownlist not showing the item that is returned when datasource is refreshed. It can be tested to see what I mean in the following dojo sample. Can anyone point me in the right direction on how to get the dropdownlist to show the returned item when the "Click me" button is returned.

Dojo

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.rtl.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/angular.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jszip.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script></head>

<body>

<div id="registrationForm">

<input id="vessel" class="grid-class" data-value-primitive="true" data-role="dropdownlist" data-auto-bind="true" data-text-field="dn" data-value-field="id" data-bind="source: Vessels, value: VesselId" data-filter="contains" />

<button data-role="button"

data-icon="edit"

data-bind="events: { click: onClick }"

style="width: 180px">Click me</button>

</div>

<script type="text/javascript">

$(document).ready(function () {

viewModel = kendo.observable({

VesselId: 36844,

onClick: function() {

viewModel.set('VesselId', 32638);

viewModel.Vessels.read();

},

Vessels: new kendo.data.DataSource({

transport: {

read: {

url: "https://srfapi.scarp.no/basedata/vessels",

dataType: "json",

type: 'GET'

},

parameterMap: function (data, type) {

if (type === 'read') {

var value = '';

if (data.filter !== undefined) {

var filter = data.filter.filters[0];

if (filter !== undefined) {

value = data.filter.filters[0].value;

}

return { text: value, id: viewModel.get('VesselId') };

}

},

serverFiltering: true

}),

});

kendo.bind($("#registrationForm"), viewModel);

});

</script>

</body>

</html>

MVVM

answered on 31 Oct 2019

3 answers

1.2K+ views

Selecting a specific drawer in the Drawer component

Hi

I have implemented the new Drawer component:

$("#drawer").kendoDrawer({

template: tooltemplate,

mode: "push",

mini: true,

itemClick: function (e) {

e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");

e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-drawer-id").text()).removeClass("hidden");

var spanItemText = e.item.find(".k-item-text").html();

$('#titleSpan').html(spanItemText);

},

position: 'left',

minHeight: 800,

swipeToOpen: false

});

All is great. The Drawer component functions perfectly. Whenever it is used it always defaults to the top (first) drawer. My users now want the ability to specify which drawer is selected by default. I've implemented a my settings page where the user can specify which drawer they prefer as their default. This value (which is the spanItemText value in my code above) is stored in a cookie. How do I select this drawer each time the component is used. Or is there a better way of doing this? I'm trying to programmatically click the drawer icon but I'm not having much luck at the moment.

Thanks.

Drawer

answered on 31 Oct 2019

5 answers

287 views

shading a scatterline chart

I am trying to shade from the x axis to the scatter line. Is there a way to do this using the scatterline chart?

Charts

answered on 30 Oct 2019

3 answers

156 views

non-grid pager problem

Hope this is the right forum, there isn't one for "pager".

We have a datasource that is associated with a pager object - directly, not via a grid.

This worked fine in 2019/1 but when we updated to 2019/3 it stopped working - rather than having a list of page numbers left-to-right along the bottom, we just have a single page number with a dropdown menu associated with it.

This dojo illustrates:

https://dojo.telerik.com/IYolIKoL

Adding the setting

responsive: false

fixes the issue.

Is this an intended change in behaviour? I can't see it documented anywhere, and we don't get the same thing happening if the pager is associated with a grid rather than a datastore.

Data Source

answered on 30 Oct 2019

3 answers

1.3K+ views

[Solved] Kendo Grid not calling server when calling read

So I am working in ASP.NET MVC using a Kendo Grid and I am having trouble with the grid not reloading after calling read. There isn't an error in the console and the grid just goes blank. At first I thought it was because it was editable but then i removed that and it still has issues.

Grid:

01.@(Html.Kendo().Grid<Common.Warehouse.ViewModels.WareHouseAssetViewModels.AssetTransferSKUViewModel>()

02. .Name("AssetTransferGrid")

03. .HtmlAttributes(new { @style = "height:100%" })

04. .Columns(columns =>

05. {

06. columns.Bound(m => m.SKUTitle).Title("SKU");

07. columns.Bound(m => m.SerialNumber).Title("Serial Number").Media("sm");

08. columns.Bound(m => m.QtyShipped).Title("Quantity").Media("sm");

09. columns.Bound(m => m.ValueEach).Title("Value Each");

10. columns.Command(command => command.Destroy());

11. })

12. .ToolBar(toolbar =>

13. {

14. toolbar.Custom().Text("Ship Transfer").HtmlAttributes(new { @id = "Ship" });

15. toolbar.Save();

16. toolbar.Excel();

17. toolbar.Pdf();

18. })

19. .Pdf(pdf => pdf

20. .AllPages()

21. .AvoidLinks()

22. .RepeatHeaders()

23. .RepeatHeaders()

24. .FileName("Transfer_Ship")

25. .PaperSize("8.5in","11in")

26. .Scale(0.8)

27. .Margin("3pt","3pt","3pt","3pt"))

28. .Excel(excel => excel

29. .FileName("Transfer_Ship")

30. .AllPages(true))

31. .Editable(editable => editable.Mode(GridEditMode.InCell))

32. .DataSource(datasource => datasource

33. .Ajax()

34. .Events(e => e.Error("error_handler"))

35. .PageSize(40)

36. .ServerOperation(true)

37. .Model(model =>

38. {

39. model.Id(m => m.Id);

40. })

41. .Sort(sort => sort.Add(m => m.SKUTitle).Ascending())

42. .Read(read =>

43. {

44. read.Type(HttpVerbs.Post);

45. read.Action("ReadShippedTransferSKUs_Async", "AssetManager", new { assetTransferId = Model.Id } );

46. })

47. .Update(update => update.Action("UpdateTransferSKU","AssetManager"))

48. .Destroy(destroy => destroy.Action("DeleteTransferSKU", "AssetManager"))

49. )

50. .Scrollable(sc => sc

51. .Height(500)

52. .Endless(true)

53. .Enabled(true)

54. )

55. .Sortable()

56. .Filterable(ftb => ftb

57. .Mode(GridFilterMode.Menu)

58. .Extra(false)

59. .Operators(op => op

60. .ForString(str => str

61. .Clear().Contains("Contains").StartsWith("Begins With").EndsWith("Ends With")

62. )

63. )

64. )

65. .Selectable(select => select

66. .Mode(GridSelectionMode.Single)

67. .Type(GridSelectionType.Row)

68. )

69. .Mobile(MobileMode.Auto)

70. .NoRecords(n => n.TemplateId("noRecords"))

71. )

72.

73. @Html.Partial("_TemplateNoRecords")

Server Code:

01.public

async Task<ActionResult> ReadShippedTransferSKUs_Async([DataSourceRequest]DataSourceRequest request, Guid assetTransferId)

02. {

03. string entityId = getEntityID();

04. DataSourceResult result = await IWarehouse.GetAssetTransferSKUsByTransferId(assetTransferId, entityId)

05. .Select(s => new WAVM.AssetTransferSKUViewModel

06. {

07. Id = s.ID,

08. SKUTitle = s.SKU.Title,

09. SerialNumber = s.SKUItem != null ? s.SKUItem.SerialNumber : string.Empty,

10. QtyShipped = s.QtyShipped,

11. QtyReceived = s.QtyShipped,

12. ValueEach = s.ValueEach

13. })

14. .ToDataSourceResultAsync(request);

15.

16. return Json(result, JsonRequestBehavior.AllowGet);

17. }

Javascript Callback:

01.function skuAddSucces(data) {

02. var x = data["Success"];

03. var y = data["SuccessMsg"];

04. var z = data["Type"];

05. alertShow(x, z, y);

06. if (x) {

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

08. grid.dataSource.read();

09. }

10. }

Grid

answered on 30 Oct 2019

3 answers

418 views

[Solved] pushUpdate fails for Grid DataSource

Hi,

Im using a grid to display near real-time data from c#/ASP.Net server side via SignalR - adding/updating data rows with pushUpdate().

I already have one grid working in this manner but I haven't been able to work out why updates to a new grid are failing with the error:

TypeError: target.accept is not a function

at init.pushUpdate (kendo.all.js:6765)

In the following line (kendo.all.js:6762) - I noticed that model.id was undefined:

var target = this.get(model.id);

I have replicated this on dojo. It appears the grid/datasource doesn't handle the initial data, then does reflect the first update, but not the second.

On my machine, I'm using the following:

Kendo UI for jQuery R3 2019

Windows 10

Firefox 69.0.3
Chrome 77.0.3865.120

jQuery 3.3.1

Data Source

answered on 29 Oct 2019

1 answer

8.8K+ views

Simply setting a cell value

I have a grid with 5 columns - COL1 to COL5. I call a function when the user selects a row and chooses a menu option from a context menu. The function gets the selected row. All I want to do is set the text of a certain column in the selected row:

var grd = $(gridCTL).data('kendoGrid');
var selectedItem = grd.dataItem(grd.select());

selectedItem.COL1 = "new value"; // this does not work

Can anyone help with this simple task ?!

Grid

answered on 29 Oct 2019

1 answer

167 views

Loading an Item greater than the dataSource's PageSize

I have a kendoComboBox, with an associated dataSource that has more items than the PageSize. This comboBox is bound to one my columns in the grid. When creating a new record, i can access the items for this comboBox, that are not in the first 'pageSize items', by using the comboBox's filter and suggestion features, so i start typing, and can access a previously unloaded item. My problem occurs after i have created a record, and selected an item in this comboBox, that was not loaded at first on the dataSource, that is, an item greater than the PageSize. When i open the popup, and try to edit such a record, the comboBox is unable to find the previously selected item and, only displays the item's value field, instead of it's text field. From what I understand, because the item is not loaded in the dataSource by default, since it is greater than the PageSize, the comboBox's dataSource is unable to find the dataItem an assign it to the comboBox. So, what i would like to know, is if there is a way to load items that are larger than the dataSource's pageSize, when editing a record that already has these items selected on their comboBoxes.

ComboBox

answered on 28 Oct 2019

5 answers

1.6K+ views

Replace template dynamically and bind new template

Hi

To speed up a grid with a lot of dropdownlists, I want to only write the text to the cells initially and, on click, load the dropdownlist of this cell, replace the text with it, so the user can use the dropdownlist from now on.

I'm replacing the text-cell-template with the dropdownlist-cell-template, but the dropdownlist does not get bound automatically.

What's the best way, to initialize the new dropdownlist-cell-template only, without rerendering/rebinding everything else?

Example: http://dojo.telerik.com/uZOBALUp/2

Greets Robin

Application

answered on 28 Oct 2019

7 answers

5.3K+ views

Kendo UI VS Telerik UI for ASP.NET MVC

Quick question... In my Telerik Control Panel I have the option to install Kendo UI Professional and UI for ASP.NET MVC. This is probably a stupid question, but what is the difference?

Thanks!

General Discussions

answered on 25 Oct 2019