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
Related
I want to have an input widget that is similar to the built-in multiselect input widget but where instead of checks a number is given, say for example in the pizza order app example, one would be able to pick 3 for the first topping, 0 for the second topping and 1 for the third topping.
Since input widgets are not modifiable and display widgets do not have the "value" field, I thought I could do it through the "submit" button event, but that uses widget.datasource.createItem() which is quite opaque and I don't know how I would get the data from the display widget and integrate it to create an item.
Based on your requirement, I created a simple implementation using a list widget and a client-side calculated model. I also used a multi-select widget to show the dynamic mapping of selections to the actual input widget.
Editor View
From a selected list of toppings, the calculated model will be populated and render the sublist of toppings together with an input field for the user to enter the number of desired toppings.
The multi-select widget is bound to a parameter in the datasource.
Here is the query function to populate the list onValueChange.
function generateTopingList(query,recordFactory,callback) {
var toppingList = [];
if(query.parameters.topingList){
query.parameters.topingList.forEach(function(e,i){
var newRecord = recordFactory.create();
newRecord.Name = e;
newRecord.Amount = 0;
toppingList.push(newRecord);
});
}
callback.success(toppingList);
}
The list widget will make use of this datasource and bind the name and amount field into a label and a text input.
Preview
I have a button to emulate a SAVE action To capture the entered values and display it in another label.
function showResults(selectedItems,resultWidget){
resultWidget.value = " \n";
selectedItems.forEach(function(e,i){
var toppingName = e.Name;
var enteredAmount = e.Amount;
//for display only
resultWidget.value += toppingName + " - " + enteredAmount + "\n";
});
}
See this simple video on how this works in action.
With regards to creating your own input widgets, app Maker gives you an option to create re-usable sections in your app through the concept of "Page Fragments". You can implement the logic separately, like in my case it's the list widget, then wrap it into a page fragment. You can then use this fragment in your pages.
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 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 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'm trying to figure out the best way (minimal effort) to apply filtering to a webgrid that I have displayed in my Main/Index view (MVC3).
I added a multiselet that would allow filtering by a certain column and I would like to catch the click event (which I already have implemented and working) per select item and then somehow re-invoke my Index() method that contains all the code to rebuild the view based on if it was invoked from a filter (multiselect).
What is the best way to go about this? I know that this is a broad ask but any information would be greatly appreciated.
Thanks!
You could place the multiselect inside a form. Then you have 2 possibilities to submit this form:
Using a submit button
Using the onchange event of the multiselect (in this case you will have to use javascript)
The first point is straightforward:
#using (Html.BeginForm())
{
#Html.ListBoxFor(x => x.SelectedItems, Model.Items)
<button type="submit">Filter</button>
}
To implement the second you could use jQuery and subscribe to the change event of the multiselect. First, let's give this multiselect an id so that we can more easily select it:
#using (Html.BeginForm())
{
#Html.ListBoxFor(x => x.SelectedItems, Model.Items, new { id = "filter" })
}
and then in a separate javascript file:
$(function() {
$('#filter').change(function() {
// when the selection changes we manually trigger the submission
// of the containing form
$(this).closest('form').submit();
});
});
In both cases the controller action that we are submitting to will take an array of strings as argument which will represent the selected values in the multiselect which will be used to filter the resultset.