This is a migrated thread and some comments may be shown as answers.

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

1 Answer 251 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Shengpan Song asked on 22 Jun 2017, 05:41 AM

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.

1 Answer, 1 is accepted

answered on 23 Jun 2017, 01:34 PM

Hi Shengpan,

As far as I can understand, you are trying to return from the server only a JSON array containing the list of items to be populated in the ComboBox and avoid using the DataSourceResult object. If this is the case, I am afraid that the required could not be achieved, as the widget needs the additional data available in the DataSourceResult object in order to properly display the drop-down and the position of the returned items.

To properly pass these parameters from the DataSourceRequest object to the DataSourceResult I would suggest you to use toDtaSourceResult() method of the request which will return a result object. The specific implementation used in our Demo project (could be found in your local Telerik UI for JSP installation folder) is the following:

public DataSourceResult toDataSourceResult(Session session, Class<?> clazz) {

Criteria criteria = session.createCriteria(clazz);

filter(criteria, getFilter(), clazz);

long total = total(criteria);

sort(criteria, sortDescriptors());

page(criteria, getTake(), getSkip());

DataSourceResult result = new DataSourceResult();

result.setTotal(total);

List<GroupDescriptor> groups = getGroup();

if (groups != null && !groups.isEmpty()) {

result.setData(group(criteria, session, clazz));

} else {

result.setData(criteria.list());

}

List<AggregateDescriptor> aggregates = getAggregate();

if (aggregates != null && !aggregates.isEmpty()) {

result.setAggregates(aggregate(aggregates, getFilter(), session, clazz));

}

return result;

}

Regards,
Veselin Tsvetanov
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.