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.
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;
}
});
Does anyone have more details on how to use Dynamic Fields in aslagle/reactive-table (I find the documentation confusing.
I'm trying to add a column with a check box, such that as a person clicks on a row, the check box is toggled.
This way a user can page through a table of records and select items, then when they are done selecting I'll save their final choices.
Right now I can only capture click events by row. But I cannot figure out how to save clicks from as a person moves from one page to another.
Here's how I create the checkbox, using a columncell template; I'm using a unique record id (i.e. 'rin') as a html element id.
<template name="checkboxCellData">
<input type="checkbox" id="{{ rin }}" checked="{{ clicked }}">
</template>
Heres the event toggle.
Template.regsUnderReview.events({
'click #reactive-table-1 tbody tr': function (event) {
// When the row is clicked get that rows data
var row = this;
let cb = document.getElementById(row.rin);
if (row.clicked) {
row.clicked=false;
//set check box when row is clikked
cb.checked = false;
} else {
row.clicked = true;
cb.checked=true;
}
}
});
I think I'm only saving the checkbook state in the DOM, and not the correct Reactive table location....I don't want to store the value in the database, because I'll have tons of users saving their selections...I'll only want cache their selections in the web browser and then on final seletion, save the IDs selected to a user settings database.
Meteor sessions may be what you're looking for.
You can initiate one with Session.set("yourKey", "yourValue"), and you can get the data by using Session.get("yourKey"). Sessions in Meteor are also reactive.
If you are using Meteor 1.3+, you will probably have to add the session package with meteor add session in order to use the above methods.
I have a grid I created in Gridx which lists a bunch of users. Upon clicking a ROW in the grid (any part of that row), a dialog pops up and shows additional information about that user and actions that can be done for that user (disable user, ignore user, etc.) - when one of these options is selected from the pop up, I want to DISABLE that row. The logic for getting the row, etc. I can take care of, but I can't figure out how to make a grid row actually "appear" disabled and how to make that row no longer clickable.
Is there a simple way to do this? If you aren't familiar with gridx, solutions that apply to EnhancedGrids or other Dojo grids are also appreciated.
Alright now that I have a little more information here is a solution:
Keep a list of all the rows you have disabled so far either inside the Grid widget or in its parent code. Then on the onRowClick listener I would write code like this:
on(grid, "onRowClick", function(e) {
if(disabledRows[rowIndex]) {
return;
}
// Do whatever pop up stuff you want and after
// a user selects the value, you can "disable"
// your row afterwards by adding it to the disabled
// list so that it can no longer be clicked on.
var rowIndex = e.rowIndex;
disabledRows[rowIndex] = true;
// This is just some random class I made up but
// you can use css to stylize the row however you want
var rowNode = e.rowNode;
domClass.add(rowNode, "disabled");
});
Note that domClass is what I named "dojo/dom-class". Hope this helps!
This is perhaps not exactly what you are seaching for:
If you want to hide one or more rows by your own filterfunction you could just add to these rows in the DOM your own class for nodisplay. Here I show you a function for display only those rows which have in a choiceable field/column a value inside your filterlist.
function hideRowFilter(gridId, fieldName, filterList)
{
var store = gridId.store;
var rowId;
store.query(function(object){
rowId = gridId.row(object.id,true).node();
if (filterList.indexOf(object[fieldName]) == -1)
domClass.add(rowId, "noDisplay"); // anzeigen
else
domClass.remove(rowId, "noDisplay"); // verstecken
});
}
CSS:
.noDisplay { display: none; }
So I can for example display only the entries with a myState of 3 or 4 with this call:
hideRowFilter(gridId, 'myState', [3, 4]);
Note that domClass is what I named "dojo/dom-class"
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.
I'm working on a ASP.NET web forms application. I have a four-column listview, bound to a datasource on pageload(), populated with contact names. One of the columns contains a checkbox. Users select a checkbox to indicate the corresponding contact should be processed in the next step.
The form also contains a button. When this button is clicked, the following code runs to process the selected contacts.
foreach (var x in lvPeople.Items)
{
chkSelected = (CheckBox)x.FindControl("IsLetterRecipient");
if (chkSelected.Checked)
{
// the person was selected by the user, do stuff here...
}
}
When I set a breakpoint on the line containing the IF statement, the breakpoint gets hit seven times (once for each row in the listview == seven checkboxes). However, the code inside the IF block never runs because .Checked is always False, regardless of the whether or not the checkbox is actually checked.
AutoPostBack, on the checkbox, is set to False. EnableViewState on the checkbox and listview is set to True.
What am I doing wrong? How do I get the .Checked status of the checkboxes?
Probably, when you bind the data on Page_Load you forgot to do:
if(!IsPostBack)
{
//bind the data to the list
}