Column collapsible to a button on mobile - responsive-design

I have a 2 columns page and I want that on small screens the first column to be replaced by a small column with just a button on it. When you click the button the original first column appears again (like it is on Wordpress for example).
Thank you.

You cannot reduce a column into a button on a breakpoint (not without adding a lot of code), but you can:
Add a new column with class="column small-12 hide-for-medium", and put the button there... this will keep the column hidden from medium up.
The collapsible column (the first one) will have the class hide-for-small-only, so this will be hidden on small breakpoint; please add an id to this column.
Using jQuery, on the button click, hide/show the first column (the one with the ID, you sould use slideToggle() from jQuery), and that's it.
Hope this helps.

Related

How to collapse/expand all subgrids of same level when clicking on first column

I would like to expand or collapse all subgrids when I click on the first column (yellow) under the selected row.
Plz see pictures below :
and I would like to add some icon in this column.
I've tried with this code in onSelectRow event :
jQuery(this).closest("tr.ui-subgrid").find("td.ui-widget-content:first").append('<span class="ui-icon ui-icon-plus"></span>');
but without success.
Many thanks for anybody who could help me.
Have a nice day
Cheers
Jihel
Many thanks Oleg for your kind help.
Therefore, I think I have not fine explained my trouble.
So, I have updated pictures for focusing my wish.
Your old answer allows to expand/collapse all rows in a grid, but that I would want is to expand/collapse all subgrids from one row at a time, and set a plus/minus icon in the first column under the selected row which trigger click event for expanding/collapsing subgrids.
If my request is not clear, plz let me know.
And many thanks to helpers.
Regards
Jihel

How to simulate a column header click in devexpress xtraGrid?

Hi I have a devexpress grid on the form. I enable the incremental search on one of the columns. But I find I need to click the column header each time when I perform one search. Is there a way to simulate such header or column click in grid control?
I also try in gridcontrol_keydown event to set the focused row, but this one only works for once, after performing one search, I need to click the column header or the column again, otherwise the incremental search doesn't work anymore.
Thanks!
The column (or cell) click is required only to set focus to the column under which you want to search data. It is possible to focus a column programmatically. Use the ColumnView.FocusedColumn property.

Pop up a custom form with custom data on click of a cell in jqgrid

I have a grid control displaying data about a Company. I want one column to be "Employee". On click on the any cell of "Employee" column I want to pop up the one Form called "Employee Details" and would like to feel the data.
How can I do this?
As I understand the modal form on click of a jqgrid cell deals with data only related to that row. I want to show different data on the pop up form, i.e. other than the grid data.
Pl help.
Shivali
Probably you can use unobtrusive links in the column (see this and this answers). The advantage of this technique is that instead of typical links you can define any custom action on click on the link. The look of the link can be defined by CSS, but it seems to the that the link can show the user better as other HTML elements, that the user can click on it.
Alternative you can use a button in the column with respect of the custom formatter, but with the same technique as described before you can free define which action will be done on the click.
Inside of the click event with the parameter 'e' you have e.currentTarget as the DOM element of <a> for the link or <input> or <button> if you use buttons in the grid column. To find the row id you can use var row = $(e.currentTarget).closest("tr.jqgrow") or var row = $(e.target).closest("tr.jqgrow") to find the <tr> element. The row id will be row[0].id.

filtering the records in the second grid according to the selection in the first

i've header and detail rad grids. when i click a record from header rad grid, it must be filled detail grid. how to do this? thanks in advance.
You probably want to do something like this.
Check out these demos, this demo and the other demos listed on the left: http://demos.telerik.com/aspnet-ajax/grid/examples/programming/detailtabledatabind/defaultcs.aspx
Basically, set the HierarchyLoadMode="ServerOnDemand" for the MasterTableView. Then add a DetailTableDataBind event handler on the RadGrid. This fires every time you expand the header record (by default, the child gets loaded when expanded, not clicked). If you wanted to expand on click, you may be able to programmably expand the table.
Also, if you set the EnablePostBackOnRowClick="true" and ClientSettings AllowRowSelect="true", this posts back when clicking on the row, so that handles that part of the equation.
HTH.

Auto adding textbox

I wanna ask for your opinions/ideas about how to automatically add new Textbox when user click on Add button. In my system, there are 2 Textboxes which user need to enter expenses and price respectively. And there's also a ADD button. When they click on it, another two boxes will automatically generate. Before this, I only have 8 Textboxes for expenses and 8 Textboxes for their price. But it looks quite messy for me so i want to make it more tidy. Thank you
You could use a grid and then have a hidden row that has the same input cells as the other rows. When the add button is clicked, have javascript clone the hidden row and then add then show it, and add it to the bottom of the grid.
If a grid isn't right for your UI then do the same thing with just cloning a text box and showing it. It is often easier to just have a single hidden input field with the proper style applied and then clone it, and then remove the display: hidden.
But it looks quite messy for me so i want to make it more tidy.
GridView should be used to make it visibility better and consume space properly.
Assign the DataSource to your GridView
Set the Text boxes in your Footer
When you click the Add Button, Set the Visibility of your Footer "True"
Once user fills the values in Textbox save it and Bind to the GridView.
Repeat Step 4 to iterate the same process next time.

Resources