Questions on Kendo UI for jQuery Forum

1 answer

925 views

Virtual Scroll bind Data in Kendo Combobox

Hello Everyone,

I need to create functionality that include virtual scrolling in kendo Combobox,Please assist me I have done some changes in following code of the demo provided by the kendo demo site, so I didn't understand the reason of some function that they have used in it.

Kendo Virtual Combobox Demo url is as:https://demos.telerik.com/kendo-ui/combobox/virtualization

And Modified Code is as Following:

<!DOCTYPE html>

<html>

<head>

<base href="https://demos.telerik.com/kendo-ui/combobox/virtualization">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>

<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content">

<h4>Orders</h4>

<input id="orders" style="width: 100%" />

</div>

<script>

$(document).ready(function() {

$("#orders").kendoComboBox({

filter: "startswith",

template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',

dataTextField: "ShipName",

dataValueField: "OrderID",

virtual: {

itemHeight: 26,

valueMapper: function(options) {

}

},

dataSource: {

type: "odata",

transport: {

read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"

},

pageSize: 10,

serverPaging: true,

serverFiltering: true

}

});

</script>

</div>

</body>

</html>

I have done some changes in the given demo code which are as following:

Remove the Ajax function inside the valueMapper function

such as :

$.ajax({

url: "//demos.telerik.com/kendo-ui/service/Orders/ValueMapper",

type: "GET",

dataType: "jsonp",

data: convertValues(options.value),

success: function (data) {

options.success(data);

}

})

but it is working at all after that so please tell me what is the use of ValueMapper function ?

I have also removed the convertValues() function, but code is working fine, so please tell me what is the use of convertValues() function ?

I am totally confused from the above code, please help me out by providing the simple strategic code which is useful for implement virtual scrolling in Kendo Combobox.

ComboBox

answered on 02 Mar 2016

1 answer

154 views

[Solved] AngularJS component with ng-if

Angular newby here,

I am having troubles with setting up the validator together with an ng-if directive. I figured out ng-if creates a new child scope but I am unable to access the parent validator property as described in the Kendo validator demo.

I've created a dojo where the problem is simulated: http://dojo.telerik.com/AyIzo/4

Hoping for a solution.

Thanks in advance.

Joey Lemmens

Validation

answered on 02 Mar 2016

1 answer

78 views

Multiple Filters

Hello,

Can someone offer some help with my grid. I want to add multiple dropdown filters which use logic AND. So far however nothing is working.

Here is my code.

@(Html.Kendo().Grid<Range_Sliders_Again.Models.tbl_vessels>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(c => c.vessel_name).Title("Vessel Name");

columns.Bound(c => c.vessel_type).Title("Type");

columns.Bound(c => c.spotlist_dp).Title("DP");

columns.Bound(c => c.spotlist_bhp).Title("BHP");

columns.Bound(c => c.current_location_spotlist_id).Title("Spotlist Location ID");

columns.Bound(c => c.spotlist_id).Title("Spotlist ID");

columns.Bound(c => c.spotlist_deck).Title("Deck");

columns.Bound(c => c.spotlist_bp).Title("BP");

})

.Pageable()

.Deferred()

.ToolBar(toolbar => { toolbar.Template(@<text>

<label class="type-label" for="type">Owner:</label>

@(Html.Kendo().DropDownList()

.Name("ddl_type")

.OptionLabel("All")

.DataTextField("spot_name")

.DataValueField("spot_name")

.AutoBind(false)

.Events(e => e.Change("filters"))

.DataSource(ds =>

{

ds.Read("vessel_type", "Spotlist");

}))

@(Html.Kendo().DropDownList()

.Name("ddl_location")

.OptionLabel("All")

.DataTextField("Text")

.DataValueField("Value")

.AutoBind(false)

.Events(e => e.Change("filters"))

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "Norway",

Value = "2"

},

new SelectListItem() {

Text = "Aberdeen",

Value = "1"

},

new SelectListItem() {

Text = "Brazil",

Value = "7"

}

})

)

</text>);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Read(read => read.Action("tbl_vessels_Read", "Spotlist"))

.Model(model => { model.Id(c => c.vessel_idx); })

)

<script>

