sencha extjs data in multiple referenced grids - javascript

I have two grids getting data from php mysql backend
First grid is display of all classes in a school. This represents 1 table of mysql. And I have no issues in displaying data
second grid gets data of students in a particular class, when one clicks on any of the class of first grid. Please see image below
This is a different table in mysql. And I am "ClassID" to php file. which sends sorted JSON of students of that particular class
i use the below code
var studentView = this.getstudentGrid;
var ClassData = record.get('ClassID');
studentView.getStore().load({
params:{ClassID: ClassData}
});
but it says uncaught error and nothing gets displayed. Kindly help

Related

Google Sheets/JIRA Connection

I'm trying to connect Google Sheets to JIRA to gather the data for updating reports automatically.
I'm struggling however with a couple of points in this modified script.
I want to return the component field but calling the name field returns undefined.
var components = data["issues"][id].fields.components.name;
If I remove the name field, then I get the following response:
{name=#####, self=https://www.#########/rest/api/2/component/26357, id=26357}
The second issue is that only a handful of issues are being rendered. As far as I can see my REST call looks OK, as does the writing to tables:
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); //select active spreadsheet
sheet.getRange(2, 1, issuessss.length, 7).setValues(issuessss); // write from cell A2
break;
Anyone have any ideas that could help?
The field component is an array so components.name does not exist (i.e components[0].name would work).
Before setting the values, try to execute a flush first.

Firebase range query

Im using AngularFire+Firebase and have data at firebase-database.
Im trying to paginate Data with Smart Table
My problem is that I dont know how to range query without specifying any child i,e fetch records from record # 25 to 35
Below query gives me first 5 records
var queryFIrst = visitRef.startAt().limitToFirst(5);
$scope.Visits = $firebaseArray(queryFIrst);
now Im trying to get records next 5,from 6 to 10 and I tried below
var queryFIrst = visitRef.startAt().limitToFirst(5).endAt().limitToFirst(5);
$scope.Visits = $firebaseArray(queryFIrst);
but it giving error that startAt and endAt can't be used like this with limit
In general pagination is not a good fit for Firebase's realtime data model/API. You're trying to model a SQL SKIP operator, which won't work with the Firebase Database.
But if you want to model pagination in Firebase, you should think of having an "anchor point".
When you've loaded the first page, the last item on that page becomes the anchor point. When you then want to load the next page, you create a query that starts at the anchor point and load n+1 item.
In pseudo-code (it's real JavaScript, I just didn't run it):
var page1 = visitRef.orderByKey().limitToFirst(5);
var anchorKey;
page1.on('child_added', function(snapshot) {
anchorKey = snapshot.key; // this will always be the last child_added we received
});
Now when you want to load the next page of items, you create a new query that starts at the anchor key:
var page2 = visitRef.orderByKey().startAt(anchorKey).limitToFirst(6);
A few things to note here:
You seem to be using an approach from the Firebase 1.x SDK, such as an empty startAt(). While that code may still work, my snippets use the syntax/idiom for the 3.x SDK.
For the second page you'll need to load one extra item, since the anchor item is loaded for both pages.
If you want to be able to paginate back, you'll also need the anchor key at the start of the page.
Is that what you needed that time?
visitRef.orderByKey().startAt("25").endAt("35")
I asked a similar question Get specific range of Firebase Database children

DHTMLX Grid Pulling Additional Data

