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 133 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Shengpan Song
Top achievements
Rank 1
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>-->
 <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

Sort by
0
Veselin Tsvetanov
Telerik team
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.
Tags
ComboBox
Asked by
Shengpan Song
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or