Having Issues with getting the data for my ui grid? Not sure what I'm doing wrong here, but I console.log the data so I know i'm getting it back.
My data is coming back as a object and i'm trying to reach the team members array in the object to reference.
function loadProjectDetails(){
return MrktRsrchPrjtDataService.getProjectSubsection(MrktRsrchPrjtDataService.getCurrentReportId(), "ProjectSummary")
.then(function (data){
vm.project = data;
console.log(data);
vm.teamGridOptions = {
enableGridMenu: false,
enableSorting: true,
enableHorizontalScrollbar: 0, /*always hide horizontal scroll bar*/
enableVerticalScrollbar: 1, /*always show vertical scroll bar*/
rowHeight: 46,
columnDefs: [
{
enableHiding: false,
enableColumnMenu: false,
displayName: 'First Name',
field: 'memberId',
cellClass: 'ui-grid-cell-contents',
cellTemplate: '<span>{{row.entity.teamMembers.memberId}}</span>'
},
],
data: vm.project
};
});
}
//HTML
<div ui-grid="vm.teamGridOptions" ui-grid-auto-resize class=""></div>
In the html you call vm.teamGridOptions. What is the name of your controllor? AngularJS convention is to name the controller "ctrl", so this would mean you should be calling ctrl.teamGridOptions.
Related
I am trying to use Kendo UI Grid with angular js. I need to expand the grid to further level when user clicks a link given in one of the columns of the grid.
I used following code to expand the grid on click of an tag inside a kendo grid column.
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
schema: {
model: {
fields: {
fieldA: { type: "string" },
fieldB: { type: "string" },
fieldC: { type: "string" },
fieldT: { type: "numeric" }
}
}
},
pageSize: 10
},
filterable: true,
sortable: true,
resizable: true,
pageable: true,
scrollable: true,
columns: [
{ field: "fieldA", title: "FieldA", width: 90},
{ field: "fieldB", title: "FieldB", width: 90},
{ field: "fieldC", title: "FieldC", width: 90},
{ field: "fieldT", title: "FieldT", width: 90, template: "<a onclick='expand(this)'href='\\#'>#=mydata#</a>"}
]
};
But on running the code it just gives me an error in the browser console window.
Uncaught ReferenceError: expand is not defined at
HTMLAnchorElement.onclick
I researched and found that Kendo doesn't supports onclick event inside an tag. Therfore tried to use tag instead of tag. But it still does not work.
{ field: "fieldT", title: "FieldT", width: 90, template: "<span ng-click='showFileLevel(this)>{{mydata}}</span>"}
Can anyone please guide me in the right direction or let me know how can I expand a Kendo grid to further levels on clicking text inside a certain column of the grid using Angular JS.
you write expand(this) method out of the controller in your js.
I have a Kendo UI grid where some of the columns can be filtered. For each row in that column, you can open a popup to see some details to the specific entry.
I can open the popup without any problems. But: after closing it and trying to filter any of the columns, I get the following error: JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference
If I filter a column before I open a popup, it works like a charm.
If I filter a column and then open the popup, the already filtered column can be filtered again but the others not.
I don't know why I can't filter columns after opening and closing the popup.
Any ideas or hints would be really helpful. Thanks
HTML:
<div id="windoofTestOuter"><div id="windoofTest"></div></div>
<div id="processGrid"></div>
My grid:
$("#processGrid").kendoGrid({
sortable: true,
pageable: true,
selectable: true,
filterable: {
extra: false
},
dataSource: {
type: "aspnetmvc-ajax",
transport: {
read: {
url: "/Home/GetProcesses",
cache: false,
type: "POST",
dataType: "json"
},
parameterMap: function (data) {
return $.extend({}, data, { sort: data.sort, filter: data.filter });
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: true,
page: "#ViewBag.ProcessPage",
schema: { data: "Data", total: "Total", model: { id: "Id" } },
pageSize: "#(#Model.MaxCountToShow)"
},
columns: [
{ field: "ErrorDateTime", title: "ProcessDateTime", width: "170px"/*, filterable: { ui: dateFilter }*/ },
{ field: "Name", title: "Processtype", attributes: { value: "type" }, width: "240px;", filterable: { ui: processtypeFilter} },
{ field: "Service", title: "Service", width: "181px;", filterable: { ui: serviceFilter } },
{ field: "Operation", title: "Operation", width: "130px", filterable: { ui: operationFilter } }
]
}).data("kendoGrid");
The link/string which shall open the popup:
function createProcessActionString(process) {
var det = '<a class="makeANiceMouse" onclick="processDetailUrl(' + process.Id + ', ' + grid.dataSource.page() + ')">Details</a>';
return det;
}
My popup:
function processDetailUrl(id, page) {
var windoof = $("#windoofTest").kendoWindow({
width: "1150px",
height: "300px",
content: det,
title: "Process Details",
actions: ["Minimize", "Maximize", "Close"],
close: function (e) {
windoof.data("kendoWindow").content(" ");
}
});
windoof.data("kendoWindow").center().open();
}
I deleted the unnecessary columns and so on..
EDIT: I tried to intitialize the filter in the filterMenuInit. After opening and closing the popup, I clicked on the filter icon of one of the columns, and I get the error : JavaScript runtime error: Unable to get property 'toggle' of undefined or null reference . The same one as before.
EDIT: I used the windoof.destroy() but the filters weren't accessable afterwards.
EDIT solution: I have a workaround for working with the filters again. I just fake a click on each of it before I open a popup. It's not beautiful but it serves me so far.
BUT It seems like everything gets kicked/killed by that damn popup. I can't even access the grid's datasource anymore.. It's strange...
I'm dealing with the same issues but got well passed the Data not being there. Check out or use onDataBound and use e.sender to get a handle to the Grid Object opposed to .data("KendoGrid") from the onClose of the popup this is what fixed it for me. I'm still trying to get my filters to work though after the pop up closes.
Edit:
Okay I think it's because when I assign sumColumnModel to colModel sumColumnModel is empty because sumColumnModel is only non-empty within the success function. So is there any way I can get that variable out of the success function and use it in colModel?
I am using a function to get my data and I am getting the data out just fine. I get this JSON from data.d:
"{"Page":1,
"TotalPages":5.0,
"TotalRecords":122,
"ColumnModel": [
{"name":"Description","sorttype":"string","align":"center"},
{"name":"Matrix","sorttype":"string","align":"center"},
{"name":"AvailableReports","sorttype":"string","align":"center","hidden":true},
{"name":"Classification","sorttype":"string","align":"center","hidden":true}
],
"Submissions":[
{"DateSubmitted":"4/23/2014","DateSampled":null,"Matrix":"Sometype","Status":"Completed","SubmissionId":"001","Description":"description","Company":null,"Classification":null,"AvailableReports":7},
{"DateSubmitted":"4/23/2014","DateSampled":null,"Matrix":"sometype","Status":"Completed","SubmissionId":"002","Description":"description","Company":null,"Classification":null,"AvailableReports":6}
]}"
I am currently using this jsonreader:
jsonReader: {
repeatitems: false,
root: function(obj) { return obj.Submissions; },
page: function(obj) { return obj.Page; },
total: function(obj) { return obj.TotalPages; },
records:function(obj) { return obj.TotalRecords; },
}
I tired putting in just 'Submissions' for the value of root in jsonreader but that didnt do the trick.
My column model is being edited in the success part of my ajax function call to correctly display certain columns that is done like this.
myData.ColumnModel.splice(0, 0,
{ name: "DateSubmitted", label: "Date Submitted", sorttype: "date", align: "center"});
myData.ColumnModel.push(
{ name: "Status", sorttype: "string", align: "center" },
{ name: "SubmissionId", label:"Submission Id", sorttype: "string", align: "center" });
sumColumnModel = myData.ColumnModel;
then I pass sumColumn as the Column model for the grid.
colModel: sumColumnModel,
Any idea why the grid isn't being populated?
So I wound up just initializing the colModel and then adding/subtracting things from it based on a couple drop down menus. It would be nice to know if I could actually get the col model out of the datatype:function but at this point I've just worked around it.
Grid reads data from a javascript variable.
$("#grid").kendoGrid({
dataSource: {
type: "text",
data: jsvar,
schema: {
model: {
fields: {
id: {type: "string", editable: false},
name: {type: "string"}
}
}
},
pageSize: 20
},
pageable: {
input: true,
numeric: true
},
//toolbar: [{text: "Add"}],
columns: [
{command: [{text: "Edit", click: showDetailse}, {text: "View", click: viewoneitm}], title: " ", width: "170px"},
]
});
Then I change value of this variable jsvar with ajax and wait for ajax response and after that when I refresh grid with
jQuery("#grid").data("kendoGrid").dataSource.read();
jQuery("#grid").data("kendoGrid").refresh();
The grid is not repopulated with new data and old data stays in grid. Please tell me how to refresh grid data.
This worked fine and grid used to refresh perfectly untill I proviced static data, but after I used ajax and then 'refresh' it failed to update
If jsvar contains an array, the Kendo data source will create a model for each array item, so if you modify the original array, it won't change the DataSource. If you want to change the data, you should do it like this:
grid.dataSource.data(jsvar);
Does Jqgrid allow us to add pager which we are using dataType local and don't want the whole data to be loaded at once. I am trying to do the same without success. It only shows the first page and show Page 1 Of 1 on the pager when there are many more records to be displayed.
Probably you fill the grid contain in the wrong way. Look at the example to see how you can use data parameter of jqGrid.
I have this same issue. I have a "local" jqgrid setup and it's showing my data but the pager values aren't completely accurate. Until I figured out that I needed to muck with the 'localReader' property. On the jqgrid wiki I saw that the jsonReader can have functions that define how to get the page, records, etc. It also states that the localReader can do whatever the jsonReader does so I gave it shot. Here's what I am doing.
var grid = $('#table').jqGrid({
datatype: 'local',
altRows: true,
colModel: [
{name: '0', label: "Name"},
{name: '1', label: "Color"},
],
pager: "#pager",
rowNum: 15,
sortname: '0',
viewrecords: true,
gridview: true,
height: '100%',
autowidth: '100%'
});
var reader = {
root: function(obj) { return results.rows; },
page: function(obj) { return results.page; },
total: function(obj) { return results.total; },
records: function(obj) { return results.records; },
grid.setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
My "results" is an object like this:
{page: "1", total: "70", records: "1045", rows:[.....]}
This seems to work as desired.