How do I use Dynamic Fields in aslagle/reactive-table - meteor

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.

Related

Persist checkbox in gridview while custom paging

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.

How to Attach Events to Table Checkboxes in Material Design Lite

When you create a MDL table, one of the options is to apply the class 'mdl-data-table--selectable'. When MDL renders the table an extra column is inserted to the left of your specified columns which contains checkboxes which allow you to select specific rows for actions. For my application, I need to be able to process some JavaScript when a person checks or unchecks a box. So far I have been unable to do this.
The problem is that you don't directly specify the checkbox controls, they are inserted when MDL upgrades the entire table. With other MDL components, for instance a button, I can put an onclick event on the button itself as I'm specifying it with an HTML button tag.
Attempts to put the onclick on the various container objects and spans created to render the checkboxes has been unsuccessful. The events I attach don't seem to fire. The closest I've come is attaching events to the TR and then iterating through the checkboxes to assess their state.
Here's the markup generated by MDL for a single checkbox cell:
<td>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select mdl-js-ripple-effect--ignore-events is-upgraded" data-upgraded=",MaterialCheckbox">
<input type="checkbox" class="mdl-checkbox__input">
<span class="mdl-checkbox__focus-helper"></span>
<span class="mdl-checkbox__box-outline">
<span class="mdl-checkbox__tick-outline"></span>
</span>
<span class="mdl-checkbox__ripple-container mdl-js-ripple-effect mdl-ripple--center">
<span class="mdl-ripple"></span>
</span>
</label>
</td>
None of this markup was specified by me, thus I can't simply add an onclick attribute to a tag.
If there an event chain I can hook into? I want to do it the way the coders intended.
It's not the nicest piece of code, but then again, MDL is not the nicest library out there. Actually, it's pretty ugly.
That aside, about my code now: the code will bind on a click event on document root that originated from an element with class mdl-checkbox.
The first problem: the event triggers twice. For that I used a piece of code from Underscore.js / David Walsh that will debounce the function call on click (if the function executes more than once in a 250ms interval, it will only be called once).
The second problem: the click events happens before the MDL updates the is-checked class of the select box, but we can asume the click changed the state of the checkbox since last time, so negating the hasClass on click is a pretty safe bet in determining the checked state in most cases.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
$(document).on("click", ".mdl-checkbox", debounce(function (e) {
var isChecked = !$(this).hasClass("is-checked");
console.log(isChecked);
}, 250, true));
Hope it helps ;)
We currently don't have a way directly to figure this out. We are looking into adding events with V1.1 which can be subscribed to at Issue 1210. Remember, just subscribe to the issue using the button on the right hand column. We don't need a bunch of +1's and other unproductive comments flying around.
One way to hack it is to bind an event to the table itself listening to any "change" events. Then you can go up the chain from the event's target to get the table row and then grab the data you need from there.
You could delegate the change event from the containing form.
For example
var form = document.querySelector('form');
form.addEventListener('change', function(e) {
if (!e.target.tagName === 'input' ||
e.target.getAttribute('type') !== 'checkbox') {
return;
}
console.log("checked?" + e.target.checked);
});

Add new row when previous "new row" is saved in Kendo Grid

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.

How to find out the selected row of an html table

I have made a html table in asp.net. The user clicks on a row and the corresponding page for that record is opened. How do i know which row of the table has the user selected?
http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/
$(document).ready(function() {
$('#example tr').click(function() {
alert('clicked');
});
});
How to tell which row number is clicked in a table?
without jquery
Adding an onclick event to a table row
http://jsbin.com/ivobe
try to set custom attribute of id to row(html) by assinging database id value to it.
by clicking on that row , you can get access that custom attribute by $(this).attr('your_custom_attr') and you can use that value to make ajax GET call.

KnockOut JS - Binding a button to an item in a collection

This is a slightly tricky question to put into words. Basically I've been trying to build a shopping cart page in KnockoutJS based on one of the examples in the the KnockoutJS website (http://knockoutjs.com/examples/cartEditor.html). However I wanted to make use of jQueryUI sliders so that I could adjust the values of each product in my cart.
This I've managed to get working OK and I can add a product (in this case Motorcars) to my basket and adjust the value and also increase/decrease the value depending on whether the car has a sports kit or is a convertible.
http://jsfiddle.net/FloatLeft/UjRrJ/
However, instead of adding a product (the "Add Car" button) and then choosing the car type, I want to be able to add a specific type (eg BMW, Ford) to the cart at the click of the button (eg clicking on the "Add BMW" button - this does nothing at the moment).
However my simple brain cant work out how to bind the button to a specific car in the collection. I think I can retrieve the car by creating a function that iterates over the collection and finds the car that has the type that matches a string, e.g.
function GetCar(carType) {
for (var i = 0; i < sampleCars.length; i++) {
if (sampleCars[i].Type == carType) {
return sampleCars[i];
}
}
}
So basically I want to know how I can bind the click event of "Add BMW" button to a particular car in the collection and have that added to my cart.
If you plan on making multiple buttons, you can create a function which can create your event handlers which can take in a car type.
self.addSpecificCarLine = function (carType) {
return function () {
var car = ko.utils.arrayFirst(sampleCars, function (car) {
return car.Type === carType;
});
var cartLine = new CartLine();
cartLine.car(car);
self.lines.push(cartLine);
};
};
Then you can bind to the handlers like so:
<button data-bind='click: addSpecificCarLine("BMW")'>Add BMW</button>
Updated fiddle

Resources