Let's say I have a grid with fluid layout. It has one component, a table, in a span12 div - using the entire screen.
When a row in this table is clicked, I want to change the layout. I want to change the table's div to span4 and create a new span8 column on the right to display details of the selected item.
How can I do this programmatically? Something as simple as:
$("#mydiv").removeClass("span12").addClass("span4")
... doesn't seem to work, I believe I need to somehow tell Bootstrap to re-process the entire layout. Is it possible at all?
What about this solution:
var $table = $('.table-container'), // table inside
$side = $('.side-container'); // hidden by default
$table.on('click', 'tr', function() {
$table.removeClass('span8').addClass('span4');
$side.show();
});
http://jsfiddle.net/meV43/
I used total width of span8 in this demo
With toggle column functionality http://jsfiddle.net/meV43/1/
Related
I added jQuery to my App o freeze columns and rows. And it works as long I don't need auto select, mouseover CSS and sorting function.
Unfortunality now I can't select rows and sort the table anymore. And it seems that the table is cut in two see screenshot:
Edit:
I solved the selected row problem but *
freezesize: 14*
gives me a white gap in the grid, why?
Problem was that the Grid had a few columns that I hide with:
GridView1.Columns[11].Visible = false;
GridView1.Columns[12].Visible = false;
jQuery shows the columns but without text...
I have an html table and I have added a dropdown menu to all of the td elements in one of the columns using javascript. I want to code it so that when the user selects and option from the dropdown menu, it updates the value of another cell in that row. The dropdown menu works fine, but I am having trouble figuring out how to get it to update the corresponding CONFIRMATION cell.
The table looks like this:
The JS code I've come up with so far looks like this:
$(document).ready(function(){
var table = document.getElementById("req_table");
var cells = table.getElementsByTagName('th');
$(function(){
$("tr").each(function(){
//this is where I create/add the dropdown menu to the table//
var dropdown_str = "<div class='dropdown'><button id='dLabel' type='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>Request Action<span class='caret'></span></button><ul aria-labelledby='drop4' class='dropdown-menu' id='menu1'><li class='Confirm'><a href='#'>Confirm</a></li><li class='Reject'><a href='#'>Reject</a></li></ul></div>";
$(this).find("td:eq(2)").append(dropdown_str);
});
});
//this is where I tried to update the CONFIRMATION cell//
$('.Confirm').on('click',function(){
$(this).find("td:eq(1)").text = "CONFIRM";
});
});
The html table is created from a pandas dataframe using DataFrame.to_html().
Can anyone tell me how to update the CONFIRMATION cell when the user selects one of the options from the drop down menu?
Look for the parent row with .parents("tr").first() and update the content with .html()
$('body').on('click',".Confirm",function(){
$(this).parents("tr").first().find("td:eq(1)").html("CONFIRM");
});
You're using $(this).find inside the click event, but this refers to the li clicked there.
So, you should get the closest tr parent to find the td you want:
$('.Confirm').on('click', function() {
$(this).closest('tr').find("td:eq(1)").text("CONFIRM");
});
You were using the text method as it was a property, but it is a function, so I've fixed that too.
Goal:
When I have the cursor inside of a td row, some icon should appear, and you should enable to click them. The icons contain link.
When you have the cursor in a new td row, the previous td row should be default and the new td row should have the new icon.
Pleae take a look at the picture.
Problem:
I don't know how to create it.
Information:
I'm using bootstrap, jquery and Visual Studio.
You can place all the icons when you are creating the rows. just give the style
style='display:none;'
then loop thorugh the rows via jquery
$(table tr).each(function () {
if ($(this).is(':hover'))
$('icondiv').show();
else
$(this).hide();
});
Then if you want to perform some action based on the click on those icons, then you can place an data-* attribute along with those icons and track that particular row.
From jquery you can fetch the data attributes using data() function like
$('icondiv').data('id');
First way just use css
in html add class to div which include icons
<div class="IconsDiv">
<!-- Icons here -->
</div>
and in css
.IconsDiv{
display: none;
}
tr:hover .IconsDiv{
display: block;
}
another way : if you want to use jquery for that
$(document).ready(function(){
$('table tr').hover(function(){
$(this).find('.IconsDiv').show();
},function(){
$(this).find('.IconsDiv').hide();
});
});
I have an issue with a jquery mobile 1.4.2 webapp. I have a page with 2 tables that both use the column toggle button. I want to move each of these buttons to their own placeholder to allow for horizontal scrolling.
I have this working when there is one table, but I can't figure out how to specify the table id for the column toggle button, to move the button for the correct table.
<div id="colUnit"></div>
$(document).on("pageinit", "#contractDetails", function () {
$(".ui-table-columntoggle-btn").appendTo("#colUnit");
});
Is there a way to specify the table id within the jquery so that the correct button is moved to <div id="colUnit"></div>
It currently places BOTH buttons (one from each table), into <div id="colUnit"></div>
column-toggle buttons are siblings of tables and placed before them. Use .prev() to move to another place.
$("#mytable1, #mytable2")
.prev(".ui-table-columntoggle-btn")
.appendTo("#colUnit");
Update
You can also append them into a controlgroup and change their text.
<div id="colUnit" data-role="controlgroup" data-type="horizontal"></div>
Move buttons to controlgroup.
$("#mytable1, #mytable2")
.prev(".ui-table-columntoggle-btn")
.each(function () {
var text = $.mobile.path.parseUrl($(this)
.prop("href"))
.hash.substring(1);
$(this)
.text(text.split("-")[0])
.appendTo($("#colUnit")
.controlgroup("container"));
});
$("#colUnit").controlgroup("refresh");
Demo
I have two distinct gridpanels and throughout my code, whenever value of one of the cells in Grid1 changes I want to be able to change value of certain cells in the Grid2,
How can I change the css of the second grid from within the Grid1.
The following allows me to change the css for an entire row in Grid2 but I need to be able to change the css for a cell of Grid2 row: 2, column 3
var Grid2Store= Ext.data.StoreManager.get("MainComparisonStore");
Grid2.getView().addRowCls(Grid2Store.getAt(2), 'orange-bar');
Get a hold of the element and you can use cellElement.addCls('orange-bar');. See Ext.dom.Element.addCls() documentation. I put together a jsFiddle for you to see an example. Just click the "Test" button in the grid toolbar.
Here is the code that does the work. It is hard coded to add a class to column 1, row 1.
var grid = Ext.getCmp('myGrid');
var column = grid.columns[1];
var record = grid.store.getAt(1);
var cell = grid.getView().getCell(record, column);
cell.addCls('orange-bar');
Here (Sencha Forum) is some discussion on how to get the cell. This is what I used to put together my example. You can see how you could make a helper like getCell(rowIndex, columnIndex) pretty easily.