AngularJS ng-table with pagination: no rows displayed - javascript

I'm trying to use ng-table (http://bazalt-cms.com/ng-table/) in a web app based onto Typescript and AngularJS. I just have to display in a paged table some 50-500 items at most, all loaded at once from the server; so I'll what I need is client-side paging of my controller's data. Yet, no row is displayed when my data are loaded, unless I totally disable paging.
I made a plunkr which reproduces the issue:
http://plnkr.co/edit/0hCSMm03L8iHwePccm7x?p=preview
As I'm using Typescript (but there is no definition for this lib right now), I've shaped my example code like a typical outcome of the TS compiler, but apart from that, I followed the paging example in the ng-table website. Just click the button to fill the controller's data.
Update: by examining the ng-table source I managed to force the refresh by calling tableParams.total(...) and then tableParams.reload() after I have filled my data array; yet, there is no trace of this code in the samples so I'm feeling a bit wrong about this.

I used that too (i.e. update the total and reload the table). I reasoned that I had created an instance of a table and then I needed to update the instance with the new information. hth

Related

Bluebeam Scripting - Custom Columns, Markups, & Forms

BLUEBEAM AND ADOBE ARE BOTH PDF VIEWERS THAT HAVE A LOT OF SIMILARITIES
Hello, I am trying to figure out how to link a form answer to some markups (tools).
Custom Columns that are created In Bluebeam:
When I create a new tool I can manually fill out all of these custom columns under the "Custom" section within the settings of a tool:
Then I can save that tool and all of the data will be repeated for every copy of that tool. However, the circled columns in the first picture would be changing on every page. Which means I would have to make a new tool for every page. (FYI I would be making ~20 tools for this, so I would have to update 20 tools every single page ;_;) Therefore, I want to create a dropdown/textbox on each page with those columns. When a user fills out the dropdown/textbox, the markups are automatically updated with that info, which means the custom columns are also updated.
Does anyone have an idea of how to link these?
As of now I have been able to create a code that creates a popup if a user selects a certain drop down. This shows me that you can grab the data from a user. I just don't know how to connect that data to all the markups (tools). I know each markup has a special ID, but I'm curious if you can somehow link to the tools "subject" property to do this.
Bluebeam provided me with their JavaScript API if that is any help.
https://i.stack.imgur.com/yEdU1.jpg (I got this image from this post JavaScript Library with Bluebeam)
UPDATE
I found another document with potential accepted scripts for Bluebeam. Please note this one will require people to have Bluebeam Revu eXtreme
https://support.bluebeam.com/wp-content/uploads/2019/08/Bluebeam-Script-Reference-2018.pdf
This version actually has a markup section (which are the things I am more or less wanting to have the custom columns be updated for with the user input)
This document seems to be relevant only for the Bluebeam Script Editor. You can open it by looking in the folder for Bluebeam from your start window.
There are 2 issues I have with this though. I haven't figured out how to run the codes I have in the script inside of Bluebeam yet and I am curious if there is a way to not need the markupID's and/or a way to get them without having to download the markups
I've been lurking on stack for so long, I finally have something to contribute...
I work with custom columns and toolsets all the time. I think you're missing a basic understanding of what the markup list is. Or maybe I am. The markup list is the table of data at the bottom of Bluebeam, where you're trying to change column headings.
The markup list is basically a table of data, what you're trying to do will change the column headers per page, which would change it for all entries. From what I know about Bluebeam, these are static, just like any database or table in any application like Excel. If you need to have different column headings, you need to just stack them all and use what you need on each page or from tool to tool. Or create different profiles with different custom columns, but this gets messy having multiple profiles accessing a single document. Maybe java can help show and hide these per what's relevant on the page within the custom field. But... I think the java is limited to be used within PDF form fields and some basic PDF actions such as print, save, etc. I don't think the level of coding you're looking for exists within Bluebeam.
I use profiles to manage custom columns per process, not the actual tool. It's kind of unclear exactly why the custom columns can follow the tools without the actual profile though.
What I do to accomplish complex tasks is export the markup list and build something within Excel VBA to tabulate data and export reports with relevant information. I'm sure you could use basically any coding language to accomplish this after the table is exported from Bluebeam.

