Questions on Kendo UI for jQuery Forum

1 answer

234 views

Changing position of expanded items for row expansions

Hi,

I'd like to use the PivotGrid control in a scenario where there may be several layers of grouping in the Rows.

At the moment on the demos page I can see that when you expand a group (eg "All Products"), the expanded items are not directly below the All Products heading but off to the right. This very quickly eats up horizontal room.

Is it possible to instead nest the expanded items almost directly below the heading (maybe only slightly to the right), like you'd expect in a tree view?

I'm including a screenshot of what it looks like and what I'd like to be able to do.

Cheers,

Ilya

PivotGrid

answered on 01 Nov 2019

10 answers

2.6K+ views

How do I get KendoUI Validator to ignore hidden form elements?

I posted the following question on StackOverflow, but got no response.

So I will try here:

I am attempting to use KendoUI Validator with an ASP.NET WebForms project. I have a simple page, that has a number of inputs, and of course ASP.NET adds some hidden form elements as well.

I have the following questions:

Why does the KendoUI Validator not ignore hidden form fields, and how to I get it to?
Why does KendoUI apply the rules to every input field, and how to do get it to ignore some fields. I want a declarative way to do this, not by adding all sorts of exceptions in my validation rule, as per the example in the KendoUI Validator API page.
Shouldn't it be that if no rule is set as an attribute in the input element (eg; required) then no validation is applied?

Behavior I am getting:

With no validation specific attributes on the input element at all, the validation rules still get applied when I call .validate()
Hidden form elements are validated.

I am using the following kendo:

http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js
http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js
http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css
http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css

I have put together a fiddle that demonstrates this:
http://jsfiddle.net/codeowl/B5ML4/3/

And here is the code, for those that don't have access to fiddle, I have the following markup:

<form action="/" id="testForm">

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="text" id="testInput" value="">

<a id="testValidate" href="javascript:;">Validate</a>

</form>

and the following script:

var validatable = $("#testForm").kendoValidator({

rules: {

testRule1: function (input) {

// Only "Tom" will be a valid value for the FirstName input

return input.is("[name=firstname]") && input.val() === "Tom";

},

testRule2: function (input) {

return $.trim(input.val()) !== "";

}

},

messages: {

testRule1: "Your name must be Test",

testRule2: "Your name must be Foo"

}

}).data("kendoValidator");

$("#testValidate").click(function () {

if (validatable.validate()) {

alert('passed');

}

});

and when I press the validate link it shows validation messages for the hidden fields.

Validation

answered on 01 Nov 2019

3 answers

218 views

Mobile platform HTML editing using KendoEditor with Xamarin.Forms.Webview.EvaluateJavaScriptAsync()

Mobile platform HTML editing using KendoEditor with Xamarin.Forms.Webview.EvaluateJavaScriptAsync()

<!DOCTYPE html>
<html>
<head>
<link href="kendo.common.min.css" rel="stylesheet">
<link href="kendo.rtl.min.css" rel="stylesheet">
<link href="kendo.default.min.css" rel="stylesheet">
<link href="kendo.default.mobile.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jszip.min.js"></script>
<script src="kendo.all.min.js"></script>
<script src="console.js"></script>
<script>

</script>

</head>
<body>
<div id="example">
<textarea id="editor">Default text to be replaced</textarea>

<script>
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline"
],
resizable: {
toolbar: true
}
});
</script>
</div>
</body>
</html>

When injecting the above KendoEditor script into the Xamarin.Forms.Webview.EvaluateJavaScriptAsync() after replacing the “Default text..” with an HTML string containing embedded Base64 images, I am finding that it takes a long period of time before the editor is rendered. The HTML contains 3 images each around 3Mb in size. Loading the same HTML containing base64 images in a web application using the KendoEditor is a lot quicker. Has anyone else used the KendoEditor in this way on the mobile platform, and can give any insight as to why the rendering is taking so long?

Editor

answered on 01 Nov 2019

1 answer

90 views

Anyone know if the scheduler can format like this?

Hi,

I've been researching the scheduler and can't seem to see if I can get the scheduler to format Data like the below

Person Monday 25th Tuesday 26th Wednesday 27th Thursday 28th etc

Jamie

Chris

Fred

Steve

Basically I want day slots for each person that I can schedule tasks for. Only one box is required for the task (we can combine multiple tasks into one if necessary) However if its possible to add multiple tasks to the one box that is even better (for drag and dropping tasks between people / days)

Any assistance greatly appreciated or advice on another control that might be better suited.

Stefan

Scheduler

answered on 31 Oct 2019

2 answers

328 views

Cannot populate datasource

I have a grid that I want to populate from data returned from an ajax request.

The data is returned as part of the Ajax response, but is not displayed in the grid.

My code is:-

$.ajax({

type: "POST",

async: true,

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

url: "@Url.Content("~/Dynamic/CompareTables")",

data:'{"tab1":"' + t1 + '","tab2":"' + t2 + '","link1":"' + l1 + '","link2":"' + l2 + '","CompDesc":"' + desc + '"}',

dataType: "json",

success: function (data) {

if (data.Success == true) {

alert(data.Message);

//Create grid from data

var fMatches = new kendo.data.DataSource({ data: data.FieldMatches });

fMatches.read();

$("#fieldCompGrid").kendoGrid({

dataSource: {

data: fMatches,

schema: {

model: {

fields: {

FieldName: { type: "string" },

FieldTypeMatch: { type: "boolean" },

MatchFound: { type: "boolean" },

MaxLengthMatch: { type: "boolean" },

PrecisionMatch: { type: "boolean" },

OutputHeader: { type: "string" },

Output: { type: "string" },

CanBeCompared: { type: "boolean" }

}

},

pageSize: 20

},

height: 550,

scrollable: true,

sortable: true,

filterable: true,

pageable: {

input: true,

numeric: false

},

columns: [

"FieldName",

{ field: "FieldTypeMatch", title: "Type Match" },

{ field: "MaxLengthMatch", title: "Max Length Match", width: "130px" },

{ field: "CanBeCompared", title: "Can Be Compared" }

]

});

//show div

$('#resultsDiv').show();

//$("#Grid").data("kendoGrid").dataSource.read();

$('#compBtn').show();

$('#imgWait').hide();

}

else {

$('#imgWait').hide();

alert(data.Error);

$('#compBtn').show();

}

,

error: function () {

$('#imgWait').hide();

alert("An error has occurred.");

$('#compBtn').show();

}

});

How can I get this working?

Thanks

Grid

answered on 31 Oct 2019

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.1K+ 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

228 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

114 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.2K+ views

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