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

2 posts, 0 answers
  1. Shengpan Song
    Shengpan Song avatar
    11 posts
    Member since:
    Jan 2010

    Posted 22 Jun Link to this post

    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.

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    556 posts

    Posted 23 Jun Link to this post

    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.
Back to Top