Dojo DataGrid Not Showing - javascript

In my dojo.xhrGet I have specified this load::
load: function (data) {
// reset data display containers
dojo.addClass("search_results", "hide_on_load");
dojo.byId("search_results_found").innerHTML = "";
// populate table with new results.
dojo.byId("search_results_found").innerHTML = "" + data.length + " search result(s) found.";
// when data is from an XHR request, you must transform it into a store.
// See: http://stackoverflow.com/questions/2423459/datagrid-in-dojo-with-json-data-from-a-servlet
var items = dojo.map(data, function (res_row) {
return {
'Id': res_row.Id,
'Name': res_row.Name,
'VisitType': res_row.VisitType,
'VisitDate': res_row.VisitDate
};
});
var store = new dojo.data.ItemFileReadStore({
data: {
items: items
}
});
var res_layout = [
{field: 'Id', name: 'ID', width: '10%'},
{field: 'Name', name: 'Site Name', width: '50%'},
{field: 'VisitType', name: 'Visit Type', width: '20%'},
{field: 'VisitDate', name: 'Visit Date', width: '20%'}
];
// create a new grid:
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10
}, document.createElement('div'));
// append the new grid to the div "search_results_table":
dojo.byId("search_results_table").appendChild(res_grid.domNode);
// Call startup, in order to render the grid:
res_grid.startup();
dojo.removeClass("search_results", "hide_on_load");
standby.hide();
},
And, the html is:
<!-- Search Results Table -->
<div id="search_results" class="hide_on_load">
<div id="search_results_found"></div>
<div id="search_results_table"></div>
</div>
At the end of this script, the grid does not show.
I removed the hide_on_load css class selector so that I could exclude it as being the issue. But, that did not help.
Looking at the console, there are no errors logged.
Also, writing the various objects (res_grid, store, etc.) all produce output that looks to be correct.
Can somebody provide some help on how to get it to show?
Thanks!
Update:
When I inspect the DOM after this code has run, I see the tabler created with the headers but then when I go to find the actual table with the search results (under div class=dojoxGridContent), it isn't there.
Update 2:
I have the styles specified too:
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table { margin: 0; }
</style>

Make sure you set a size through the style property on the div where you place your grid, and don't forget to import the CSS files for your grid, like :
<style type="text/css">
#import "dojoroot/dojox/grid/resources/Grid.css";
#import "dojoroot/dojox/grid/resources/soriaGrid.css";
.dojoxGrid table {
margin: 0;
}
</style>
Note : Replace soria by whatever theme you are using...
... and don't forget to set a size to your grid's dom node :
<div id="gridnode" style="width:100%; height:500px;"></div>

If you don't want a fix height you can declare the grid withautoHeight: true.
var res_grid = new dojox.grid.DataGrid({
store: store,
structure: res_layout,
rowsPerPage: 10,
autoHeight: true
}, document.createElement('div'));
With This attribute you don't need to add style to the parent container for it to display.

Related

appendgrid data not populated as response, instead empty rows coming in the grid

