In one of my application, have seen browser gets hanging and crashing because of binding 500 000 records in the Kendo Ui-grid.
The grid contains total 20 columns and all the data return from webapi via angular in kendo grid.
it's working fine for 3 columns, when changed to 15 columns it gets a problem for above 100k records.
So I need to test how much columns and records can be hold on kendo grid. I have found there is some options available in kendo called as virtualisation to load the bulk records.
Demo Site is: http://dojo.telerik.com/#sahir/OSeRo
So in the people js have the data, I have tried to add two more columns inside that file I am getting object object in the column.
The problem occurs above 100k record binding without pagination in kendo grid. I have attached a demo project screenshot below for testing the grid.
The code is below:
<!DOCTYPE html>
<html>
<head>
<base href="">
<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.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<script src="people.js" ></script>
</head>
<body>
<!--<script src="../content/shared/js/people.js"></script>-->
<div id="example">
<div id="message" class="box wide"></div>
<div id="grid"></div>
<script>
$(function() {
var count = 500000;
if (kendo.support.browser.msie) {
if (kendo.support.browser.version < 10) {
count = 100000;
} else {
count = 200000;
}
}
$("#message").text(kendo.format("Generating {0} items", count));
generatePeople(count, function(data) {
var initStart;
var renderStart;
$("#message").text("");
setTimeout(function() {
initStart = new Date();
$("#grid").kendoGrid({
dataSource: {
data: data,
pageSize: 20
},
height: 543,
scrollable: {
virtual: true
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "Showing {2} data items"
}
},
columns: [
{ field: "Id", title: "ID", width: "110px" },
{ field: "FirstName", title: "First Name", width: "130px" },
{ field: "LastName", title: "Last Name", width: "130px" },
{ field: "City", title: "City", width: "130px" },
{ field: "CashId", title: "Cash ID", width: "130px" },
{ field: "Title" },
{ field: "productName"},
]
});
initEnd = new Date();
$("#message").text(kendo.format("Kendo UI Grid bound to {0} items in {1} milliseconds", count, initEnd - initStart));
});
});
});
</script>
</div>
</body>
</html>
custom people.js
var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
productNames =["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"]
birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")],
cashId= ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
"Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"];
function createRandomData(count) {
var data = [],
now = new Date();
for (var i = 0; i < count; i++) {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
CashId = cashId[Math.floor(Math.random() * cashId.length)],
age = now.getFullYear() - birthDate.getFullYear(),
productName = productNames[Math.floor(Math.random() * productNames.length)];
data.push({
Id: i + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
CashId:cashId,
Age: age,
productName:productNames
});
}
console.log(data);
return data;
}
function generatePeople(itemCount, callback) {
var data = [],
delay = 25,
interval = 500,
starttime;
var now = new Date();
setTimeout(function() {
starttime = +new Date();
do {
var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
city = cities[Math.floor(Math.random() * cities.length)],
title = titles[Math.floor(Math.random() * titles.length)],
birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
CashId= cashId[Math.floor(Math.random() * cashId.length)],
age = now.getFullYear() - birthDate.getFullYear(),
productName = productNames[Math.floor(Math.random() * productNames.length)];
data.push({
Id: data.length + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
CashId:cashId,
Age: age,
productName:productNames
});
} while(data.length < itemCount && +new Date() - starttime < interval);
if (data.length < itemCount) {
setTimeout(arguments.callee, delay);
} else {
callback(data);
}
}, delay);
}
Update people.js on line 68 (cashId to CashId) and 70 (productNames to productName)
data.push({
Id: data.length + 1,
FirstName: firstName,
LastName: lastName,
City: city,
Title: title,
BirthDate: birthDate,
CashId:CashId,
Age: age,
productName:productName
});
Related
I would like to display the property of age and if a person is vaccinated under each name after each button's click, but these properties appear under the page. How can I do it?
Furthermore, which concepts of the dom should I explore in order to build logics where there is a correlation and interaction between dom and objects? (e.g. select an item via the dom and view its details).
<body>
<div class="container">
<div class="list-container"></div>
</div>
<script src="script.js"></script>
</body>
const persons = [
{ name: "carl", age: 20, vaccinated: true, id: 1 },
{ name: "alex", age: 45, vaccinated: false, id: 2 },
{ name: "alice", age: 12, vaccinated: true, id: 3 },
{ name: "erick", age: 2, vaccinated: true, id: 4 },
{ name: "fred", age: 23, vaccinated: false, id: 5 },
{ name: "wandy", age: 13, vaccinated: true, id: 6 },
];
const generalContainer = document.querySelector(".container");
const listContainer = document.querySelector(".list-container");
function renderItems(obj) {
let dataId;
let item;
let sub;
obj.forEach((element) => {
item = document.createElement("div");
let itemAttr = document.createAttribute("data-id");
itemAttr.value = element.id;
item.setAttributeNode(itemAttr);
dataId = item.dataset.id;
item.innerHTML = `<p>NAME: ${element.name}</p>
<button class="btn">${element.name}</button>
<div class='sub'></div>
`;
sub = document.querySelector(".sub");
listContainer.appendChild(item);
});
let btn = document.querySelectorAll(".btn");
let selected;
let subItem = document.createElement("div");
btn.forEach((el) => {
el.addEventListener("click", (e) => {
e.preventDefault();
let textValue = el.textContent;
selected = obj.find((ele) => {
return ele.name === textValue;
});
//subItem = document.createElement("div");
subItem.innerHTML = `
<div><p>AGE: ${selected.age}</p>
<p>VACCINE STATUS: ${
selected.vaccinated ? "Vaccinated" : "Not vaccinated"
}</div>`;
console.log(sub);
sub.appendChild(subItem);
item.append(sub);
});
});
}
renderItems(persons);
Try a more simplified version. Among other things, it uses event delegation for event listeners:
const persons = [{
name: "carl",
age: 20,
vaccinated: true,
id: 1
},
{
name: "alex",
age: 45,
vaccinated: false,
id: 2
},
{
name: "alice",
age: 12,
vaccinated: true,
id: 3
},
{
name: "erick",
age: 2,
vaccinated: true,
id: 4
},
{
name: "fred",
age: 23,
vaccinated: false,
id: 5
},
{
name: "wandy",
age: 13,
vaccinated: true,
id: 6
}
];
let listContainer = document.querySelector(".list-container");
function renderItems(obj) {
obj.forEach((element) => {
new_elem = `
<div data-id="${element.id}">
<p>NAME: ${element.name}</p>
<button but-id="${element.id}">${element.name}</button>
<div class='sub'></div>
</div>
`;
listContainer.insertAdjacentHTML("afterbegin", new_elem);
});
listContainer.addEventListener("click", (e) => {
person = e.target.getAttribute("but-id");
p_name = e.target.innerText;
dest = document.querySelector(`div[data-id="${person}"] div.sub`);
let selected = persons.find(({name}) => name === p_name);
subItem = `
<div>
<p>AGE: ${selected.age}</p>
<p>VACCINE STATUS: ${
selected.vaccinated ? "Vaccinated" : "Not vaccinated"
}</p>
</div>
`;
dest.innerHTML = subItem;
});
}
renderItems(persons);
<body>
<div class="container">
<div class="list-container"></div>
</div>
</body>
When I run my application, both combo boxes show. How to show one and hide the other one when clicking radio buttons?
I stored the state and region in a static json file and use xhrGet to get them.
i want to use dojo combo box for auto-complete.
var cboState;
var cboRegion;
dojo.xhrGet({
url: "../client/stemapp/widgets/samplewidgets/myProject/common.json",
handleAs: "json",
load: function (result) {
require([
"dojo/store/Memory",
"dijit/form/ComboBox",
"dojo/domReady!"
], function (Memory, ComboBox) {
var stateStore = new Memory({
data: result.states
});
var regionStore = new Memory({
data: result.regions
});
cboState = new ComboBox({
id: "state",
name: "state",
placeholder: "Select a State",
store: stateStore,
searchAttr: "name",
autocomplete: true
}, "state");
cboRegion = new ComboBox({
id: "region",
name: "region",
placeholder: "Select a Region",
store: regionStore,
searchAttr: "name",
autocomplete: true
}, "region");
});
}
});
domStyle.set(dom.byId('state'), "display", "block");
domStyle.set(dom.byId('region'), "display", "none");
On(query('.radio'),'change',function(){
query('.query').forEach(function(divElement){
domStyle.set(divElement, "display", "none");
});
domStyle.set(dom.byId(this.dataset.target), "display", "block");
});
<input class="radio" data-target="state" type="radio" name="selection" value="state" > State
<input class="radio" data-target="region" type="radio" name="selection" value="region" > Region
<div id="state" class="query"></div>
<div id="region" class="query"></div>
I let you deal with the creation of the combobox, but here is the code you were trying to write.
it is a simple and basic use of dojo/on
require([
'dojo/dom',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/query',
'dojo/on',
'dojo/store/Memory',
'dijit/form/ComboBox',
'dojo/domReady!'
], function(dom, domConstruct, domClass, query, on, Memory, ComboBox) {
var stateStore = new Memory({
data: [{
name: "Alabama",
id: "AL"
}, {
name: "Alaska",
id: "AK"
}, {
name: "American Samoa",
id: "AS"
}, {
name: "Arizona",
id: "AZ"
}, {
name: "Arkansas",
id: "AR"
}, {
name: "Armed Forces Europe",
id: "AE"
}]
});
var regionStore = new Memory({
data: [{
name: "North Central",
id: "NC"
}, {
name: "South West",
id: "SW"
}]
});
var comboState = new ComboBox({
id: "stateSelect",
name: "state",
store: stateStore,
searchAttr: "name"
});
comboState.placeAt("state");
comboState.startup();
var comboRegion = new ComboBox({
id: "regionSelect",
name: "region",
store: regionStore,
searchAttr: "name"
});
comboRegion.placeAt("region");
comboRegion.startup();
on(query('.radio'), 'change', function(event) {
query('.query').forEach(function(divElement) {
domClass.add(divElement, 'hidden');
});
domClass.remove(dom.byId(event.target.value), 'hidden');
});
});
.hidden {
display: none
}
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<input class="radio" data-target="state" checked="true" type="radio" name="selection" value="state">State
<input class="radio" data-target="region" type="radio" name="selection" value="region">Region
<div id="state" class="query"></div>
<div id="region" class="query hidden"></div>
I am trying to develop kendo grid using Asp.NET MVC and Angularjs. my code is as mentioned below.
Index.cshtml
<div ng-controller="telerikGridController">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul>
<li>Country: <input ng-model="dataItem.Country" /></li>
<li>City: <input ng-model="dataItem.City"/></li>
<li>Address: {{dataItem.Address}}</li>
<li>Home phone: {{dataItem.Phone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
</div>
AngularJS controller (telerikGridController)
'use strict';
var app = angular.module('myApp', ['kendo.directives', 'ui.bootstrap']);
app.controller('telerikGridController', ['$scope', function telerikGridController($scope) {
$scope.mainGridOptions = {
dataSource: {
type: "json",
transport: {
read: "Grid/Departments"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "DepartmentName",
title: "Department Name",
width: "120px"
}, {
field: "Country",
title: "Country",
width: "120px"
}, {
field: "City",
width: "120px"
}, {
field: "Phone",
width: "120px"
}, {
field: "Description"
}
]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "json",
transport: {
read: "Grid/GetEmployees"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 2,
filter: { field: "DeptId", operator: "eq", value: dataItem.DeptId }
},
scrollable: false,
sortable: true,
pageable: true,
filterable:true,
columns: [
{ field: "FirstName", title: "First Name", width: "56px" },
{ field: "LastName", title: "Last Name", width: "110px" },
{ field: "Address", title: "Address" },
{ field: "Phone", title: "Phone", width: "190px" }
]
};
}
}
]);
ASP.NET MVC Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KendoGridApp.Models;
using Kendo.Mvc;
using Kendo.Mvc.UI;
namespace KendoGridApp.Controllers
{
public class GridController : Controller
{
List<Employee> employees = new List<Employee>();
List<Department> deptList = new List<Department>();
public GridController()
{
Employee employe = new Employee();
employe.FirstName = "First Name";
employe.LastName = "Last Name";
employe.Phone = "+92 302 8888 777";
employe.Address = " Pakistan";
employe.DeptId = 1;
var employe2 = new Employee();
employe2.FirstName = "First Name 2";
employe2.LastName = "Last Name 2";
employe2.Phone = "+92 333 4444 779";
employe2.Address = "UAE";
employe2.DeptId = 2;
var employe3 = new Employee();
employe3.FirstName = "First Name 3";
employe3.LastName = "Last Name 3";
employe3.Phone = "+92 302 4444 779";
employe3.Address = "Sydney,Australia";
employe3.DeptId = 3;
var employe4 = new Employee();
employe4.FirstName = "First Name 4";
employe4.LastName = "Last Name 4";
employe4.Phone = "+92 302 4444 999";
employe4.Address = "Sydney, Australia";
employe4.DeptId = 4;
var employe5 = new Employee();
employe5.FirstName = "First Name 5";
employe5.LastName = "Last Name 5";
employe5.Phone = "+92 302 1111 779";
employe5.Address = "Dubai, UAE";
employe5.DeptId = 5;
var employe6 = new Employee();
employe6.FirstName = "First Name 6";
employe6.LastName = "Last Name 6";
employe6.Phone = "+92 302 0000 779";
employe6.Address = "Dehli, India";
employe6.DeptId = 6;
employees.Add(employe);
employees.Add(employe2);
employees.Add(employe3);
employees.Add(employe4);
employees.Add(employe5);
employees.Add(employe6);
}
// GET: Grid
public ActionResult Index()
{
return View();
}
[HttpGet]
public JsonResult GetEmployees(DataSourceRequest command)
{
int deptId = Convert.ToInt16(Request.Params["filter[filters][0][value]"]);
employees = employees.Where(x => x.DeptId == deptId).ToList();
return Json(employees, JsonRequestBehavior.AllowGet);
}
[HttpGet]
public JsonResult Departments()
{
Department dept = new Department();
dept.DeptId = 1;
dept.DepartmentName = "Information Technology";
dept.Phone = "+1 111 111 111";
dept.Country = "Pakistan";
dept.City = "Lahore";
dept.Description = "This is Description Text 1";
Department dept2 = new Department();
dept2.DeptId = 2;
dept2.DepartmentName = "Mechnical Engineering";
dept2.Phone = "+1 222 111 111";
dept2.Country = "India";
dept2.City = "Dehli";
dept2.Description = "This is Description Text 2";
Department dept3 = new Department();
dept3.DeptId = 3;
dept3.DepartmentName = "Civil Engineering";
dept3.Phone = "+1 111 000 111";
dept3.Country = "Pakistan";
dept3.City = "Islamabad";
dept3.Description = "This is Description Text 3";
Department dept4 = new Department();
dept4.DeptId = 4;
dept4.DepartmentName = "Radiology";
dept4.Phone = "+1 111 222 000";
dept4.Country = "UAE";
dept4.City = "Dubai";
dept4.Description = "This is Description Text 4";
Department dept5 = new Department();
dept5.DeptId = 5;
dept5.DepartmentName = "Defence";
dept5.Phone = "+1 555 888 999";
dept5.Country = "Australia";
dept5.City = "Sydney";
dept5.Description = "This is Description Text 5";
Department dept6 = new Department();
dept6.DeptId = 6;
dept6.DepartmentName = "Socialogy";
dept6.Phone = "+1 555 777 000";
dept6.Country = "United States";
dept6.City = "New York";
dept6.Description = "This is Description Text 6";
deptList.Add(dept);
deptList.Add(dept2);
deptList.Add(dept3);
deptList.Add(dept4);
deptList.Add(dept5);
deptList.Add(dept6);
return Json(deptList, JsonRequestBehavior.AllowGet);
}
}
}
Issue:
Issue i am facing is in GetEmployees JsonResult function, DataSourceRequest command has always Filters = null. Whereas, my request is showing requests like,
Query String Parameters:
take:2
skip:0
page:1
pageSize:2
filter[logic]:and
filter[filters][0][field]:DeptId
filter[filters][0][operator]:eq
filter[filters][0][value]:3
and Request link is like,
GetEmployees?take=2&skip=0&page=1&pageSize=2&filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=DeptId&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=eq&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=3
currently I am able to get filters in server side using HttpRequestWrapper as mentioned below in GetEmployees JsonResult
int deptId = Convert.ToInt16(Request.Params["filter[filters][0][value]"]);
but is there any better approach to get these filters at server side? for example using DataSourceRequest?
Thanks.
This is works for me for server side filtering. Try add [DataSourceRequest] tag before variable type to solve your filter binding issue and to handle filtering you can use extension ToDataSourceResult() which provided by Kendo.Mvc.Extensions.
[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
public ActionResult Read([DataSourceRequest] DataSourceRequest request)
{
// removed for brevity
// .......
return Json(viewModels.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
Hope this help.
Use type: "aspnetmvc-ajax", instead of type: "json", in your dataSource and use the [DataSourceRequest] attribute in your controller.
public JsonResult GetEmployees([DataSourceRequest]DataSourceRequest command)
Finally, After hammering my head long i found the solution.
In my Code above mentioned,
Replace in $scope.detailGridOptions: (telerikGridController)
dataSource: {
type: "json",
transport: {
read: "Grid/GetEmployees"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
With:
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: "Grid/GetEmployees",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
schema:
{
data: "Data",
total: "Total",
errors: "Errors"
},
pageSize: 2,
serverPaging: true,
serverSorting: true
},
And in Asp.NET MVC controller:
Replace
[HttpGet]
public JsonResult GetEmployees(DataSourceRequest command)
With
[HttpPost]
public JsonResult GetEmployees(DataSourceRequest command)
And Everything will start working file. you will be receiving Filters/Sort etc everyting in DataSourceRequest object.
I am working on upgrading one of my Angular/Kendo UI projects from v2014.2.903 to v2014.3.1119. I have encountered a few instances where v2014.3.1119 breaks functionality that worked fine in v2014.2.903. I decided to create a couple JSFiddles to illustrate the issues, but unfortunately, the JSFiddle that points to v2014.2.903 doesn't seem to even recognize Kendo UI.
v2014.3.1119 JSFiddle (this works) ... http://jsfiddle.net/lejuan5150/w0711rdg/
v2014.2.903 JSFiddle (this doesn't work) ... http://jsfiddle.net/lejuan5150/4svqnaz6/
Both contain the same code and configuration aside from the version of Kendo UI they are referencing. Here is the code:
HTML:
<div>
<div data-ng-controller="personController">
<div
kendo-grid="personGrid"
k-options="personGridOptions"
k-ng-delay="personGridOptions">
</div>
<br />
First Name Combo Box:
<select
kendo-combo-box="firstNameComboBox"
k-options="firstNameComboBoxOptions"
k-ng-delay="firstNameComboBoxOptions"
k-ng-model="selectedPerson.firstName"
></select>
<br />
Last Name Combo Box:
<select
kendo-drop-down-list="lastNameDropDownList"
k-options="lastNameDropDownListOptions"
k-ng-delay="lastNameDropDownListOptions"
k-ng-model="selectedPerson.lastName"
></select>
</div>
JavaScript:
var app = angular
.module("app", [
"kendo.directives"
]);
app.controller("personController", [
"$scope",
personController
]);
function personController(
$scope
){
init();
function init(){
var personData = [{
firstName: "Joe",
lastName: "Smith",
status: "Active"
},{
firstName: "John",
lastName: "Smith",
status: "Active"
},{
firstName: "Travis",
lastName: "Smith",
status: "Expired"
}];
$scope.personDataSource = new kendo.data.DataSource({
data: personData
});
$scope.firstNamesData = [{
id: "Joe",
firstName: "Joe"
},{
id: "George",
firstName: "George"
},{
id: "John",
firstName: "John"
},{
id: "Travis",
firstName: "Travis"
}];
$scope.lastNamesData = [{
id: "Jones",
lastName: "Jones"
},{
id: "Smith",
lastName: "Smith"
}];
bindPersonGrid();
bindFirstNameComboBox();
bindLastNameDropDownList();
}
function bindPersonGrid(){
$scope.personGridOptions = {
dataSource: $scope.personDataSource,
selectable: "row",
dataBound: onPersonGridDataBound,
change: onPersonGridRowSelected
}
}
function onPersonGridDataBound(){
var grid = this;
var firstRow = grid.element.find("tbody tr:first");
grid.select(firstRow);
}
function onPersonGridRowSelected(
event
){
var grid = event.sender;
$scope.selectedPerson = grid.dataItem(grid.select());
$scope.$digest();
}
function bindFirstNameComboBox(){
$scope.firstNameComboBoxOptions = {
dataSource: $scope.firstNamesData,
dataTextField: "firstName",
dataValueField: "id"
};
}
function bindLastNameDropDownList(){
$scope.lastNameDropDownListOptions = {
dataSource: $scope.lastNamesData,
dataTextField: "lastName",
dataValueField: "id"
};
}
}
Does anyone know why the v2014.2.903 JSFiddle doesn't work?
I found the issue. Kendo v2014.2.903 doesn't like k-ng-delay when using a hard coded array of JavaScript objects.
I have some data displayed in an ng-grid.
Some of this data is displayed nearly immediately after the page loads; other data is slower and we stitch it in once it's received.
In doing this, sorting can break if the grid is set to sort data that isn't there when the first half of the data is rendered in the grid.
Is there a nice way to tell the grid to re-sort itself and preserve multiple columns as well as sort directions once all of the data has been received?
JS
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 43},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = {
data: 'myData',
columnDefs: [{ field: "name", },
{ field: "age" },
{ field: "state" }],
sortInfo: {
fields: [ 'age', 'state' ],
directions: [ 'asc', 'desc' ]
}
};
var lateData = [
{ name: 'Moroni', state: 'NY' },
{ name: 'Tiancum', state: 'CA' },
{ name: 'Jacob', state: 'PA' },
{ name: 'Nephi', state: 'AK' },
{ name: 'Enos', state: 'MO' }
];
setTimeout(function () {
$scope.myData = _.merge($scope.myData, lateData);
$scope.$digest();
}, 3000);
});
HTML
<div ng-app="myApp">
<div ng-controller = "MyCtrl">
<div ng-grid="gridOptions" class="gridStyle"></div>
</div>
</div>
CSS
.gridStyle {
border: 1px solid rgb(212, 212, 212);
width: 100%;
height: 500px;
}
http://jsfiddle.net/akukucka/4vrQq/
Not sure if this is what you wanted:
$scope.resort= function(){
$scope.gridOptions.sortBy('age');
};
Plunker is here
Since I don't have any of your code you have to find a place where/when to do the sorting for yourself.