I have an invoice form . As you know it has Header and Line Items . When user creates invoice there can be any numner of line items.So users can click "Add Item" to add a new item and all of them needs to be saved together when user save the item.
I think I should use Grid view inside update panel with a footer row to add a new row. And save it to a table in session.When they click save invoice I can get the table from session and save those line items.
Let me know for any better approach than this.
I would create custom forms and add button that will add another line of items.
You can use jQuery append to insert div to existing container that contains all the normal fields:
$(document).ready(function() {
//dynamicId for text box's id
var dynamicId = 0
//event handler for Add button
$('#btnAdd').click(function() {
dynamicId += 1
//append <div> elements inside existing container which has
//the all fields
$('#invoiceItemsContainer').append('<div><input type="text" id="txt' + dynamicId + 'runat="server" /></div>');
});
});
When the form submitted, you can extract all the data from the text box. You do need to come up with a way to check how many line of items are on the list, but this is easy enough for you to figure out.
Related
I have an Appmaker form to create a record that includes a many to one relation to another table. By default, the form creates a dropdown to select the related record from a list. This works fine, but I need to barcode scan (or type) the item name rather than select it.
When I change the dropdown to a text box and bind it to the related table, it greys out and becomes unusable when I preview it. (I get a circle with a line through it when hovering over.)
When I keep both the dropdown and the textbox on the same form, I can select a record from the dropdown and it populates the textbox. After that, the textbox becomes editable and works as desired.
How can I remove the dropdown and make the text box editable?
The problem is that when you bind the textbox to a relational field it is looking for a record not just a value.
My thought is you are going to want to create a text box where you enter/scan in the value and leave it unbound. then in probably the onValueChange event write a script to query the item in the related table that you are trying to relate and set that equal to the field you are trying to edit.I don't know that this code will work haven't tested it but should get you going in the right direction:
var ds = app.datasources.Parts;
ds.query.filters.Part._equals = newValue;
ds.load(function() {
if (ds.item === null) {
alert("Part not found!");
widget.root.descendants.FieldPart.value = null;
}
else {
widget.root.descendants.FieldPart.value = ds.item;
}
});
I know how to add a button to a datagridview. What I am having a problem with is changing the text displayed based on whether a associated record exists in another table. I would like to change the text on the button to "View SR" or "Add SR" depending on if a service request exists for the record. if it even possible, how I would go about this ?
You just need to capture the exact cell and cast it in a Grid View Button Cell to adjust the value displayed. Following is a tried solution:
if (SomeTrueValue)
{
((DataGridViewButtonCell)dataGridView1.Rows[0].Cells[0]).Value = "Hello";
}
else
{
((DataGridViewButtonCell)dataGridView1.Rows[0].Cells[0]).Value = "World";
}
I have 3 tables in Cloud SQL: person,tag,person_tag
In Appmaker, I have a form widget (datasource:person) and a list widget (datasources.person.relations.tag_id) displaying text bound to datasource.item.name. This works great, showing only the tags assigned to the person selected.
I've placed a delete button on the tag list item so I can remove the tag from that person's record. However, I can't figure out how to set the onClick event to delete the relationship (person_tag record) instead of the tag itself (from the tag table). Ideas?
App Maker will generate this code to delete current item :
widget.datasource.deleteItem();
But as it is mentioned in the question we don't need to delete the item, but break the relation between the two records. In order to do this you can modify array of items and App Maker will intelligently sync your changes:
// Here widget is delete button and
// widget.parent will be list's row (or grid's cell depending on the UI)
// and by getting its position in the list/grid
// we will get index of datasource's item (relation) we need to break
var row = widget.parent;
var index = row.childIndex;
// remove one item at index, this will force
// App Maker to break the relation
app.datasources.Person.item.Tags.splice(index, 1);
You can find this pattern in Vendor Ratings template
Here's how I did it: Given a many-to-many relationship between Person and Tags, select the currently selected item from both tables. Find the index of first item within relational array, then remove it.
var person = widget.root.descendants.Table1.datasource.item;
var tag = widget.root.descendants.Table2.datasource.item;
personIndex = person.Tags.indexOf(person);
if (personIndex !== -1) person.Tags.splice(personIndex, 1);
I have a created a gridview and added a checkbox in item template. This grid has few columns along with DataKey (primary key). Due to performance gain, this grid will fetch the next set of recrods on each page change based on the page number click. So that is done.
Now when user selects a checkbox in page one and then go to page 2 and coming back to page one, then user will not see the checkbox checked as the user did earlier.
So is there a good way to persist the checkbox when user move page to page?
This checkbox be used as a flag to select the rows that can be deleted later by a button outside the grid.
Since you receive a new set each time a paging is selected, I suggest the following approach:
Create an array[] object via javascript that will add to list the datakey whenever a checkbox is selected and in turn remove it if the checkbox is deselected. Something like this:
var selectedDataKeys = [];
$('.checkboxclass').on('change', function() {
// Considering you assign the data key as id for the checkbox otherwise implement a way to retrieve the id.
var dataKey = $(this).prop('id');
// Determine if the dataKey is in the selected data keys array
var isContained = (selectedDataKeys.indexOf(dataKey) > -1 );
if($(this).is(':checked')) {
// If is contained is false - add to the array
if (!isContained)
selectedDataKeys.push(dataKey);
} else {
// If is contained is true - remove to the array
if (isContained){
selectedDataKeys = $.grep(selectedDataKeys, function(value) {
return value != dataKey;
});
}
}
});
From this point on the client user will have an active list of selected items, now its up to you to use that list to manipulate your grid display page. Either modify the display on document ready by comparing all the item on the grid display with the selectedDataKeys array or sending those keys and do the comparison server side.
Hope this helps.
I have created a kendo.data.dataSource without transport (only data with model and fields) with success, and I am able to bind it to the KendoUI Grid on my page.
After loading, the grid is empty. I do calling the net line to add a empty data item in the grid so the user can enter data directly in the grid (inline mode).
$("#divid").data("kendoGrid").addRow();
This all works.
But after the user finished the input and hit the OK/Save button, I like to add a new empty row immediatly, below the previous added row. I try this during the grid function Save:
save: function(e) {
$("#divid").data("kendoGrid").addRow();
}
But the previous row with inserted data disappear and a new empty dataitem isn't added.
Also trying this same way during the datasource event 'change', but with the same behaviour.
My question is, what I doing wrong or what is the best way to add a new empty row to the Kendo Grid when user hits the OK/save button of a current inine editing row.
If you want to save multiple record at a time, you can go for batch editing. You can bind a keypress event to create new row as well. Try this:
$(document.body).keypress(function (e) {
if (e.keyCode == 13) {
var grid = $("#grid").data("kendoGrid");
grid.addRow();
}
});
13 is the value for enter key.