Questions on Kendo UI for jQuery Forum

3 answers

2.0K+ views

Checking if a treeview item has children

Hi Kendo UI Team!

I'm trying to figure out how to determine whether or not a node that I find by text has any children nodes.

let's say I have a treeview where two of its' nodes are both named "AAA". However, one node has children nodes of its own whereas the other does not.

If I then try the following:

var treeview = $("#treeview").data("kendoTreeView");

var matches = treeview.findByText("AAA");

then my "matches" variable will contain a jQuery object that contains both nodes. From here, how can I identify which of those two nodes specified by the jquery object is the one with no children? My goal is to check the checkbox of the node with no children nodes of its own. Essentially, I would like the line below to work, but right now I am not sure how to look at the matches object to find the correct "NoChildNodesIndex" variable I would use below:

treeview.dataItem(matches[NoChildNodesIndex]).set("checked", true);

Best,

Jeff

TreeView

answered on 26 Jun 2017

1 answer

406 views

Using Nested Model Properties

Hi guys,

is this nested properties approach with using the"from" property in schema -> model -> fields fully supported or just some kind of workaround respectively a deprecated approach? Because we can't find any detailed documentation about this feature.

Are there any limitations with any of the crud operations? Will kendo send a nested object during the update process?

Thanks in advance!

Grid

answered on 26 Jun 2017

2 answers

865 views

Server filtering with a custom querystring

What should I be looking at in the docs for Server filtering with custom querystring values?

When I set serverfiltering to true I get a long custom kendo querystring. I really just need to shoot up a couple of my own params.

Data Source

answered on 23 Jun 2017

2 answers

106 views

DropDown returning all records instead of selected

I have a dropdown list that populates from a users table, this populates correctly and then using the DropdownListFor I wish to bind it to the corresponding field in my model (using MVC). It returns all of the records inside the DropDownList and causes a Json error. Any ideas?

cshtml:

@Html.LabelFor(model => model.AccountAdminUserID, htmlAttributes: new { @class = "control-label" })
@(Html.Kendo().DropDownListFor(model => model.AccountAdminUserID)
.Name("AccManagersDropDownList")
.DataTextField("FullName")
.DataValueField("AdminUserID")
.HtmlAttributes(new { style = "width: 100%" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAccManagers", "AccountManager");
})
.ServerFiltering(true);
})
.SelectedIndex(0)
)

DropDownList

answered on 23 Jun 2017

1 answer

282 views

How to use combobox wiget with Json string of big data?

Telerik:
One question always puzzles me. When I user Combobox wiget in the Spring Boot Project,the comBobox scroll bar is not visible.
My project file is:
1.html file:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8" />

<link rel="stylesheet" th:href="@{/styles/kendo.common.min.css}" />
<link rel="stylesheet" th:href="@{/styles/kendo.rtl.min.css}" />
<link rel="stylesheet" th:href="@{/styles/kendo.default.min.css}" />
<link rel="stylesheet" th:href="@{/styles/kendo.default.mobile.min.css}" />
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jszip.min.js}"></script>
<script th:src="@{/js/kendo.all.min.js}"></script>
<title>Insert title here</title>
</head>
<body>
<p th:text="'Hello！, ' + ${name} + '!'" >3333</p>
<option th:value="Adult">Adult1</option>

<div id="example"> <input id="orders" style="width: 100%" />
<div class="demo-section k-content">

<h4>Show e-mails from1:</h4>
<input id="datepicker" value="10/10/2011" title="datepicker" style="width: 100%" />

<h4 style="margin-top: 2em;">Add to archive mail from:</h4>
<input id="monthpicker" value="November 2011" title="monthpicker" style="width: 100%" />
</div>
<script>
$(document).ready(function() {
// create DatePicker from input HTML element
$("#datepicker").kendoDatePicker();

$("#monthpicker").kendoDatePicker({
// defines the start view
start: "year",

// defines when the calendar should return date
depth: "year",

// display month and year in the input
format: "MMMM yyyy",

// specifies that DateInput is used for masking the input element
dateInput: true
});

$("#orders").kendoComboBox({
template: '<span class="order-id">#= orderId #</span>',
dataTextField: "shipName",
dataValueField: "orderId",
virtual: {
itemHeight: 26,
valueMapper: function(options) {
$.ajax({
url: "/valuemapper",
type: "GET",
dataType: "json",
data: convertValues(options.value),
success: function (data) {
options.success(data);
}
})
}
},
height: 290,
dataSource: {
type: "json",
transport: {
read: "/List1"
},
schema: {
model: {
fields: {
orderId: { type: "number" },
freight: { type: "number" },
shipName: { type: "string" },

shipCity: { type: "string" }
}
}
},
pageSize: 80,
serverPaging: true,
serverFiltering: true
}
});

function convertValues(value) {
var data = {};
alert(value);
value = $.isArray(value) ? value : [value];
alert(value);
}
});