I am trying to build an app for users to submit their work times in but am having trouble with pulling additional data into the grid.
Eg: If a user were to type in there employee code of 0000 into the Employee Code Column the Employee Name Field would need to update to read "John Doe" All this data is stored in databases on the back end and I have been able to access it on refresh eg. If the page is reloaded after the new row has been created and the data is present it will pull the correct data in, but i do not want them to have to refresh the page to do this. How can I pull in the extra data after the cell has been updated.
The Grid is created on the page with JavaScript as follows:
timesheetGrid.setColumnIds("Column Names, Column Names");
timesheetGrid.setImagePath("codebase/imgs/"); //set the image path for the grids icons
timesheetGrid.setInitWidths("70,100,100,100,70,100,150,100,70,70,100,70,70,*,*"); //sets the initial widths of columns
timesheetGrid.setColAlign("center,center,center,center,center,center,center,center,center,center,center,center,center,left,left"); //sets the alignment of columns
timesheetGrid.setColTypes("edn,ro,dhxCalendar,ro,edn,ro,ed,ro,ro,ro,ed,edn,ch,txt,ro"); //sets the types of columns
timesheetGrid.setColSorting("str,str,date,date,str,str,str,str,str,str,str,str,str,str,str"); //sets the sorting types of columns
timesheetGrid.setDateFormat("%Y-%m-%d"); //Set the Date Format to be used in the Grid
timesheetGrid.attachHeader("#text_filter,#text_filter,#text_filter,,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,,,");
timesheetGrid.setColumnHidden(3,true);
timesheetGrid.enableEditEvents(true,false,true);
timesheetGrid.init();
//timesheetGrid.makeFilter("WeekEnding",0); //TODO: Add Filter For Week Ending
//this.lockRow(id, true); //Make Specific Row Read Only TODO: Non Active Week Rows Read Only
timesheetGrid.load("data/timesheets.php");
var dpg = new dataProcessor("data/timesheets.php");
dpg.enableDataNames(true); // will use names instead of indexes
dpg.init(timesheetGrid);
PHP is used to pull data from the correct avenues
require("../codebase/connector/grid_connector.php");//adds the connector engine
$conn = new GridConnector($res,"MySQL"); //initializes the connector object
if ($conn->is_select_mode()) {//code for loading data
SQL Code is HERE
}else { //code for other operations - i.e. update/insert/delete
OTHER SQL CODE IS HERE
}
As the Data is sensitive I cannot display any of it sorry for any inconvenience.
Any Help would be much appreciated.
If the data you're providing is XML you can attach an event to your grid and call this grid.updateFromXML("data/timesheets.php");
This will parse and paint the whole grid information
If you're looking to update just the row you updated you can send via GET the id of the row and it will only parse and paint the row you're sending
grid.updateFromXML("data/timesheets.php?for=" + row_id));
Full Code would be something like this:
dpg.defineAction ("update", myUpdate);
function myUpdate(tag){
timesheetGrid.updateFromXML("data/timesheets.php?for="+tag.getAttribute("sid"));
return true;
}
If the data you're retrieving is not XML formatted, I'm afraid you would need to update the values from the row manually via the same event.

Lightswitch load all data or run a async method synchronously

I have a grid with data in Lighswitch application. Grid has on every column posibility to filter column. Thanks to lsEnhancedTable
Right now I am sending an ajax request to the web api controler with the list of ids of the Customers that I want to export. It works but with a lot of data it is very slow because I have to turn off the paging of the data to get all visible customers ids so I can iterate over the VisualCollection.
To optimize this I would have to turn on back the paging of the data to 50 records so that the initial load is fast and move the loading of the data to a save/export to excel button.
Possible solutions:
Load data all data on save button click. To do this I have to somehow load all items before I can iterate over collection.
The code bellow locks UI thread since the loadMore is async. How to load all data synchronously? Ideally I would like to have some kind of progress view using a msls.showProgress.
while(3<4)
{
if (screen.tblCustomers.canLoadMore) {
screen.tblCustomers.loadMore();
}
else
break;
}
var visibleItemsIds = msls.iterate(screen.tblCustomers.data)
.where(function (c) {
return c;
})
Second approach would be turn on paging and pass just the filters applied by the users to the web api controller so I can query database and return only filtered records. But I don't know how to do that.
Third approach is the one that I am using right now. Turn off the paging->iterate over visual collection, get the customers id, pass them to the controller and return a filtered excel. This doesn't work well when there are a lot of records.
Iterate over filtered collection in the server side? I don't know if there is a way to do this in Lighswitch?
Here's an option for client side javascript.
// First build the OData filter string.
var filter = "(FieldName eq " + msls._toODataString("value", ":String") + ")";
// Then query the database.
myapp.activeDataWorkspace.ApplicationData.[TableName].filter(filter).execute().then(function (result) { ... });

Datatable client-side data change/redraw

I set up a datatables that initially gets from server some data and represents it, but then everything is left to the client. Some options are:
serverSide: false,
sAjaxSource: mySource,
My $.fn.DataTable.version is 1.10.2.
Then I need to change, client-side, the aaData under the table because some working on data is performed. I need to update the DT to show the client-altered temporary data without send another request to server (for two reason: prevent useless traffic and because that data is being altered).
I am looking for a way to edit the underlying DT databean to edit it, so then calling again
myTable.draw();
on my table I obtain a refresh realtime without sending another get to the server.
The question is, can I access DT data array, and can I edit it?
How is it done if is possible?
EDIT: I need to feed the table the full bean array as it initially took from the server, same format. So individual row/cell add/edit and client-side building functions are not suitable in my case, unless I manually cicle all objects.
SOLUTION
Use the code below:
// Retrieve data
var data = table.ajax.json();
// Modify data
$.each(data.data, function(){
this[0] = 'John Smith';
});
// Clear table
table.clear();
// Add updated data
table.rows.add(data.data);
// Redraw table
table.draw();
DEMO
See this jsFiddle for code and demonstration.

Categories