I have dropdown list from sorting grid. I want to manage same grid with pie chart, but I can't bound remote data to the piechart. The piechart must to show categories (the same role, like a dropdown list), but I can't bound to hierarchical remote data.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="project">
<div id="grid"></div>
<div id="chart"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
<script>
$(document).ready(function() {
//Grid displays all products or products from one category, which set from dropdown list
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
toolbar: kendo.template($("#template").html()),
height: 550,
sortable: true,
pageable: true,
dataBound:function(){
var grid = this;
$.each(grid.tbody.find('tr'),function(){
var model = grid.dataItem(this);
if(model.Discontinued==true){
$('[data-uid='+model.uid+']').addClass('k-state-selected');
}
});
},
columns: [
// { field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name", template: '#=kendo.format(ProductName.toUpperCase())#' },
{ field: "UnitPrice", title: "Price", width: 150, template: 'EUR #: kendo.format("{0:c}", UnitPrice)#' },
{ field: "UnitsInStock", title: "In Stock", width: 150 },
{ field: "Discontinued", title: "Discontinued", width:50 },
{ field: "QuantityPerUnit", title: "Quantity" }
]
});
//DropDown list for sorting by the category
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "CategoryName",
dataValueField: "CategoryID",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "odata",
severFiltering: true,
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
},
change: function() {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CategoryID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
var data = [
{
"source": "Hydro",
"percentage": 20,
},
{
"source": "Hydro",
"percentage": 20
},
{
"source": "Solar",
"percentage": 10
},
{
"source": "Nuclear",
"percentage": 30
}
];
var dataSource = new kendo.data.DataSource({
data: data,
group: {field: "source", aggregates: [{
field: "percentage", aggregate: "sum"
}]}
});
dataSource.read();
function getChartData() {
var chartData = [];
var view = dataSource.view();
for(var idx = 0; idx < view.length; idx++) {
chartData.push({
source: view[idx].value,
percentage: view[idx].aggregates.percentage.sum
});
}
return chartData;
}
//From This piechart I want to sorting grid
var chart = $("#chart").kendoChart({
title: {
text: "Categories and Products"
},
legend: {
position: "bottom"
},
dataSource: {
transport: {
read: function(e) {
e.success(getChartData());
}
}
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode",
aggregate: "count",
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
}],
seriesClick: function(e){
$.each(e.sender.dataSource.view(), function() {
// Clean up exploded state
this.explode = false;
});
// Disable animations
e.sender.options.transitions = false;
// Explode the current slice
e.dataItem.explode = true;
e.sender.refresh();
}
});
});
</script>
<style>
#grid .k-grid-toolbar
{
padding: .6em 1.3em;
}
.category-label
{
vertical-align: middle;
padding-right: .5em;
}
#category
{
vertical-align: middle;
}
.toolbar {
float: center;
}
</style>
</div>
You can bind a kendo pie chart with remote data, I have done this many times in the past. Take a look at the following link for an example on how to achieve this.
Kendo pie chart - remote binding
Related
I wonder why I cant display my result query using the kendoChart. when i tried this
series: [{
type: "pie",
data: [{
category: "Available",
value: 24
}]
}],
It works!
but when i tried to put the result of my query (please see the picture below)
series: [{
type: "pie",
data: [{
category: status,
value: counts
}]
}],
no record display
my current code:
<script>
const createChart = async () =>{
const { status, counts } = await getConditions();
console.log(status, counts)
$("#chart1").kendoChart({
title: {
text: "All Books"
},
legend: {
position: "top"
},
seriesDefaults: {
labels: {
template: "#= category # - #= kendo.format('{0:P}', percentage)#",
position: "outsideEnd",
visible: true,
background: "transparent"
}
},
series: [{
type: "pie",
data: [{
category: status,
value: counts
}]
}],
tooltip: {
visible: true,
template: "#= category # - #= kendo.format('{0:P}', percentage) #"
}
});
}
$(document).ready(()=>{
createChart();
});
</script>
the results data from the console.log(status, counts)
As status and counts are arrays, you'll need to convert it to an array of objects (with category and value fields) Kendo can understand. See example below and try it in the Telerik DOJO.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/pie-charts/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.301/styles/kendo.default-main.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.301/js/kendo.all.min.js"></script>
</head>
<body>
<div id="chart1">
</div>
<script>
const createChart = async () =>{
//const { status, counts } = await getConditions();
//console.log(status, counts)
// better ensure that status and counts are of the same length!
let status = ["Not Available",
"Not Available",
"Not Available",
"Not Available",
"Available",
"Available",
"Available"];
let counts = [7,
7,
7,
7,
7,
7,
7];
let data = [];
for (let a = 0; a < status.length; a++) {
data.push({
category: status[a],
value: counts[a]
});
}
$("#chart1").kendoChart({
title: {
text: "All Books"
},
legend: {
position: "top"
},
seriesDefaults: {
labels: {
template: "#= category # - #= kendo.format('{0:P}', percentage)#",
position: "outsideEnd",
visible: true,
background: "transparent"
}
},
series: [{
type: "pie",
data: data,
}],
tooltip: {
visible: true,
template: "#= category # - #= kendo.format('{0:P}', percentage) #"
}
});
}
$(document).ready(()=>{
createChart();
});
</script>
</div>
</body>
</html>
I am using Kendo UI, specifically the kendo grid and the kendo dataSource.
I'm getting data from a local API. The data is retrieving correctly (checked in postman). I save (or tried to save) the result of this get result in a kendo dataSource.
Then I pass this dataSource as a parameter when creating the grid. Unfortunately, the grid doesn't show any result...
Here is the code:
<script>
var inputLe = localStorage.getItem("storageLe");
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost:3000/api/reg",
dataType: "jsonp",
type: "GET",
}
},
schema:{
//data: "data",
model:{
// id: "id",
fields:{
id: { type: "number" },
Number: { type: "string" },
Date: { type: "date" },
Amout: { type: "number" },
Net: { type: "number" },
Category: { type: "string" },
Commen: { type: "string" },
Entity: { type: "string" },
Quart: { type: "string" },
Confirmed: { type: "boolean" },
Stat: { type: "boolean" }
}
}
},
//serverFiltering : true,
//filter : [
// {field: "Legal_Entity", operator: "eq", value: "3800" },
//]
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}
]
});
});
window.localStorage.removeItem("storageLe");
//edit to fetch in the comment drodown the categories
function clinetCategoryEditor(container, options) {
$('<input required name="Commen">')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
data: categories
}
});
}
//function that set the boolean status of Stat and show matched or unmatched with colors
function onDataBound(e){
var grid = this;
grid.table.find("tr").each(function(){
var dataItem = grid.dataItem(this);
var themeColor = dataItem.Stat ? 'success' : 'error';
var text = dataItem.Stat ? 'Matched' : 'Unmatched';
$(this).find(".badgeTemplate").kendoBadge({
themeColor: themeColor,
text: text,
});
});
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<link rel="stylesheet" href="styles/kendo.common.min.css">
<link rel="stylesheet" href="styles/kendo.default.min.css">
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css">
<link rel="stylesheet" href="styles/kendo.rtl.min.css">
<link rel="stylesheet" href="styles/kendo.silver.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/pako_deflate.min.js"></script>
<script src="js/jszip.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilo.css">
<link rel="stylesheet" href="css/daterangepicker.css">
</head>
<body>
<div>
<p>
<h1>Some</h1>
</p>
</div>
<div id="container">
<div id="grid"></div>
</div>
here is a sample json return from the API:
{
"id": 512,
"Number": "00000",
"Date": "2000-05-01T03:00:00.000Z",
"Amout": -999.99,
"Net": 0,
"Category": "00",
"Commen": "Some comment",
"Entity": "1234",
"Quart": "2",
"Confirmed": 1,
"Stat": 1
}
Thanks in advance.
Edit1: Put all the functions on the code snippet.
Edit2: print screen of the console and network tabs.
Edit3: new print screen usins json instead of jsonp (CORS error)
Here's an example of a grid populated with data based on your example. As per my comment "did you try data:[...]", you replied there is no data. In this example, the grid shows the data. This means the problem isn't it your grid. It must be in transport. Is your localhost api returning an array? As your example code is unclear and not a minimum reproducible working example I hope the example below will help you pinpoint your problem. Try it in the Telerik DOJO or anywhere you like.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function () {
var gridDataSource = new kendo.data.DataSource({
data: [{ "id": 512, "Number": "00000", "Date": "2000-05-01T03:00:00.000Z", "Amout": -999.99, "Net": 0, "Category": "00", "Commen": "Some comment", "Entity": "1234", "Quart": "2", "Confirmed": 1, "Stat": 1 } ],
});
$("#grid").kendoGrid({
dataSource: gridDataSource,
height: 700,
editable: "incell",
groupable: true,
sortable: true,
toolbar: ["excel", "pdf", "search",{name:'new', text:'Create Comment', iconClass:"k-icon k-i-plus"}],
//dataBound: onDataBound,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "Number",
title: "Number"
}, {
field: "Date",
title: "Date",
format: "{0:dd/MM/yyyy}"
}, {
field: "Amout",
title: "Amount"
}, {
field: "Net",
title: "Net"
}, {
field: "Category",
title: "Category"
}, {
field: "Commen",
title: "Comment",
width: 300
}, {
field: "Entity",
title: "Entity"
}, {
field: "Quart",
title: "Quarter"
}, {
field: "Confirmed",
title: "Confirmed",
}, {
field: "Stat",
title: "Status",
}]
});
});
</script>
<style>
</style>
</div>
</body>
</html>
The #jpllosa answer help me to find where the issue is. Just adding this answer to explain better how I fix this.
I'm using a node express backend to communicate with my MySQL database, and here I have to allow cors use (if you not familiar with cors, I recommend this link: https://www.section.io/engineering-education/how-to-use-cors-in-nodejs-with-express/)
So my main problem is I'm waiting for a "JSONP" when my data is a "JSON". With the "JSON" type i was receiving the CORS error message as you can see in my last image from the original post.
To allow cors I used the following code in my server.js file:
const cors = require('cors');
app.use(cors({
origin: '*'
}));
In the mentioned link you can see how to add specific domain to your API or use all domains with the "*" character.
Again, thanks to #jpllosa for his answer and time helping me here.
I am using kendo grid with MVC in a .NET project. Two columns of my grid are templates and those have an input text inside of the template. That way every time the grid loads the input texts are always visible and available for change.
When the user clicks on save, I need to check all the rows of the grid, at client side and get the values of those two columns (the only two have templates) and get the values of the input box. So the result I am expecting is a list with two columns that have the last values inserted by the user in the input boxes and not the original value.
Here is my code:
//Grid Data source
var dataSource = new kendo.data.DataSource({
transport: {
read: { url: "/CsmForecastRegistration/GetForecast", cache: false }
},
error: function (e) {
openDialog(e.errorThrown);
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "ForecastItemId",
fields: {
ForecastItemId: { editable: false },
RecordId: { editable: false },
SaleId: { editable: false },
IsUpSell: { editable: false },
BusinessName: { editable: false },
HealthScore: { editable: false },
CurrencySymbol: { editable: false },
ForecastWeekTotalContractValue: { editable: true },
ForecastWeekMonths: { editable: true },
ForecastWeek12Months: { editable: false }
}
}
}
});
$("#grdCsmForecast").kendoGrid({
dataSource: dataSource,
scrollable: true,
dataBound: onDataBound,
toolbar: ["excel"],
excel: {
allPages: true,
fileName: "CSMForecast.xlsx"
},
pageable: true,
columns: [
{ title: "", width: "80px", template: $("#comments-template").html(), attributes: { style: "text-align:center; background-color: white;" } },
{
title: "Contract Details",
columns: [
{ field: "RecordId", title: "RecordId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "SaleId", title: "SaleId", width: "90px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "IsUpSell", title: "Upsell?", width: "75px", attributes: { "class": "contractDetailGridStyle" } },
{ field: "BusinessName", title: "Business Name", width: "250px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "HealthScore", title: "Health Score", width: "95px", attributes: { "class": "contractDetailGridStyle"} },
{ field: "CurrencySymbol", title: "CCY", width: "50px", attributes: { "class": "contractDetailGridStyle" } }
]
},
{
title: "Forecast Week",
columns: [
{ field: "ForecastWeekTotalContractValue", title: "TCV", width: "75px", template: $("#forecast-week-tcv").html(), attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " },
{ field: "ForecastWeekMonths", title: "Months", width: "70px", template: $("#forecast-weekMonths").html(), attributes: { "class": "forecastWeekGridStyle" } },
{ field: "ForecastWeek12Months", title: "12Month", width: "75px", attributes: { "class": "forecastWeekGridStyle" }, footerTemplate: "#: sum # " }
]
}
]
});
And the templates:
<script id="forecast-week-tcv" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekTotalContractValue#</span>
#}
else{#
<input type="text" value="#=ForecastWeekTotalContractValue#" />
#}#
</script>
<script id="forecast-weekMonths" type="text/x-kendo-template">
# if(IsNewContract === true ){ #
<span>#=ForecastWeekMonths#</span>
#}
else{#
<input type="text" value="#=ForecastWeekMonths#" />
#}#
</script>
So I would like to have a list and send to my MVC the controller all the values of these two inputs:
<input type="text" value="#=ForecastWeekTotalContractValue#" />
<input type="text" value="#=ForecastWeekMonths#" />
Thanks
Try something like this:
function getInputValues() {
let result = [];
$('#grid tbody tr').each((i, tr) => {
let row = {};
$(tr).find('input[type="text"]').each((index, input) => {
row[(index ? "ForecastWeekTotalContractValue" : "ForecastWeekMonths")] = $(input).val();
});
result.push(row);
});
return result;
}
Demo
It just iterates over the elements and adds to an array of objects.
im trying to get the Text value of the metric_nme column and if this was equal to 'Accounts Audit' hiding the Update button...
does anyone knows how can i get the value of the column in kendo grid?
here if me code...
$("#assessmentGrid").kendoGrid({
dataSource: gridDS,
navigatable: true,
noRecords: {
template: "No assessments were found"
},
filterable: true,
sortable: {
mode: 'single',
allowUnsort: false
},
columns: [
{ field: 'assessment_pk', hidden: true },
{ field: 'role_fk', hidden: true },
{ field: 'role_nme', title: 'Role', width: 120 },
{ field: 'metric_fk', hidden: true },
{ field: 'assess_dte', hidden: true },
{
field: 'metric_nme', title: 'Metric', width: 150,
validation: {
metric_nme_validation: function (input) {
if (dataItem[metric_nme] = 'Accounts Audit') {
// attributes: { 'class': 'k-grid-update' }.
$("#k-grid-update").data("kendoGrid").visible = false;
}
}
}
},
{ field: 'assess_val', title: 'Score', width: 80, template: "#= (returnUnitMetricID(metric_fk) == 2) ? parseInteger(assess_val, 10) : assess_val #", attributes: { 'style': 'text-align: right' } },
{ field: 'adjust_val', title: 'Manager Score', width: 100, template: "#= (returnUnitMetricID(metric_fk) == 2) ? parseInteger(adjust_val, 10) : adjust_val #", attributes: { 'style': 'text-align: right' } },
{ field: 'adjust_by', title: 'Adjusted By', width: 120 },
{ field: 'comment_txt', title: 'Comment', hidden: true },
{ field: 'rating_cde', title: 'Rating', width: 95 },
{ field: 'adjusted_fk', hidden: true },
{ field: 'pct_to_goal', title: '% to Goal', width: 100, template: '#=kendo.format("{0:p}", pct_to_goal / 100)#', attributes: { 'style': 'text-align: right' } },
{ field: 'lastupdate_by', title: 'Last Update By', width: 100 },
{ field: 'lastupdate_on', title: 'Last Update On', width: 130, template: "#= (lastupdate_on == null) ? '' : kendo.toString(kendo.parseDate(lastupdate_on, 'yyyy-MM-dd'), 'MM/dd/yyyy H:mm:ss') #" },
{
command: {
text: "Update",
click: updateScore,
}, title: " ", width: "60",
attributes: { 'class': 'k-grid-update' }
}
],
}).find("table").on("keydown", onGridKeydown);
function updateScore(e) {
e.preventDefault(e);
clearWindowPopUpFields();
$(".k-window").css('height', '420px');
$(".alert").hide();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var assestmentDate = new Date(dataItem.assess_dte);
$("#lbAssessmentDateRO").text($("#txtPeriod").val());
$('#lblMetric').text(dataItem.metric_nme);
$('#lblRole').text(dataItem.role_nme);
metricFk = dataItem.metric_fk;
$('#txtAssociate').text($('#cbAssociate').data("kendoComboBox").text());
switchScoreTypeControl(returnUnitMetricID(dataItem.metric_fk));
if (dataItem.assessment_pk == null) {
addScorePopUp(dataItem);
} else {
updateScorePopUp(dataItem);
}
}
You can use visible parameter:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.command.visible
Here is an example:
http://dojo.telerik.com/ACopA
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/custom-command">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<div id="details"></div>
<script>
var wnd,
detailsTemplate;
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [{
field: "FirstName",
title: "First Name",
width: "140px"
},
{
field: "LastName",
title: "Last Name",
width: "140px"
},
{
field: "Title"
},
{
command: [{
text: "View Details",
click: showDetails,
visible: function(dataItem) {
return dataItem.LastName.charAt(0) !== "D"
}
}]
}
]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>
<style type="text/css">
#details-container {
padding: 10px;
}
#details-container h2 {
margin: 0;
}
#details-container em {
color: #8c8c8c;
}
#details-container dt {
margin: 0;
display: inline;
}
</style>
</div>
</body>
</html>
I want to filter the table by last name, but cant work, here is my code
in controller
public JsonResult Filtering()
{
HealthContext rc = new HealthContext();
var last = rc.Profiles.Select(lastt => new SelectListItem { Text = lastt.LastName, Value = lastt.Id.ToString() }).ToList();
return Json(last.ToList(), JsonRequestBehavior.AllowGet);
}
in view
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="Last name"> by last name:</label>
<input type="search" id="LastName" style="width: 230px"></input>
</div>
</script>
and also
the following snippet is for display table and filtering the last name
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/Profiles/GetJsonData",
dataType: "json"
}
},
pageSize: 10,
},
toolbar: kendo.template($("#template").html()),
height: 250,
filterable: true,
sortable: true,
pageable: true,
defaultSorting: 'LastName ASC',
columns: [{
field: "Id",
filterable: false
},
{
field: "FirstName",
title: "First Name",
width: 100,
}, {
field: "LastName",
title: "Last Name",
width: 200
}, {
field: "Gender",
title: "Gender"
}
]
});
var dropDown = grid.find("#LastName").kendoDropDownList({
dataTextField: "LastName",
dataValueField: "Id",
autoBind: false,
optionLabel: "All",
dataSource: {
severFiltering: true,
transport: {
read: {
url: "/Profiles/Filtering",
dataType: "json"
}
},
},
change: function() {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "Id", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
});
</script>
so the problem is the drop down list is not show up as well as the value/ data, any idea guys?
In your code you did not share what is behind the grid variable? Also you can find the LastName html element directly by id.
i.e.
var dropDown = $("#LastName").kendoDropDownList({ ...
Rest of your code looks okey, here it is:
http://jsfiddle.net/knWcJ/70/