I have a KendoUI grid with a column named "Status" :
Problem
Upon changing the value of a cell, I trigger the saving and update the grid with new data. The rows are updating but the status column is not re-rendering.
More details about the issue
The 1st row is the filter and the remainings are the actual rows.
Filter applied => Where status = Paid.
I've modified row 3 to set the status to "Not Paid".
I've triggered the Save to the backend database, then fetch all the rows where Status = Paid and then re-assign the new data to the kendo-grid.
Expected result
We have one less row in the table because the status of row 3 has changed.
All the rows in the table have "Paid" status.
Obtained result
One less row in the table. => Good
The row 4 before is now Row 3. => Good
The status of Row 3 (ex row 4) is still "Not Paid" even though in the data obtained it is "Paid". => Error
Additional notes
The html code for the column is below.
On cell value edit, the changes are saved in a dictionary on client side. When the client clicks on the save button, all changes are sent to the backend.
Assigning the new data to the kendo-grid
The table is bound to this variable which gets updated when there're new data.
<kendo-grid
[data]="this.dataAggregative.data"
...>
...
</kendo-grid>
The template for the column
<kendo-grid-column
[editable]="true"
field="status"
title="Status">
<ng-template kendoGridFilterCellTemplate let-filter>
<drop-down-list-filter
class="k-filtercell-wrapper"
[filter]="filter"
[data]="statusFilterEntries"
textField="text"
valueField="status">
</drop-down-list-filter>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<div class="toolbar-container container">
<kendo-dropdownlist
[data]="statusFilterEntries"
textField="text"
valueField="status"
(selectionChange)="statusSelectionChange($event, dataItem.id)"
[value]="statusFilterEntries[dataItem.status == statusEnum.NotPaid ? 0 : 1]">
</kendo-dropdownlist>
</div>
</ng-template>
</kendo-grid-column>
Issue fixed by updating the model locally before pushing all the changes to the backend.
Related
I am trying to add rows to a grid using dhtmlx in java, following is the code.
var combinedColumn = "displayText";
displayOptionsGrid.addRow(selectedID, [ displayOptionsGrid.getRowsNum() == 0 ? 1 : 0, combinedColumn]);
What the function is supposed to do is that if the number of rows is zero it adds the first row as checked and then the rest as unchecked. The error which I am facing is, I delete the rows one by one and try to re-add the rows in the same session with some other row at first than the row I added previously, but can't. I can only add the row which I added first previously as the first row.
When I use grid.clearAll() it works fine. Can someone tell me the exact thing we do in clearAll() which we don't in deleteSelectedRows() in dhtmlxgrid. Thanks.
Please, check your selectedID attribute.
Note that each row should have a unique id, so adding a row with the id existing in your grid will break the grid.
I have a checkbox on a tabular form. I need to be able to hide it if the submit date is not filled in and show it when a date is there. Once the checkbox has been clicked, I need to update another field based on the checkbox being clicked or when I hit the update button. is this possible on a Oracle Apex tabular form in version 4.2?
You can create dynamic actions on tabular form fields, but you need to know some Javascript / jQuery / DOM stuff as it can't be done declaratively as it can with page items.
As an example, I created a simple tabular form on the EMP table:
Using the browser's Inspect Element tool I can see that the HTML for the Ename field on row 3 looks like this:
<input type="text" name="f03" size="12" maxlength="2000" value="Ben Dev"
class="u-TF-item u-TF-item--text " id="f03_0003" autocomplete="off">
The relevant bits to note are the name "f03" and the ID "f03_0003". For all tabular form fields, the name indicates the column, and is the same for all fields in that column. The ID is made up of the name plus a string to represent the row - in this case "_0003" to represent row 3.
Similarly, the Hiredate fields are all named "f004" and have IDs like "f04_0003".
Armed with this information we can write a dynamic action. For example, let's say that whenever Ename is empty then Hiredate should be hidden, otherwise shown. In pseudo-code:
whenever an element with name "f03" is changed, the element with name "f04" on the same row should be hidden or shown.
So we can create a synamic action with a When condition like this:
Event = Change
Selection type = jQuery selector
jQuery selector = input[name="f03"]
i.e. whenever an input whose name is "f03" is changed, fire this action.
The action performed will have to be "Execute Javascript code", and the code could be:
// Get the ID of this item e.g. f03_0004
var this_id = $(this.triggeringElement).attr('id');
// Derive the ID of the corresponding Hiredate item e.g. f04_0004
var that_id = 'f04'+this_id.substr(3);
if ($(this.triggeringElement).val() == "") {
// Ename is empty so hide Hiredate
$('#'+that_id).closest('span').hide();
} else {
// Ename is not empty so show Hiredate
$('#'+that_id).closest('span').show();
}
Because Hiredate is a date picker, I needed to hide/show both the field itself and its date picker icon. I chose to do this by hiding/showing the span that contains them both. This code could have been written in many different ways.
You could apply similar techniques to achieve your aims, but as you can see it isn't trivially easy.
I have an app with a KendoUI DropDownList that is populated with a list of tables from a database and a grid that is initially set with a columns atrribute of an empty array:
...
columns: []
...
The intent is to select a table from the list, send the table name to the server and have the server return JSON data containing the column names and the data from a "SELECT * FROM table" query. The data comes back as expected and the first time through I can use it as follows where "self" is just a reference to the grid in my view/model:
self.columns.removeAll();
for (var i = 0; i < joOutput["Cols"].length; i++) {
var col = { title: joOutput["Cols"][i], field: joOutput["Cols"][i] };
self.columns.push(col);
}
After extracting my data and assigning it to the grids datasource, the grid displays correctly with the correct column headers and data. However, when I select another table from the list and receive data from the server, the grid display does not update, even though it seems the grid columns have been updated though the execution of the above code. The end the result on screen is the column headers are the names of the columns from the first grid and the number of empty lines from the rows returned from the second query.
This dynamic manipulation of columns seems to be very difficult to do as seen by the forum post at http://www.kendoui.com/forums/ui/grid/dynamically-add-new-column.aspx but that post is over a year old now and I would've hoped some progress would've been made on this now, especially in light on the recent webcast on March 20 for the new release. So I guess the question remains: Is what I'm after even possible or am I SOL? Thanks.
You cannot dynamically change the columns of the grid after initialization. You can however create a new grid instance. Don't forget to call the destroy method of the old grid.
I am using PowerBuilder classic 12.5
am having difficulties in inserting, editing, creating and printing reports.
i have a datawindow, dw_NewEmployee with dataobject, d_newrecord which is update-able.
should i use the columns to insert records through the columns or i
create single line texts on the window object
is the itemchanged event used on columns and rows on dataobject or
on single line texts... I am having trouble figuring out how to implement validation rules.
please give me an example to validate employee ID_Number
I see that you seem confused about the datawindow usage.
Let's try to summarize:
you create a new datawindow d_newrecord (say it is a grid) based on a sql select in your database, say select id_number, name from employee.
in the detail zone of the datawindow (that will be repeated for each record at runtime but that is only once in design), you need to put one column object for each column (here you will have id_number and name) these objects are both to display existing data and receive user input for editing data and inserting new records.
don't forget to set the Rows / Update properties if you need to make the dw updatable.
in the header zone of the datawindow you can have a static text associated to each column that is just here to display the column name, it does not concern table data.
in some window object, you place a datawindow control dw_newemployee where the content of the datawindow will be painted, you set d_newrecord as its dataobject.
you need to set at some point the transaction object of the dw, for example in the open() event of the window:
dw_newemployee.SetTransObject(sqlca)
dw_newemployee.Retreive() //if you are using some retreival arguments, don't forget to include them here
When you want to insert new data in your table (for example with a window button "add"), in the clicked() event of the button you call dw_newemployee.InsertRow(0) to insert at the end.
The ItemChanged() event will be triggered after one cell will be modified, you will be given the row, item (a dwobject) and new data. By choosing the returned value of the event, you can accept or reject the new data.
Here is an example for a field validation in itemchanged() event:
long ll_return_code = 0
string ls_column
ls_column = lower(dwo.name)
choose case ls_column
case "id_number"
if long(data) = 42 THEN
messagebox("validation error", "You cannot use 42 for the ID")
ll_return_code = 1 //reject and stay in cell
end if
case "name"
if data = "foobar" then
messagebox("validation error", "Do not use dummy value...")
ll_return_code = 2 //reject but allow to go elsewhere
end if
end choose
return ll_return_code
What I am doing is this. I have a basic table with a button at the end of each row for "selection" of that row for further actions. My action method has two simple parameters I'll call them id1 and id2 so:
public ActionResult DoSomething(int id1, int id2)
id1 will be bound from a hidden form field outside the scope of the table, this works fine.
id2 needs to come from a hidden column from an individual row in the table depending on the button clicked representing the row that requires further processing. Make sense?
When the form posts back to the action method, id1 is set perfectly, no problem, but id2 is always the value of the hidden column from row 1. How do I detect/make DefaultModelBinder pull the hidden column value from the row from which the button is being clicked?
Thanks for the assist as I am actively trying to figure this out.
Here is the hidden table column that is rendered per row that I want to capture it's value on the post from the row from which the button was clicked:
<td style="display:none;">#Html.Hidden("id2", viewModel.id2)</td>
You could use simple hyper links instead of forms on each row. Like this:
#Html.ActionLink("link text", "DoSomething", "SomeController", new {
id1 = viewModel.id1, id2 = viewModel.id2
}, null)
which assuming default routes should generate the following link:
/somecontroller/DoSomething?id1=123&id2=456
and when you click on it the DoSomething action will be invoked with correct parameters.
If you want to do this with POST you will need multiple forms, one for each row:
#using (Html.BeginForm("DoSomething", "somecontroller"))
{
#Html.Hidden("id1", viewModel.id1)
#Html.Hidden("id2", viewModel.id2)
<input type="submit" value="OK" />
}