I'm just starting to play with knockout.js and integrating it with a grid widget. I need to set a databind to a checkbox for each row but the checkboxes are created within the widget and I have no access to it. What I do have is access to the cell containing the checkbox.
I believe I could maybe use jquery to add the attributes dynamically to each checkbox and only then call applybindings, but I'm wondering whether I can set data-bind on the cell and tell knockout to "assign" it to its children (in this case always only one checkbox)?
Rivers, you wouldn't want Knockout (or probably any other code) interfering with anything managed by another widget. Generally you'd want to look for an API on that jqGrid that allows you to manage the underlying data. If that's not an option on jqGrid and it's something that you really need, then you should look for a different grid tool. Maybe a knockout-specific grid tool would work better for you, like koGrid : https://github.com/Knockout-Contrib/KoGrid
Related
I am trying to make a checkbox grid that some of the values are read only (it is a list of features and some features are required but I want the user to be able to see them all in one place) and retrieved via an endpoint into a store.
I tried making the items unselectable, but I could not get it to function. So, I currently have the beforeselect listener returning false if a particular feature phrase pops up (voice in this instance) so that I can possibly add similar later. The problem with this is that the header select all box will not toggle since not every checkbox is checked. Looking at the JS in the browser shows me the checkbox is a span (which personally strikes me as an odd choice but nothing I can do about it), and I haven't been able to trace what is going on behind the scenes.
The question is this. Is there a better way to make some of the rows unselectable (and thereby uneditable) while keeping the select all working properly, or is there a way to manually toggle the header checkbox since all it does is enumerate through the grid and either check or uncheck based on its state?
Thanks.
I'm a Junior Developer and I'm currently having a big issue with breadcrumbs.
For this application, I'm using VueJS and the problem I'm having is the following:
*The user clicks on 'tables' and is sent to the 'tables' page.
-On that 'tables' page, he has a big table in which he's able to click on the various columns to show a new table with data relevant to the column he clicked on.
*For this I'm on the same component so I'm not using routers, but using v-show as I don't want the tables to rerender.
My problem is the following, I have to make a breadcrumbs as he navigates to the different tables (ie: table/holdingList/entrepriseList/clientList..). and they have to be clickable so that I'm able to create a function that injects data into the table or to simply 'show' it and close the others.
Can anyone give me a brief out-line of how to do this? Sorry if it seems trivial. I've already spent a couple of days on it and my brain has turned to mush...
I will start from the easiest solution to implement:
Each v-show will depend on a different data object. Then your breadcrumb has an #click method that will set every v-show data object to false. Give the method a parameter with the name of the data object that you intend to show and display that to true.
The previous answer is enough to get it working. Other ways of achieving the same result in a more maintainable way are:
Create one data object named as activeTable and turn your v-show into a v-if. When you click on the breadcrumb element you change the activeTable data object to an identifier for the table you wish to display. After that your vue-if simply checks if the activeTable === thisTableId. Where thisTableId is the identifier of each table.
You may want to start getting acquainted with Vuex specially if your tables share a similar layout. In that way you will store the data and there is no need to request your data again. This is useful if the data to populate your tables come from an API.
Finally on an SPA architecture there is no actual re-render so you may possibly want to look at that as well.
Please read the guidelines for posting an answer since they require you to show at least some effort from your side. Good Luck!
I would like to implement a dropdown component that shows the selected options upon expanding.
Here is what I have so far, but it tokenizes the selected options, which I don't want. I want them to look similar to a single selection dropdown where they are just shaded/highlighted, but there can be multiple selected.
<Dropdown
text="Filter"
icon="filter"
className="icon"
fluid multiple selection labeled button
options={filterOptions}
/>
As you noticed, Semantic doesn't (currently) support a whole lot of customization regarding multi-select. So, you have two basic options. First, you could use the subcomponents implement the details of dropdown yourself (including all the events that get fired) and only rely on Semantic for the styling. If you choose this route, you might as well write your own.
Alternatively, you can hack together a solution using some Semantic's built-ins.
To do this, you need to change two main behaviors:
1st - you need hide the tags. You can do this by modifying the renderLabel method on the dropdown. Returning null from that method will prevent the tags from being rendered.
2nd - you need to unhide the selected options in the dropdown. There's no built-in way to do this, but you can fake it by inserting a new duplicate option for every option selected. Make sure you attach an onClick to allow deselecting of objects.
Here's a working example: https://stackblitz.com/edit/so-49442592
There's a lot of quirks to it, so feel free to ask questions!
I'm just learning Backbone-- it seems awesome but I'm still learning how exactly to wield it. I'm trying to figure out how it fits into this situation where I've been asked to use it, and I was hoping for some leads.
Basically we have a menu that's already totally made HTML/CSS wise, it's done. This menu lets a user select what color of product they're looking for (for example), then what fabric, and so on. The functionality they would like to add to this menu is that as soon as the first choice is made, the color, the second set of options should grey out accordingly: for instance, if you pick red and only 2 of the 5 fabrics are available in red, the other 3 should grey out.
They want this done with Backbone, and it's my first time putting this library to use.
So as soon as a color is picked, I guess I need to make an AJAX request and immediately find out what's good for fabrics and update accordingly, but I'm hitting a little wall because if the HTML is already done...then...there's no "view", not that I made anyway...so...help me out here. Am I thinking about it wrong? Can this be done anyway?
What you'd probably do is have a model to manage your options (color, fabric, etc.). Then, when one of the attributes changes, you fetch the updated possibilities from your server. Of course, for this to work, you need to define your model's url function to generate the url corresponding to you endpoint.
When the data returns from the server, you render the view into the form's element, which will replace the HTML already there (in effect updating what is displayed to the user).
Realistically, although your form already is written, you'll probably find it easier to generate the same HTML in your view's render function, and simply rerender the form each time an option changes. (I.e. don't have the form HTML already present.)
Another option would be to update the values, etc. in the existing form in the DOM using the view's render function.
We're using SmartClient GWT library (see the Smartclient GWT showcase here).
I'm trying to make a ListGrid UI that when you click a record the fields become editable. Just like the example:
Grid Editing Mass Update
The difference is I'm using my own custom GWT RPC services and manually adding ListGridRecord's to my own DataSource, and I see my records appear but the fields aren't editable when clicked. I've created a custom DataSource using the GWTRPCDataSource implementation and properly override the executeFetch method.
Is there some special processing that's going on using the examples XML DataSource that creates ListGridRecords that properly set it up to be editable?
For example I'm using the CountryXMLDS.java just like the example except I'm adding one custom record (and I've removed all fields but the population field that I want to be editable). I see my record appear but the field is NOT editable when the record is clicked.
ListGridField populationField = new ListGridField("population", "population");
populationField.setType(ListGridFieldType.INTEGER);
populationField.setCanEdit(true);
countryGrid.setFields( populationField);
countryGrid.setCanEdit(true);
countryGrid.setEditEvent(ListGridEditEvent.CLICK);
ListGridRecord record = new ListGridRecord();
record.setAttribute("population", "5");
CountryXmlDS.getInstance().addData(record);
Whatever the problem is, it's not in the details you've shared. Try these steps:
make sure you're calling setDataSource() on the ListGrid with your DataSource
make sure the name of your ListGrid field matches a field from the DataSource. This is case sensitive
make sure you have a primaryKey declared in the DataSource. There's no way to save edits unless there's a way to identify records
look for messages in the Developer Console
http://forums.smartclient.com/showthread.php?t=8159#aConsole
shotgun approach: override ListGrid.canEditCell() and return whatever you want - this overrides all the declarative settings like field.canEdit.