i'm adding rows to table dynamically, but the problem is i'm not able to select or activate when i click on the added rows, bellow is my code. same code is working for static rows.
$('.dataGrid tr').bind('click', function(){
$('.dataGrid tr').removeClass('active');
$(this).addClass('active');
});
$('').appendTo(table)
.append($('').text(pos.posId))
.append($('').text(pos.posName))
.append($('').text(pos.posAddress));
please help me..
You need the live() method there instead of click for dynamically generated elements.
$('.dataGrid tr').live('click', function(){
$('.dataGrid tr').removeClass('active');
$(this).addClass('active');
});
Adding new rows to a table does not automatically add the event listener you need.
Create a function that does two things:
1. Add/insert a row to the table.
2. Bind the same event listener to that row, that you are binding to the static rows.
Related
I'm developing a page with 3 tables. On the 3rd table i have the rows that could be sorted and dropped on the 1st or 2nd table.
Is there a way I can define dynamically if a specific row can or can't be dropped on one of the other 2 tables? A sort of dynamized "connectWith" option...or any other way...
You can define the rows of the third table using the .draggable() method of jQuery UI.
Calling the draggable method, you can specify where the elements can be dropped.
Then on drag of the tr, hide the current tr from the current table (the third one).
On drop of the tr, get the table where you dropped the tr and add really the tr, really removing the row from the third table.
It's better that at the beginning you don't remove immediately the row from the third table, because if the drag event is not fine (for example I drop in a wrong place) you can show again the row.
Here a link to jQuery UI draggable method:
https://jqueryui.com/draggable/
A POC of code:
$( "#third-table tr" ).draggable({
snap: ".drop-tables",
start: function() {
// hide the row from the third table
},
stop: function() {
// add the row to the target table
// remove the row from the third table
}
});
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 kendo ui grid on my page.
And I have a button too. I want when I click button, sortable property on a specify column disable, and when click the button again, sortable property enable.
How to I do this?
Thanks.
Runtime enabling/disabling the sorting feature of the Grid is not supported.
But you can find some approaches to achieve it here: http://www.telerik.com/forums/disable-or-remove-sortable-capability-on-column-with-rebuilding-entire-grid
Hope this link will help you.
There is no method for this - this is option which is set only upon initialziation. So you will need to re-initialize the whole Grid. Covered here.
The column.sortable option should be set to true/false depending on the button that was clicked.
You need to write an click event for a table header on javascript.This event will prevent click on table header.
$(".k-grid-header .k-link").click(function (e) {
e.preventDefault();
if ($(this).text() === Header Name) {
e.stopPropagation();
}
});
e.PreventDefault helps to avoid window jump to top when clicking #-links.
Give your headername into the if condition to which you want to disable sorting
I have a hierarchical grid. How can I avoid that the first row is expanded when the site is loaded?
regards
Your kendo hierarchical grid expands the first row and since you have not shared your code, lets assume that you are binding the grid with jQuery.
Now to not to allow the grid to expand the first row, all you have to do is remove
this.expandRow(this.tbody.find("tr.k-master-row").first());
from the dataBound event.
Here is a working example. See the commented code in the example.
I have created a table and a button. On click of that button i need to add the row.
For that i have used buttonClick method in which i am adding a row in the Table.
The problem is that the row in added to the table (I can see in the logs),
but the screen becomes blank with just the button displayed.
If I exit and navigate again to the screen, then i can see the new row added.
How can i see the new row added immeditalety once added.
Some code would probably help to further see what might be wrong, but I would also recommend you to call the following code line directly after you have added a table row.
yourTable.setContainerDataSource(yourTable.getContainerDataSource());
This will update the datasource for your table and force a repaint. If you provide some code maybe more help can be provided
Using IndexedContainer to add new row in table during button click..
Example
Create IndexedContainer
-----------------------
private IndexedContainer getTblTerminals(IndexedContainer container)
{
container.removeAllItems();
container.addContainerProperty("Terminal_Id", String.class, defaultValue);
g_TermialPojo=ws.readAll();
for(Terminal pojo:g_TermialPojo)
{
Object itemId=container.addItem();
strTid=String.valueOf(pojo.getTid());
container.getContainerProperty(itemId,"Terminal_Id").setValue(strTid.toString());
}
return container;
}
//To add indexedcontainer in your table
-------------------------------------------
Example
table.setContainerDataSource(getTblTerminals((IndexedContainer)table.getContainerDataSource()));
table.setImmediate(true);