I’m working on a hack for table support (one level deep) using draft.js
I have one requirement: All existing editor functionality needs to also work inside this table
I present three choices to you, please pick one and explain why you did so:
Nested Editors (One for each cell) - I’m guessing I’d have to implement selection handling between editors
Table cells as enitites, wrapped in a Custom Block Component that renders the table and manages columns and rows. - It'll be costly to develop this, since I'll need to interfere with a lot of event handling and rendering.
Is there another way that you think could work better?
Related
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.
I have a material-table component where I am rendering a nested materiel-table in the detail panel of each row. I would like to know if there is a way to include detail panel material-table rows in the functions offered by the package. I am mainly interested in the selection feature for now, but will likely need the same support for other functions like filtering, search, etc...
Now I know that Tree Data allows this since all rows are part of the same table. But I need to be able to do it with using the Detail Panel.
NB: For more clarity, here is a code sandbox I found with the nested table functionality.
So how would one go about adding their custom select function to a material-table, such as to include selected rows inside nested material-tables ?
The way to control the row checked state outside of the table, meaning without using the provided check box inputs, is demonstrated in a demo created after I asked the same question in the material-table-core repo. It's pretty straight forward and should help anyone trying to do the same : https://material-table-core.com/demos/selection/outside-of-table/
I’m working on a hack for table support (one level deep) using draft.js
I have one requirement: All existing editor functionality needs to also work inside this table
I present three choices to you, please pick one and explain why you did so:
Nested Editors (One for each cell) - I’m guessing I’d have to implement selection handling between editors
Table cells as enitites, wrapped in a Custom Block Component that renders the table and manages columns and rows. - It'll be costly to develop this, since I'll need to interfere with a lot of event handling and rendering.
Is there another way that you think could work better?
I have a solution for tables in draft-js that works pretty well for us. I do not use separate editors for each cell, just regular EditorBlocks that are all part of the main editor tree. There's a working example here https://draft-js-rte-evanmorrison.netlify.app/ and the repo here https://github.com/EvanMorrison/draft-js-rte
I have a "TableCell" custom block type that primarily just renders a standard EditorBlock, but uses React.createPortal to render into the applicable table cell.
The information necessary to recreate the table structure is stored in the metadata of the first cell of the table.
When rendering the first block, I render its EditorBlock component wrapped in the full DOM structure of the table. The <th>/<td> tags for all but the first cell are empty, but are given a data attribute corresponding to their position in the table.
Then I use ReactDOM.createPortal when rendering each of the subsequent TableCell blocks into the correct position in the table.
As far as draft-js is concerned it's just rendering blocks in the usual linear fashion. This makes editing, managing selection state, & the import/export of html no more difficult than for any other block type for the most part. Though you do have to take precautions with selections and editing that cross into or out of the table.
I am using nested Editors in each cells (option 1). Implementing style functionalities inside each cells is much easier. You can use the functionalities you've already use in the 'main' Editor.
There are two main components in my implementation of table. The Table component, a custom block component. And inside each cell of that component is the Subeditor (a nested Editor component). The EditorState for each Subeditor is stored in a Redux store.
Selection handling between editors is quite a handful though.
I've created a database-driven hierarchy table with 3 hierarchy levels. It works almost exactly how I want it to, but the javascript code that drives its functionality is UGLY. I would like to re-write some of it, but I don't quite know how. I imagine I'll have to use recursive functions, but there are some strange business rules that may make it more difficult than I imagined. Can you make any suggestions to simplify my current code (in particular, the ActivateRow() function)? See fiddle.
Note that there is some funky use of hidden fields due to ASP.NET Web Forms postbacks and losing input values, but there are some useful data-attributes written into the HTML such as data-region-id, data-subregion-id, data-market-id, and data-hierarchy-id. the main requirements are below:
There are two tables - the first is linked to the second, so all actions on the first table should be carried out on the second table as well (though the second table is slightly different).
Three levels of hierarchy. The highest level (Region), a middle level (Sub Region), and a final level (Market)
Row activation enables all controls in a given row. If the activated row is a Sub Region row, it deactivates its parent Region row controls and its sales values sum up to the Region level. This does not apply to activating a Market row.
Similarly, row deactivation should disable and clear all controls within that row. If the row is a parent row, it should clear all children rows and disable their controls as well.
Deactivating all children of a parent row should deactivate the parent row and clear all parent row controls.
Surely, there's a better alternative. Am I reinventing the wheel? Is there anything out there that I could use to improve my spaghetti code? I realize this isn't the best question for Q&A format - is there somewhere else I should ask my question?
It is not entirely clear what you are doing but from what I gather you have some kind of table you are filtering.
Also, you are using ASP.NET webforms.... so sorry for you.
I would not use any kind of form binding controls offered by ASP WebForms, because it is now obsolete, incorrect and very painful.
Instead, create an AJAX enabled page [WebMethod] that returns all the data or filtered with a parameter, what ever, in JSON (Because JSON is easier to read and debug, and much faster than XML)
Go and find the jQuery plugin DataTables. Everykind of functionality is built in and extentable, it works great, super efficient client side, with varios filtering and searching capabilities.
You either create a new model on the Server side and remap the data server side, or dump your existing model and remap it on the client, either way, you just plug JSON data into datatables.
Saving back to webforms is slightly more tricky (compared to MVC/Razor) because you have to take the String and deserialise it to your model, its a few extra lines but I do this all the time and you can carry on with your business logic.
I am developing a webform which needs to have LineItems ie. some textboxes, calendar,dropdowns etc in a row which can be added dynamically on button click.
An example from my previous works:
I developed this using a GridView and maintained the state of controls using DataTable and ViewState on Click to Add link button.
The problem with this approach is that it becomes very slow as number of controls increase.
What are other alternatives? I know I can use repeater but I am not sure how much difference is that gonna make? I would not want to explore new way if the performance improvement is like 5%.
I can use jquery and html client side elements but then maintaing state would be a headace (I cant avoid postbacks , there are already many drop downs and fileuploads on the same form that cause postback ).
OR if there is an easy way to maintian the state of HTML elements?
This is not opinion based question since , performance and be percieved and measured.
I can think of several options:
Implement paging/limiting so customers can only see N rows at a time
Implement master-slave views: split one large table in two. Master table only lists items and slave table only show details for the currently selected row
Search for other jquery plugins, perhaps there are newer/faster plugins available (sorry couldn't offer any better alternatives, but they might exist)
You may find good answers at UX design web-site, such as How To Display Too Much Data, tables with lots of columns, Best way to display more table columns and rows than I have room for?