There r things to hide a column in a grid view but are there any methods by which the rows of a grid can be hidden and un hidden on a particular action. Say when a button is clicked the 1st and the 2nd row must be hidden and on another click the hidden rows must be un hidden.
To hide rows
$(document).ready(function () {
$("tr").filter(function () {
return $('td', this).length && !$('table', this).length
}).click(function () {
$(this).remove();
});
});
Related
I have a Grid Panel. In the Controller of this Grid I have my init function:
init: function() {
var selected_vorgang={};
this.control({
'provisionscheckgrid':{
itemcontextmenu: this.itemListCtxMenu,
select: function(s,record,row) {
console.log(record.data.id);
selected_vorgang[record.data.id]=record.data.free;
console.log(selected_vorgang);
}
}
});
}
Now I want to check, which row or which rows are currently selected. Then I want to put the id of the selected row in an object or remove it, if its no more selected. Does anyone know, how to get all the selected rows to make my function?
THANKS!!
I have it. Had to make it over getSelectionModel().
var list = Ext.getCmp("myGrid").getView().getSelectionModel();
var store = Ext.getCmp('myGrid').getStore();
for(key in list.selected.items)
{
var rowIndex = store.indexOf(list.selected.items[key]);
//Here are the selected numbers
}
I have a grid with a "change" function which gets fired every time a row is selected or when I click edit/delete/update/cancel button.
What I want is to have an ability to tell the difference, because I only what to execute certain code when a row is selected, and not execute it when I am doing cruds or a row.
change: function(e) {
// Body of the function...
IF ROW IS SELECTED
EXECUTE CODE
ELSE IF ROW IS DELETED, EDITED, ETC.
DO NOTHING
END IF
}
Is there a way to tell the difference inside the "change" function?
You can use the "action" property from the event data:
function onChange(e) {
if(e.action == "itemchange") {
//update
} else if (e.action == "add") {
//add
} else {
//delete
}
}
How can a select a Row of a WEBGRID after binding it so that row
will get highlighted(by mouse click on any row or cell of any row without the
use of check-box or option button as column)
1.)After selecting any row can I get the data value for that row?
2.) Can I move selection up and down by keyboard (up and down keyboard
button)?
3.) And after changing the index of selecting row(by mouse or by keyboard
up-down button) is rowselectedindexchaged or rowselectingindexchanging event
can be fired/handled
Thank you
There's a lot to this question, and there are lots of ways to implement it. Here's a rough sketch of how you could do this. I'm going to assume you're using JQuery as that will make this a lot easier.
To highlight a row or cell on click, attach click events to each:
$("tr").click(function() { $(this).css('background', 'yellow'); });
$("td").click(function() { $(this).css('background', 'lightblue'); });
Of course, you'll also need to un-highlight them, but we'll come to that in a moment.
To get data for a row (I assume you mean on the server, not the client), you'll have to do an AJAX call. It will be easiest to get the id of the row rather than passing the whole row back. Something like this inside the click events:
var row_id = $(this).closest("tr").find("input[type=hidden]").attr("value");
$.get("?row_id=" + row_id);
This assumes that you have added a hidden input to each row in your Webgrid with its row ID value.
In case you need to access the selected first row cell you can use this inside the click function:
var cellOne = this.cells[0].innerHTML ;
I also recommend that your click function should only be linked to a certain table (otherwise the selection will be enabled on all tr elements) and use a css class that is added and removed when selection changes.
$('#MainTable tr').click(function () {
$(this).addClass('select');
$('#MainTable tr').not(this).removeClass('select');
});
To move up and down, you can add a "keyup" event listener to the window and handle up/down. See here for more details: jQuery kepress detection on left, right arrows and space bar. You'll have to use Javascript to keep track of which row is currently selected so as to highlight/unhighlight as needed.
Finally, for the last question, you can trigger an AJAX call (or Javascript call) when the user clicks or arrow-keys to a different row. You'll already be keeping track of which row number has been selected, so you can just send that along with the event:
$.get("?event=row_selection_changed&row_id=" + row_id);
You can try this code:
<div id="AjaxWebGrid">
#grid.GetHtml(
htmlAttributes: new { id = "MainTable" },
tableStyle: "webGrid",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(
grid.Column("SendedInDateTime", "SendDate", null, style: "SendDateTimeStyle"),
grid.Column("", header:"حذف", format:
#<text>
#Ajax.ActionLink("Delete", "Delete",
new { id = "", DelID = item.Id }, new AjaxOptions { UpdateTargetId = "AjaxWebGrid" },
new { #class = "button" })
</text>)
));
</div>
<script>
$(document).ready(function () {
$('#MainTable tr').click(function () {
$(this).addClass('select');
$('#MainTable tr').not(this).removeClass('select');
});
});
</script>
#grid.GetHtml(htmlAttributes: new { id="MainTable" }, .....);
<script type="text/javascript">
$(function ()
{
var tr = $('#MainTable').find('tr');
tr.bind('click', function (event)
{
$("tr").click(function () { $(this).css('background', 'yellow'); });
});
});
</script>
i have a grid and a form, i need to show different items on the form each time we select a row on that grid
i ve been looking on how to do this, and found
Ext.getCmp('myform').hide() // or .show()
and
listeners: { selectionchange: function () {...}
now i dont know which row is selected so i can specify which item to show
thanks
You get the selected rows as second parameter in the selectionchange event handler:
listeners: {
selectionchange: function (view, selections, options) {
console.log(view, selections, options);
}
}
So the first selected row is the first element in the selections array:
record = selections[0]
This is described in the Ext JS 4 API documentation for the selectionchange event.
Try to following code in your grid.
listeners:{
itemclick:function(view, record, item, index, e ) {
var v = record.get('firstName');
....
....
}
}
firstName will be your dataindex of colums in your grid.
You can get value of any field like this.
I'd like to have the first 6 columns of a GridView perform an action, but I need to highlight the entire row when it is clicked. The entire row highlighting is working, but I can't quite get the capturing of the first 6 columns. How do I capture the first 6 columns click in the following where the testing variable is located?:
$("#<%= JobStreamSelectedDealsGridView.ClientID %> tr").filter(function() {
return $('td', this).length && !$('table', this).length
})
.bind('click', function(e) {
if (_activeRow) _activeRow.removeClass('gridviewrow-highlighted');
_activeRow = $(this).addClass('gridviewrow-highlighted');
var testing = $('td:lt(6)', this);
});
You can do it like this:
var _activeRow;
$("#<%= JobStreamSelectedDealsGridView.ClientID %> tr")
.delegate('td:not(:has(table)):lt(6)', 'click', function(e) {
if (_activeRow) _activeRow.removeClass('gridviewrow-highlighted');
_activeRow = $(this).closest('tr').addClass('gridviewrow-highlighted');
});
You can try it out here. I'm not sure about your parent-row-with-child-table exclusion, but I've replicated it here since I'm sure you had a reason :)
This uses .delegate() to reduce the number of event handlers, it attaches an event handler to each row, and when a <td> that's :lt(6) (less than 6th index, 0-based) gets clicked we go up to the nearest <tr> using .closest() and do the class manipulation there.
Try this. You are binding the click even to only the first 6 TD's.
$("#<%= JobStreamSelectedDealsGridView.ClientID %> tr").filter(function() {
return $('td', this).length && !$('table', this).length
})
find("td:eq(0), td:eq(1), td:eq(2), td:eq(3), td:eq(4), td:eq(5)").bind('click', function(e) {
if (_activeRow) _activeRow.removeClass('gridviewrow-highlighted');
_activeRow = $(this).addClass('gridviewrow-highlighted');
var testing = $(this);
});