function filters() {

var ddl_type = document.getElementById("ddl_type");

var ddl_location = document.getElementById("ddl_location");

var value = this.value(),

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

if (value) {

grid.dataSource

.filter([

{"logic":"and",

"filters":[

{ field: "vessel_type", operator: "eq", value: ddl_type.value },

{ field: "current_location_spotlist_id" && "spotlist_id", operator: "eq", value: ddl_location.value

}]},

);

} else {

grid.dataSource.filter({});

}

</script>

I seperated the dropdowns with a comma but it's still only fitlering by one dropdown box.

Grid

answered on 02 Mar 2016

1 answer

196 views

[Solved] Am I editing first row?

I'm doing some inline editing in the grid. If I'm in the first row, the first columns must have a static text instead of a dropdownlist.

How can I determine if I'm in that first row and then make that cell static text or dropdownlist? I've got the dropdownlist working fine, I just need to swap out the template based on which row it is.

Grid

answered on 02 Mar 2016

1 answer

217 views

Get json file from remote server and display in a page

I have below JSON file stored on remote server "server\test.json":

{

"ABC1": [

{

"field": "value",

"field": "value"

},

{

"field": "value",

"field": "value"

}

],

"ABC2": {

"field": "value",

"field": "value"

},

"ABC3": [

{

"field": "value",

"XYZ1": {

"field": "value",

"field": "value"

},

"field": "value"

},

]

}

I am trying to get this json file and render it's contains using Kendo + AngularJS.
I have tried below method to get the file:

this.detailsData = new kendo.data.DataSource(

{

schema: {

parse: function(response)

{

console.log(JSON.stringify(response));

return JSON.parse(products);

}

// Also How to define schema for this json?

},

transport:

{

read:

{

type: "GET",

dataType: "json",

url: "server/test.json"

}

},

change: function (data)

{

alert("Success :"+data);

},

error: function (xhr, error)

{

alert("Error");

console.debug(xhr);

console.debug(error);

}

});

I am calling "this.detailsData.read();" on some events.
I am able to get the file, in the parse and also able to print the json data in console logs.
But when I do "this.detailsData._data" then it is empty.

I am using "kendo-mobile-conten" and "kendo-mobile-view" in HTML for now, but I am targeting to display it in proper list.

General Discussions

answered on 02 Mar 2016

2 answers

253 views

Combobox virtualization

Hello,

I'm experiencing a problem with valuemapper:

var ds = { pageSize: 20,

transport: {

read: function (options) {

options.success(aLocalArrayWithGuidPrimaryKey);
}
}
};

$("#id").kendoComboBox({
...
virtual: {
itemHeight: 26,
valueMapper: function(options) {
options.success([options.value || 0]);// "Cannot read property '...' of undefined" error at this line
}
},
height: 200,
...
dataSource: ds
})

I can't find any local data virtualization sample with Guid primary key.

Any recommendation?

Thank you very much.

Mahmut

ComboBox

answered on 02 Mar 2016

1 answer

188 views

Request - Signature Capture

It would be great if we could get a signature capture widget in Kendo, I'm getting a lot of demand for this sort of thing and don't want to include too many non-Kendo components in my app.

For easy processing, it would be nice if we could just have the output stored in a string that could be just stored in a database without having to manage files. Of course, also having the ability to save as a jpg/png would be essential as well.

General Discussions

answered on 02 Mar 2016

1 answer

108 views

Angular Chart title not dispalyed when saving to image

I have a code that saves chart as image that worked well at version 2014.3.1316. When migrating to version 2015.1.318 it does not work well any more.

I am creating a chart with hidden title.

title: {
visible:false,
text: chartTitle
}

Then, before saving it as image I am setting the title visibility to true:

chartView.options.title.visible=true;

As said above, in V2015.1.318 it does not work and the title is missing from the image.

Please advice

Charts

answered on 02 Mar 2016

7 answers

1.0K+ views

[Solved] treeview checked by code

Hello,

I'm using Kendo.UI [2016.1.217.commercial].

And, I encountered a problem about TreeView. I want set some data items checked by code, these data items did not have expanded. What should I do?

I used " dataItem.set('checked', true) ", but it won't work.

TreeView

answered on 02 Mar 2016

7 answers

1.3K+ views

[Solved] Callback when tree is ready

Hello,

I noticed there is no event that fires when the treeview is loaded.
How can I set the selected node of tree if there's no callback that lets me know when it's done loading?
BTW I am using an ajax call to load the datasource.

Is there a workaround for this?

Thanks

TreeView

answered on 02 Mar 2016