What is the difference between the BufferedStore and the BufferedRenderer plugin in Ext JS 6.2

I'm having a heck of time getting ExtJS 6.2 to work with infinite scrolling. I've been through their docs and examples many times and I can't get it to work. I'm wondering if I just am misunderstand how the BufferedStore works and how is it different from the BufferRenderer plugin.
Can someone please explain the differences between the two and which one would I use to get infinite scrolling to work with a oData Rest API using their Ext.grid.Panel class.
You'll need to use only the BufferedStore. The BufferedRenderer is instantiated automatically and applied to all grids.
BufferedStore controls the way the data store loads data. Instead of grabbing the entire data set, it loads data in 'pages' as required eg. when the data is requested. BufferedRenderer works on the grid view side, it basically renders a subset of grid rows - rather than rendering everything thats in the store connected to the grid.
In the old days of ExtJS :) - grids would load everything from the store, so potentially you might have thousands of rows. These would not be visible of course you would only see them when you scroll, but they were in the dom hence it would take time.
If you have a lot of data in the grid, you usually use both, but I have had situations where I want everything in the store, but not in the grid - eg if I need to sort or manipulate data in the store prior to rendering.

ui grid performance issue with celltemplates

I am using angular-ui-grid 3.1.1 with 25,50,75 records at a time.
Each cell is having different celltemplates e.g, onclick popovers, hover popovers, file download links, data with profile images, data in nested table etc.
Data is rendering fine in the grid, however for some seconds ui grid becomes unresponsive.
Also i have created an external column chooser. While choosing a column to show/hide, the grid becomes unresponsive for some seconds.(same unresponsive behavior seen with in-built column chooser provided by ui-grid)
Please suggest any fix for this.
sadly, we've had to abandon UI grid for these same sort of issues. The issue, however was not in UI-Grid but in angular lacking performance. In my case I built a grid with ReactJS that I created a angular JS directive wrapper to put over. Even by just putting angular HTML with lots of rows/columns it wasn't fast enough. The last thing you could try before swapping away from UI-Grid would be looking into row/column virtualization if you dont already have it enabled. Here is the option to test
columnVirtualizationThreshold
If you wont change the scope variables, try one-way-data-binding in your templates, it will give you some performance like:
<span>{{::variable}}</span>
IMPORTANT!: Be careful because it wont update data any more until you refresh the view.

Ext JS 4.2 primer