</script>
</div>
</body>
</html>
2. server side file:
package com.example.demo2;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import com.example.demo2.models.DataSourceRequest;
import com.example.demo2.models.DataSourceResult;
import com.example.demo2.models.Order;
@Controller
@EnableAutoConfiguration
public class SampleController {
@RequestMapping("/hello")
public ModelAndView getListaUtentiView(){
ModelMap model = new ModelMap();
model.addAttribute("name", "Spring Boot");
return new ModelAndView("hello3", model);
}
@RequestMapping(value = "/welcome", method = RequestMethod.GET)
public String registPost(Model model) {
model.addAttribute("name", "Dear");
// return "hello";
return "welcome";
}
@RequestMapping(value = "/valuemapper", method = RequestMethod.GET)
public @ResponseBody ArrayList<Integer> ValueMapper(int[] values)
{
ArrayList<Integer> indices = new ArrayList<Integer>();
ArrayList<Order> lsOrder = GetOrderList();
if (values != null && values.length>0)
{
int index = 0;
for (Order order:lsOrder)
{
int posistion = Arrays.binarySearch(values, order.getOrderId());
if (posistion>0)
{
indices.add((Integer)index);
}

index += 1;
}
}

return indices;
}

public ArrayList<Order> GetOrderList()
{ ArrayList<Order> lsOrder = new ArrayList<Order>();
for(int i=0;i<80;i++)
{
Order order = new Order();

order.setCustomerId("customerId"+i);
order.setEmployeeId(i);
order.setFreight(i);
order.setOrderDate(new Date());
order.setOrderId(i);
order.setShipAddress("shipAddress"+i);
order.setShipCity("shipCity"+i);
order.setShipCountry("shipCountry"+i);
order.setShipName("shipName"+i);
order.setShippedDate(new Date());
lsOrder.add(order);
}
return lsOrder;

}

@RequestMapping(value = "/OrderList", method = RequestMethod.GET)
public @ResponseBody DataSourceResult OrderList(DataSourceRequest request)
{
DataSourceResult result = new DataSourceResult();
result.setData( GetOrderList());
result.setTotal(1000);
return result;
}
@RequestMapping(value = "/List", method = RequestMethod.GET)
public @ResponseBody DataSourceResult OrderList1(HttpServletRequest request)
{
DataSourceResult result = new DataSourceResult();
result.setData( GetOrderList());
result.setTotal(1000);
return result;
}
@RequestMapping(value = "/List1", method = RequestMethod.GET)
public @ResponseBody ArrayList<Order> OrderList2(HttpServletRequest request)
{

return GetOrderList();
}
}
3. My question is:
(1) How to use json to get the datasource data?
(2) when I use json such as "/List1" ,DataSourceRequest object is not recognized.
(3) when I use "/List1" to get data,the scroll bar is not visible.

ComboBox

answered on 23 Jun 2017

3 answers

227 views

drawDOM with cloned chart fails

Hi! I'm trying to make a PDF report via drawDOM, this report will need to have a grid and a chart that is being displayed in the site, but also a header that I need to add, that wont be displayed in the site.

Since drawDOM requires for the elements to be visible in the DOM, I clone the grid and the chart into a container, add my header, then export it whole. Grid works fine but the chart fails and I'm not sure why.

Here is an example with this issue: http://dojo.telerik.com/OvOrE

Drawing API

answered on 23 Jun 2017

3 answers

172 views

When using grouping, is searching by group possible?

Using this kendo example: https://demos.telerik.com/kendo-ui/combobox/grouping

I want the combo box to search by the customer names or country. In my use case, the user might remember what country the customer is from and needs to filter by that.

Is this possible?

ComboBox

answered on 23 Jun 2017

3 answers

394 views

Pie Chart - Shadow

Can I get a pie Chart with shadow like this attached image?

If yes, how?

Charts

answered on 23 Jun 2017

3 answers

413 views

Cache issues with IE update

In my grid options, I am using the dataSource.read() function for my dataSource.sync(). The read function calls an API GET method. This has been running with no issues for about a year. There was an update to IE that seems to be using HTTP/2 that is causing my grid to not refresh with new data any more. When I look in the developer tools for IE, I can see the GET call being made with the HTTP/2 protocol, but the return says it is received "(from cache)" with a time of 0 s. When I look at the Request Headers, the Cache-Control is already set to "no-cache".

This call is not working like this in Edge, Chrome, or FF. However, I am seeing this issue on every page that uses the Kendo UI grid when I am in IE.

Do you have any suggestions for fixing this issue? Thanks!

Grid

answered on 23 Jun 2017

5 answers

1.0K+ views

How to Add Separator in Kendo Menu Using the DataSource

I just upgraded to the latest Kendo Pro: 2017.2.504. This broke our code in several places. The most significant is that setting the cssClass to 'k-separator' no longer creates a line in the menu to separate menu groups. We used to be able to add a separator like this, but it no longer works:

<p>let menuItem = {</p><p> text: '',</p><p> cssClass: 'k-separator',</p><p> enabled: false</p><p>}</p

Menu

answered on 23 Jun 2017