Sometimes my appendgrid plugin not populating proper data instead same no empty rows are inserted as response array length.
var inputStr = '{"ok":true,"data":{"IssueDetails":[{"Name":"test121","Description":"test131666"}],"StatusDetails":{"L1_Process_ID":"1.0.0","WeeklyStatusText":"test blue1","NextWeekActivity":"p test"},"accessDetails":{"edit":true,"delete":false,"role":""}},"message":"Data retrieved successfully"}';
var responseData = JSON.parse(inputStr);
$('#tblStatusGrid').appendGrid({
caption: 'Key Issues, Key Decisions, Key OCM Impacts (Including FTE +/-), Business Improvements',
columns: [{
name: 'Name',
display: 'Name',
type: 'text',
displayCss: {
width: '100px',
height: 'auto'
},
ctrlAttr: {
maxlength: 50
}
}, {
name: 'Description',
display: 'Description',
type: 'textarea',
displayCss: {
width: '98%',
height: 'auto'
},
}],
hideButtons: {
removeLast: true
},
//maxBodyHeight: 300,
// maintainScroll: true
});
$('#tblStatusGrid').appendGrid('load', responseData.data.IssueDetails);
Here in the grid I should get a row of data as in response, but I am getting an empty instead. So please suggest a solution or any reason why so.
response : '{"ok":true,"data":{"IssueDetails":[{"Name":"PTP","Description":"DESC build"},{"Name":"PTP2","Description":"Desc Build2"},{"Name":"PTP","Description":"Desc Build33"}],"accessDetails":{"edit":true,"delete":false,"role":""}},"message":"Data retrieved successfully"}'
grid after load
Look appendgrid docs here
add dataLoaded method you your code and watch with console.
dataLoaded: function (caller, records) {
onsole.log(record.length);
}
I found the answer for my question.
If the we are using multiple appendgrids in my case I had multiple tabs loading the data to appendgrids so there might be a conflict of elements. So better check for the conflicts or empty the data for the other appendgrid which is not shown and then load the new data.

Where to programmatically set column filters when using a spreadsheet selModel?