My company just bought a third party application which is based on the ext js 4.2. framework.
The software is closed source, but it is web based such that I can add a .js file to change the UI to my needs.
I want to add some controls to the rendered page. The software is showing IDs everywhere instead of text.
Example: "Issue created by: ID123". When I hover the field is get "ID123. John Doe". Ok, I am a JS ninja, so I can just add a field to the HTML DOM which will display "John Doe"in the correct spot.
I looked at the HTML code to get the correct control and see the the IDs are generated. The code I would write is prone to break with each new release of the third party software.
Now, since the is an Ext JS application I can probably solve the issue much more elegantly like adding a field not to the DOM directly but to the Ext JS container.
Question:
In Javascript I have a reference to the Ext JS app. How would I access the current view or viewmodel or model to query data and add a field?
Rough idea/Pseudo code:
var id = app.getCurrentModel.getValue("creatorID");
var name = myserver.getPersonData(id).name;
app.currentView.addLabelControl(name);
I googled a lot but all examples I found assumed that you are writing the ext js app and you are already in the controller or the view. But I only got the reference to the app.
Sorry for the newbie question :)
"App Inspector for Sencha"
For a quick glance over component hierarchy, you can use the Sencha browser plugin,
Find a certain ExtJS component programmatically
To quickly search ExtJS components or transform your findings into code, your main tool will be the browser console and the command Ext.ComponentQuery.query(xtype), e.g.
Ext.ComponentQuery.query("grid")
Ext.ComponentQuery.query("panel")
Ext.ComponentQuery.query("form")
You will then find in browser console an array of all components of that type. Select the right one, and check whether it has an id or itemId that is not auto-generated (everything like xtype-1234 is auto-generated). For form fields, the name attribute could be useful. Commands like
Ext.ComponentQuery.query("[itemId=ABC]")
Ext.ComponentQuery.query("[name=DEF]")
Ext.getCmp(id)
are far more readable and not as prone to side effects as Ext.ComponentQuery.query("panel")[12].
Most of the time, it can also be useful to think in tree structure. If you want a certain container which contains the only slider you see, trying
Ext.ComponentQuery.query("slider")
Ext.ComponentQuery.query("slider")[0].up()
could be easier than sifting through dozens or even hundreds of containers. Ways to traverse the component structure include up(xtype), down(xtype), nextSibling(xtype), previousSibling(xtype). If an xtype is provided, the next component of the corresponding xtype is selected; if it isn't provided, the next component is selected regardless of the type (e.g. direct parent, adjacent sibling).
Change anything you want.
You can extend, debug or modify any existing behaviour, including but not limited to ExtJS's own code, using a so-called override over any component, including the views or stores that make up this app. override makes a great search term for further information.
Or you can add new components to existing components, like a button to an existing form, from outside the app. For example, open sencha docs and then insert in console:
Ext.ComponentQuery.query("searchcontainer")[0].up().insert(1,{xtype:'button',text:'Test',handler:function(){Ext.Msg.alert('Test Button clicked');}});
You should then find a button on the top left, right of the Sencha logo. Click it.
Find existing controllers
For this, you have to find the name of the app namespace.
If it is e.g. MyApp, then MyApp.app.controllers.items contains the list of controllers. Controllers contain control logic, and the mapping between the components and the logic. When components are created, controllers attach their events to these new components. Many changes can and should be made in the component layer, because controller overrides are messy.
Find viewmodels
You're already done, ExtJS 4.2 does not support them.
Changing models
If you want to change models, be cautious: There is no supported function to add fields to a model. You can override the model prototype, and push more entries into the fields array. But if you have any model instances (records) already running around by that time, they are not updated and any existing warranty is voided.
That said, you find them in MyApp.model. You can e.g. get all fields of the Sencha Docs' Comment model using Docs.model.Comment.prototype.fields, or even push another field in.

Creating a Custom Angular Smart-Table

a little new here (and new with angular) so go easy on me. I'm attempting to create a nice looking Angular Smart-Table, that has a few specific functions:
Bootstrap Table
Search Feature
Add to Table Feature
Export in Spreadsheet Pasteable Format
Dynamic Pie Graph based on Table Data
I am able to create a simple table, but I am having trouble with bootstrap styling and adding the features I mentioned above. If someone could point me in the right direction with how to learn this stuff, I'd really appreciate it.
Smart-table is a plugin which gives you full control over what and how to display. You may use the table tag if you want, or you may choose to implement the view using a div.
First lets look at a plunker using smart-table: http://plnkr.co/edit/Idbc1JNHKylHuX6mNwZ6?p=preview
<table st-set-filter="customFilter" st-table="displayed" class="table table-bordered table-striped">
Here you may see the index.html displaying using bootstrap table. Also you may see a basic search feature (firstname and lastname) which comes built in and a couple of complex filters which lets you search using some more advanced rules than just text search.
When it comes to add to table, add a button in bottom to add a row, and use perhaps a modal dialog to input the required values. When saving, make sure you refresh the collection in the controller, there is a 2 way binding, so modifing collection will be reflected in your view.
For export and graphs, reuse the collection in your controller, this is not something which is part of smart-table, you should find different tools to help you with this.
Please note that if retrieving the collection is an asynchronous operation, you need to use the st-safe-src directive, look at the stSafeSrc header here: http://lorenzofox3.github.io/smart-table-website/#section-basics

Categories