I am using data table component in Quasar. I am able to view table and it’s awesome. here's
Now I need to click on a row cell and make it editable input text field, and after pressing ‘Enter’ button I need to save data there itself.
How to proceed further? please help me.
First thing is I didn't find any inbuilt functionalities of the data table to edit row. So I thought of moving with my custom functionalities. The good thing about Data table in Quasar is that it provides the use of templates for manipulation of any row.
So I used a template like this:
<template slot="col-Name" scope="cell">
<span #click = "nameAction()">{{cell.data}}</span>
<input type="text"
v-model="cell.data" v-show="edit1" v-on:keyup.enter="edit1 = false;"> <br>
</template>
So here I'm cosidering one of the row in the column(Name), and on click of the row calling a function called nameAction.
And here is the function inside a method:
nameAction: function (row) {
this.edit1 = true
}
Here I am making an input field visible on clicking the row.
For reference, you can use this fiddle.
Related
My table contains a column that contains a "select".
I need to detect when the user changes the "select" value of the cell so I can make DOM changes to other cells in the row.
I have no idea how to detect that event.
Figured it out.
Added an onchange to the html <td>.
Thanks;
I have a struts table which displays data using <display:column> tag.It has many rows and checkbox for each row. But for only one column I need to show as text fields which I did using <display:column><input type ="text"..../></display:column>. Now the problem is I need to submit only the value of the text fields for the rows which have been selected by checking the check box. The submit button is outside the display tag. Can anybody please suggest how to achieve this.
I have a jqGrid which when a row is selected, a jQuery UI modal form will popup which I would like to contain the data for the selected row. The form would ideally contain the row data, a confirm button and a cancel button. Is this possible? I have tried to find an answer and haven't had any luck as of yet. The data will be carried through to another form where the values will be editable.
Thanks in advance.
I think you can use the following
onSelectRow: function (id) {
$(this).jqGrid('viewGridRow', id);
}
See the demo from the answer as an example.
I would like to make use the core jQuery libraries to do as per title. Is it possible to do this with the native jQuery UI library? I prefer not to use plugins as these are not hosted on any CDN (as far as I' am aware).
How can i filter the table by matching the typed input text against the 2nd table column?
<input type="text" id="filter" />
<table>
<tr><td>1</td><td>UK</td></tr>
<tr><td>2</td><td>USA</td></tr>
<tr><td>3</td><td>France</td></tr>
</table>
$('tr td:nth-child(2)') will give you all the 2nd TDs in that table. It is 1-based and will include in its count any non-TD children of the TR.
$('tr td:eq(1)') will also give you all the 2nd TDs in that table. It is 0-based and will only include in its count the TD children of the TR.
Once you wish to do something with the row containing a TD, you can use the TD's parent.
Briefly, you'll put an id on your table element. Then, when you leave the input element (or, in the onclick() handler of a button) you'll do the following:
Grab the table element.
Find each child in turn, which will be a row, preserving a reference to the element
Find the second child of the row and test it against the value of the input to see if it matches (exact match, contains, or whatever kind of test you want to apply).
If it matches, set a style indicating it matched onto the row. If not, set a style indicating "not matched" onto the row.
You'll also need a style sheet that makes matched items visible and not-matched items invisible (or uses dark and light text, or whatever visual indicator you want to use for matched & unmatched).
You can make this somewhat more robust if, instead of relying on the second cell on each row to hold the country name you use a class indicator on the cells that hold the country name. Then, instead of "Find the second child" you would "Find the child of class country. Doing this means that your application won't break when you add, remove, or rearrange columns.
I have a form that (amongst other things) contains 2 multi-select listboxes. Basically you can add items to the one on the right from the full list of items on the left using some add/remove buttons.
The problem is that I cannot see a way of picking up the contents of the listbox when posting back to the controller.
I have followed this example:
http://ittecture.wordpress.com/2009/04/30/tip-of-the-day-198-asp-net-mvc-listbox-controls/
This works fine if you have actually selected the items in the listbox before posting. That's not really the way I think this UI should behave though.
Hope that makes sense,
Nick
Thanks for the help guys. I forgot to mention that I am populating the selected items listbox with jQuery. Not sure if that was important or not though.
In the end, I fixed it by selecting all items onclick with jQuery before posting. Seemed like the easiest solution.
I don't think a listbox is the control you want for the control on the right. The way a listbox works (by posting the selected item) is not what you're trying to achieve.
You could consider having a grid or even just a div with a number of strings. There is more Javascript/JQuery to be written, but it will provide a nice user experience because no postbacks will be needed until all the work is complete.
You'll need to use JavaScript/JQuery to add and remove items from the div based on the buttons to add and remove.
In addition, for each item that is added on the right, you'll need to add a hidden input field:
<input type="hidden" id="SelectedItems" value="..." />
Set the value to the key or id of the newly added item. If you remove a field from the right control, make sure you remove the associated hidden field.
To handle items on the right that the user has removed, you'll need hidden fields to indicate which have been removed:
<input type="hidden" id="RemovedItems" value="..." />
Then in your controller you can add two parameters to the Action (or add two field to the viewmodel) which will be arrays of strings. This will be set to all of the values in the hidden fields that were added, and all the ones that were removed.
In addition to listbox, have several hidden input fields to hold "currently added" items. The listbox selection will indicate "items to remove" when selected.
OK, clarification. You have left and right listboxes. Left one holds available items, and selected ones are POSTed and then added. Right one holds currently added items, and selected ones are POSTed and then removed from added items.
Now, you also need to hold currently added items. You can do this via bunch of
<input type="hidden" name="currently_added" value="itemid" />
hidden fields.
Yes you can go jQuery but this is an easy way; not every site should be designed to require JavaScript turned on. The above solution works without JavaScript enabled.
Your post from page will give you 3 arrays:
Left side box selected items to add
Right side box selected items to remove
Hidden fields - already added items
You take (3), remove (2) from it, add (1) to it, and display the same page or do whatever you want.