This is a follow up question that I got answered here: How can I programmatically set column filters?
I have a 188 line Ext.js view. In this view I extend Ext.grid.Panel and in this grid I have set the selModel like so ...
selModel: {
cellSelect: false, // Only support row selection.
type: 'spreadsheet' // Use the new "spreadsheet" style grid selection model.
},
On one of the columns, the Status column, I am programmatically setting the filter so that only rows that have the Status of Ready will appear when the page firsts renders. I have been doing this here in the code:
columns: [
...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
var filter = this.up('panel').down('#status').filter;
if (!filter.menu) {
filter.createMenu();
filter.menu
.down('menuitem[value="Ready"]')
.setChecked(true);
}
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: 'list',
flex: 1,
},
... more columns ...
A helpful SO member pointed out that is not the most efficient place for the code that sets the filter as the code will be executed for each row in the grid.
I have tried adding an afterrender function like so ...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
filter: 'list',
flex: 1,
listeners: {
afterrender: function(value) {
Ext.Msg.alert('We have been rendered value is ' + value );
var filter = this.up('panel').down('#status').filter;
if (!filter.menu) {
filter.createMenu();
filter.menu
.down('menuitem[value="Ready"]')
.setChecked(true); //Uncaught TypeError: Cannot read property 'setChecked' of null
}
}},
... but that results in this error message, //Uncaught TypeError: Cannot read property 'setChecked' of null.
What am I doing wrong here? Do I need the listeners:? Am I not getting passed the data I think I am getting passed to my afterrender function? Should I defining a initComponent function?
UPDATE:
I changed my code to what DrakeES suggested, ...
{
text: 'Status',
dataIndex: 'status',
itemId: 'status',
renderer: function(value, metaData) {
metaData.tdStyle = (value == 'Ready') ?
'color:green;font-weight: bold' :
'color:red;font-style: italic'
return(value)
},
flex: 1,
filter: {
type: 'list',
value: 'Ready'
}
... but the result is this:
Where the animated loading image just sits there and spins. This prevents the user from be able to change the filter interactively. I wonder what it is I am doing wrong here?
I am programmatically setting the filter so that only rows that have
the Status of Ready will appear when the page firsts renders
What checking the filter's checkbox effectively does is setting filter on the store. Because you want the filter to be applied initially, it would be better to have it in the store config right away:
filters: [
{
id: 'x-gridfilter-status',
property: 'status',
value: 'Ready'
}
]
That way the grid view appear filtered in the first place — instead of initially showing all rows and only then filtering them out once the column menu renders and applies the filter. Note that having id: 'x-gridfilter-status' on the store's filter is required so that the column's filter picks it up instead of creating a duplicate.
Setting filter on the store, however, will not send feedback to the column filter menu, so the latter will remain unchecked unless you explicitly check it. Therefore, you still need an afterrender handler on either the grid or the column to make things look in sync.
A simple and elegant solution without listeners and stuff:
filter: {
type: 'list',
value: 'Ready'
}
Full working example: https://fiddle.sencha.com/#fiddle/prp

kendo ui grid batch editing, set focus

I working on a kendo ui grid. The grid is not-editable as default.
In the toolbar is a 'edit' button. When the user clicks on it, the grid should be editable in batch mode like this.
The only solution to get this work is remove and recreate the grid/datasource with new properties (editable:true etc).
This works as expected. Now I want to set the focus on the first row/cell, so that the user can see that the grid is editable now (in the example below the row becomes an input field).
Any suggestions for this?
Here is a fiddle for this.
$('.k-grid-edit').on('click', function (e) {
e.preventDefault();
// remove old grid
$('#grid').html('');
// recreate grid with edit: true and new datasource
$('#grid').kendoGrid({
dataSource: dataSourceInEdit,
editable: true,
columns: [{
field: 'TableId',
title: 'Id',
width: 50
}, {
field: 'Area',
title: 'Area'
}, {
field: 'Table',
title: 'Table',
width: 60
}, {
command: 'destroy',
title: ' ',
width: 100
}]
}).data("kendoGrid");
}); // end edit
Okay, I got it:
These 2 lines make it happen:
var grid = $("#rt_tableGrid").data("kendoGrid");
grid.editRow($("#rt_tableGrid tr:eq(1)"));
Certainly only on my local script, in the Fiddle I cant´t get it to work.
Although in the Docu is written: Requires "inline" or "popup"
Documentation here

Ext JS 4: Grid List Filter is NOT updated

I am running a weird problem when I try to set Grid Filter list dynamically.
Let me explain by my code snippets
I have a column with filter list is defined as
{
text : 'Client',
dataIndex : 'topAccount',
itemId : 'exTopAccount',
filter: {
type: 'list',
options:[]
}
}
I initialize list from store in 'viewready'
viewready: function(cmp,eOpts){
cmp.getHeaderCt().child('#exTopAccount').initialConfig.filter.options = clientsStore.collect('topAccount');
}
===> WORKS GOOD
Now, I have to build the new client store based on the records when user moves to next page. Therefore I build the store in the 'change' event of paging
listeners: {
'change' :function( toolbar, pageData, eOpts ) {
var store = Ext.StoreManager.get('ExceptionRecords');
clientsStore.removeAll(true);
store.each(function(record){
if(clientsStore.findRecord('topAccount',record.data.topAccount.trim()) == null ) {
clientsStore.add({topAccount: record.data.topAccount.trim()})
}
})
Ext.getCmp('exceptionGridContainer').view.refresh;
Ext.getCmp('exceptionGridContainer').view.getHeaderCt().doLayout;
console.log(clientsStore);
Ext.getCmp('exceptionGridContainer').view.getHeaderCt().child('#exTopAccount').initialConfig.filter.options = clientsStore.collect('topAccount');
}
}
I can now see the new data in clientsStore . But Grid filter list is not updated. still showing old data. I tried refresh,layout etc. Nothing helps
Any help will be appreciated
Thanks
Tharahan
Just changing the value of a property does not affect the component rendered or computed state. The menu is created when the list is first initialized. The first time you do that, it works because that's before the initialization, but the second time, that's too late.
If you can grab a reference to the instantiated ListFilter, I think you could force the recreation of the menu this way:
listFilter.menu = listFilter.createMenu({
options: [ ... ] // new options
// rest of the filter config
});
So, supposing you have a reference to your target grid, you could change the options for the column with dataIndex of "topAccount" by a call similar to this:
var listFilter = grid
.findFeature('filters') // access filters feature of the grid
.get('topAccount'); // access the filter for column
listFilter.menu = listFilter.createMenu({
options: [ ... ] // new options
// rest of the filter config
});
--- Edit ---
OK, complete example. Tested, working.
Ext.widget('grid', {
renderTo: Ext.getBody()
,height: 400
,features: [{
ftype: 'filters'
,local: true
}]
,columns: [{
dataIndex: 'a'
,text: 'Column A'
,filter: {
type: 'list'
,options: ['Foo', 'Bar']
}
},{
dataIndex: 'b'
,text: 'Column B'
},{
dataIndex: 'c'
,text: 'Column C'
}]
,store: {
fields: ['a', 'b', 'c']
,autoLoad: true
,proxy: {
type: 'memory'
,reader: 'array'
,data: [
['Foo', 1, 'Bar']
,['Bar', 2, 'Baz']
,['Baz', 1, 'Bar']
,['Bat', 2, 'Baz']
]
}
}
,tbar: [{
text: 'Change list options'
,handler: function() {
var grid = this.up('grid'),
// forget about getFeature, I read the doc and found something!
filterFeature = grid.filters,
colAFilter = filterFeature.getFilter('a');
// If the filter has never been used, it won't be available
if (!colAFilter) {
// someone commented that this is the way to initialize filter
filterFeature.view.headerCt.getMenu();
colAFilter = filterFeature.getFilter('a');
}
// ok, we've got the ref, now let's try to recreate the menu
colAFilter.menu = colAFilter.createMenu({
options: ['Baz', 'Bat']
});
}
}]
});
I was solving similar problem and answers to this question helped me a lot. Local List filter menu is in fact lazy loaded (only created when clicked) and I needed to set filter menu to be reloaded if the grid store has been reloaded with different data. Solved it by destroying of menu after each reload, so on next click menu is recreated:
var on_load = function() {
var grid_header = me.gridPanel.filters.view.headerCt
if (grid_header.menu) {
grid_header.menu.destroy();
grid_header.menu = null;
}
}

How to force a refresh on a Kendo UI Grid filled with remote data?

I have a Kendo UI Grid filled with info from a remote source and I want to force a refresh on the information displayed after a Kendo UI Window on my website is closed.
I tried this:
var grid = $("#usuariosGrid").data("kendoGrid");
grid.refresh();
But it didn't work, this is how I create the Kendo UI Grid:
var ds = new kendo.data.DataSource({
transport: {
read: {
url: root_url + "/usuario/index",
dataType: "json"
}
},
schema: {
data: "Response",
total: "Count"
},
serverPaging: false,
pageSize: 2
});
$("#usuariosGrid").kendoGrid({
pageable: {
refresh: true
},
columns: [
{ field: "UsuarioId", title: "ID", width: "100px" },
{ field: "Nombre", title: "Nombre", width: "100px" },
{ field: "ApellidoP", title: "Apellido Paterno", width: "100px" },
{ field: "ApellidoM", title: "Apellido Materno", width: "100px" },
{ command: [{ text: "Editar", click: editFunction }, { text: "Eliminar", click: deleteFunction }], title: " ", width: "200px" }
],
dataSource: ds
});
I looked at the documentation but didn't come across a method to do this.
On a side note, I've been wondering how to display a loading animation on the Kendo UI Grid while the data is being loaded into it, it is shown after it's been loaded and I'm clicking through the pages of the grid, but when there's no data, it looks collapsed and I would like to display a loading animation to make it look filled while the info is being loaded.
As #NicholasButtler suggests, use ds.read() for forcing a read. Depending on your DataSource definition, the result might be cached. Check this on enabling/disabling transport.read.cache.
For replacing the loading image redefine the class .k-loading-image. Example:
.k-loading-image {
background-image:url('http://24.media.tumblr.com/cfa55f70bbc5ce545eed804fa61a9d26/tumblr_mfpmmdCdWA1s1r5leo1_500.gif')
}
EDIT In order to guarantee that you have space enough for displaying the image add the following style definition:
#grid .k-grid-content {
min-height: 100px;
}
Fiddle example here : http://jsfiddle.net/OnaBai/nYYHk/1/
I had problems with the loading image not showing when loading remote data, but I noticed it was only on certain grids.
Turns out, if you configure the grid with: scrollable: false option, the loading image shows as expected. There's no need to have a min-height in the CSS and there's no need to have a scrollable grid if you're also paging.

Categories