Questions on Kendo UI for jQuery Forum

2 answers

132 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

313 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

264 views

[Solved] 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

195 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

425 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

459 views

[Solved] 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.1K+ 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

1 answer

134 views

Issue in using Kendo Spreadsheet

Facing error in using kendo spreadsheet. I included demo code given in kendo spread sheet portal.

Able to use other kendo controls in the application.

Spreadsheet

answered on 23 Jun 2017

1 answer

159 views

What is the equivalent alternative method for kendoChart _toModelCoordinates(x,y)

kendoChart _toModelCoordinates(x,y) method is missing in the kendo ui v2017.2.504.

We have used this method in the older kendo version v2015.3.1111

_toModelCoordinates:function(t,n){var i=this.element,r=i.offset(),o=parseInt(i.css("paddingLeft"),10),a=parseInt(i.css("paddingTop"),10),s=e(window);return new Xt(t-r.left-o+s.scrollLeft(),n-r.top-a+s.scrollTop())}

Please let us know what is the equivalent alternative method for it in the latest kendo-ui version v2017.2.504 as soon as possible

Thanks,

Mahesh

Charts

answered on 23 Jun 2017

5 answers

2.0K+ views

Adding a class to the selected menu item

Hi,

I have created a kendo menu. The code for it is something like this:

html:
<div id = "menu"></div>

js:

var menu = $("#menu").kendoMenu({
            dataSource: [{
                text: "tab1",
                url: 'javascript:showTab1()'
            }, {
                text: "tab2",
                url: 'javascript:showTab2()'
            }
            ]
        });
Now, whenever a menu item is selected, i want to show it as selected. Need to add a class to the selected menu item. How can i do that?

Regards,
Khushali

Menu

answered on 23 Jun 2017