ExtJS.Grid editing with lookup table - javascript

I'm developing a "simple" CRUD with ExtJS.Grid. This grid will refere to a DB table. I'm using this example as basis.
But I can't figure out how to implement the "Light" column lookup. In the table to be edited, it's an int FK refering to another table, where the text is stored.
I don't need to edit the lookup table. What I need to do is query it (I could provide its data as a static JSON, no need to AJAX query it) so that the main table's FK is replaced by the text.
The editing row must show it as a select/dropdown (as in the example). And when user sends a Create/Update operation, it must send the chose item's ID so I can write it to the table.

There are several possible approaches:
column with combo editor would link to foreign id via dataIndex. This approach is very simple provided that you can load the complete combo store, i.e. it is not too many records. Also, you must ensure that the store is loaded early enough and to provide a column renderer that would display texts, not ids.
if you need a remote store for combo then another approach is better. You deliver from the server both FK (numeric id) and the corresponding text for each grid record, you link combo to the text, not to the id, and you provide edit event listener that updates both id and text when users selects from the combo. This approach is described in details together with the code in Remote Combo in ExtJS Grid Example

Related

How to create page items with dynamic action defined on other item in page in oracle apex

I have a page with multiple text fields and select lists with the list of values. What I want to do is defining a dynamic action on one of the select lists that display numbers and returns same numbers and according to the selected number, I want to create or duplicate another select list in an amount of selected number. Then, after the end-user finish his work, I want to be able to take the selected values of select lists that are created within the dynamic action within the on-submit process.
Example:
In short, I want to create a dynamic action that duplicates the instructor list as many as the selected number of the number of sections list. How can I accomplish this?
If I understood what you are saying, you'd rather switch to a tabular form (or interactive grid, depending on Apex version you use). Using it, you can "Add row" as many times as you want (which would be your "Number of sections") and use the same LoV (i.e. Select List) in every row.
As far as I know (which really isn't that much), Apex isn't capable of doing that "as is". Maybe you can accomplish it the way you want it using some other techniques (blindly guessing & mentioning: JavaScript, Ajax, jQuery or whatever you might need).

JAVASCRIPT WEB UI: Handle new temporary elements before server returns

I'm looking to create a snappy web-UI where a user can add a row below the currently active row in a grid of elements just by pressing enter. The user could in theory press enter several times to create multiple new rows below. Every row contains an input field. Each row represents a record in my database.
Now I need to handle the fact that one or more elements is added instantly to the ui, but the id of every corresponding record is set server side later. Once we have the id, the user may already have entered something in the ui-row.
I'm thinking that one solution would be to add a virtual "ui-id" -field to be created on the fly at UI runtime. The UI-ID would not be persisted in the database but only used for ui-reference. Every row in the ui, new and old, would get a "ui-id". As soon as the server returns the id, it would be attached to the new row.
What would be another good way of handling temporary new rows that yet haven't recieved an id from the server?
Waiting for the server before adding the row in the UI would not be an alternative.
You can go for jQuery Grid or handsontable.
Try :
http://paramquery.com/demos
You have option to save data too with handsontable. It is an exel like UI. Which has all the features you discussed here.
Please go through thourougly :
http://docs.handsontable.com
http://docs.handsontable.com/0.19.0/tutorial-load-and-save.html

Slickgrid id column

Is there a way to bypass the necessity for an ID column? My goal is to display 100,000+ results dynamically. Currently, the only way I have found to do this is to create an "id" column on the table and then loop through it (which is quite costly). If this is the case, is there a more efficient way of doing this? How can I hide the column when the grid is displayed?
Since the usage of a dataview is causing the unique id requirement, then using a simple array as your data would suffice in removing the restriction.
If the advanced functionality of a dataview is required then you have the option of providing a field/property within the setItems call that will provide/override the id field (the field must be present within each data object and have uniqueness across all the data elements). If you cannot guarantee those two conditions, only two options are left.
customize the source code of the dataview to provide a UUID during the processing of updateIdxById
manually iterate the data and inject a UUID (what you are currently doing)
Regarding the column displaying:
Only those fields for which you have provided a column definition are rendered within the grid. Thus, as long as you don't provide the field in a column definition it will not be rendered. You can see in this example that each data object contains an id property but none of the elements of the columns array has a field that points to that property, as such it does not appear as a column.

How would I implement a cascading dropdown list that reads from multiple sql tables? C# MVC

I'm building an mvc web app using C#. The place I am currently stuck is trying to add a cascading drop-down list. I have seen several articles on this, however my usage varies enough that I'm not sure how to implement it.
My information to populate the dropdown lists is coming from a series of sql tables. The first dropdown should show the information from one table (which lists available tables). When the user selects an option, a second dropdown list should be created and filled with the information from the chosen table.
How would I implement this cascading dropdown list which could read from any number of different tables?
I believe this will involve AJAX/javascript which I'm not very familiar with.
To better explain my data structure, this is an application for an administrator to keep track of useful information. There could be several tables such as Employees, CompaniesWorkedWith, ProjectsBeingDeveloped, BudgetItems, etc... Then a final lookup table that would contain these table names. The first dropdown would be populated with information from this lookup table. Then when the user selects an item (such as Employee) the second dropdown would grab the information from the appropriate table and display it in a dropdown. Then the user could select and item (such as an individual employee) which will then grab the details of that item and present it to the user. That last part should be easy. I'm just confused on how to get the dropdowns to cascade through multiple tables. It should be dynamic that someone can easily go in and add another table to the lookup table and have it function properly.
You need to implement callback's to update the data sources for the cascaded controls. Just use your update panels appropriately to prevent full page post-backs. If you're using a framework such as DevExpress, Telerik or ASP.NET then there's lots of options and sample source code for this exact thing.
http://www.codeproject.com/Articles/730953/Cascading-Dropdown-List-With-MVC-LINQ-to-SQL-and-A
EDIT: I realized you're second data-source depends on a second more dynamic data source. To do this I would create my own data-source implmenting IEnumerable. I have a sample of something that may help somewhere... I'll look for it.
EDIT 2:
Okay, I took a look at code similar to this (not quite the same) but here's how you can do it:
You'll need a generic container for your values for your second/third/etc. dropdown lists. This might be a List<string> or a List<MyGenericClass> with whatever properties you are filling out to represent your columns for each row in the dropdown.
Use SqlConnection, SqlCommand to iterate through the results and populate the List (or your own class that implements IEnumerable).
Assign the IEnumerable object to your dropdown list datasource.

Pass a whole html table back to server and replace the database table?

I met a problem like this. Here is the scenario: if I have a database table A, which contains several columns, for example. Once the server (PHP script) pass the database to web client, it's rendered into a HTML table. Now, here is some requirements for the client side. The user will be able to add/delete several rows from the HTML table, in addition, they will also be able the change the row order. If we could finish the client side with the help from some jquery plugin (for example: http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/). Now, my question is, how could I pass this information back to server? Because there are new rows and deleted rows, the original table row order (like the plugin tableDnD.serialize function is not sufficient) is not enough.
Here is my solution: pass the whole HTML table back to server, and then replace the whole database table with the information. In that case, how to pass a potentially big HTML table back to server? For this question, I found the answer like this:
Iterate through HTML table using jQuery, converting the data in the table into JSON
Basically,convert the whole HTML table into json format and pass it to server side to replace the whole table.
Is there a better solution than that? Any suggestions would be appreciated!
IMHO, if you are building a JavaScript-only solution, there is no need to pass the whole HTML table back to the server.
When loading the table initially, set the id attribute to the unique identifier of the row from the SQL table.
When changing data (remove or add a row or change row contents), save the ids into an array.
When submitting data once changed, submit only the rows which were changed.
Of course, you may need to tweak this a bit, but it's just a general idea. For example, one tweak to do is to add the ids of removed rows to a separate array. You can then pass it separately to remove the matching rows from the database.

Categories