I use jquery DataTable in my MVC3 project. The table is dynamically generated through code behind. The only thing (so far) that I have troubles with, is the tbody.
I want to add a tbody section with ID, without any rows, from code behind.
I've been looking a lot, and the best thing I got is:
TableRow tb = new TableRow();
tb.TableSection = TableRowSection.TableBody;
tb.ID = "Body";
But that way, I get a row in the tbody section, with one row with the id..
What I want to get is:
<tbody id="Body"></tbody>
How can I get that result from code behind?
Thanks
Such thing is not possible with the generic Table control, it simply doesn't support giving ID to its <tbody>.
What you can do though is assign the desired ID as custom attribute of the table:
Table1.Attributes["data-tbodyid"] = "Body";
Then using jQuery assign this on the fly to the table's <tbody>:
$(document).ready(function () {
$("table").each(function () {
var tbodyId = $(this).data("tbodyid");
if (tbodyId && tbodyId.length > 0)
$(this).find("tbody").eq(0).attr("id", tbodyId);
});
});
I ended up using HtmlGenericControl:
HtmlGenericControl tb = new HtmlGenericControl("tbody");
tb.ID = grid.GridBodyName;
Of course, the table itself, the header, the footer and its cells should also be HtmlGenericControl.
Adding the body to the table, and the cells to the header\footer should be done that way:
HTMLTable.Controls.Add(tb);
Related
I have a kendo grid with a column(DefaultValueColumn) that should contain a default value.
That column, during insert/add, user should not be able to input a value in that column.
I have tried to use javascript to make the column read only.
function grid_onInsert() {
$('[name="DefaultValueColumn"]').attr("readonly", true);
$('#gridKendo').data('kendoGrid').addRow();
clearErrorMsg();
}
But the script doesn't work.
Are there any other ways?
try this.
function grid_onInsert() {
var grid = $('#gridKendo').data('kendoGrid');
var data = grid.dataSource.at(index of DefaultValueColumn);
data.fields["DefaultValueColumn"].editable = false;
$('#gridKendo').data('kendoGrid').addRow();
clearErrorMsg();
}
I use Jqxgrid to show my dynamic data in that my last column there is Edit Button for each row. I need to perform particular row edit on click of edit button.
I use Datatable and smartgridboundfields to show the data in jqxgrid.
how can i perform this type of functionality?
string html = "";
html += "<a id='sedit'>Edit</a>";
html += "<a id='sdelete' style='margin-left: 10px'>Delete</a>";
dr["Actions"] = html;
this code is my code behind edit button which i showing in my jqxgrid.
In that case you can use beginrowedit:
$('#sedit').on('click', function () {
// here change the 0 for the row index
$("#jqxgrid").jqxGrid('beginrowedit', 0);
});
Or begincelledit:
$('#sedit').on('click', function () {
// here change the 0 for the row index,
// and your column datafield instead of "firstname"
$("#jqxgrid").jqxGrid('begincelledit', 0, "firstname");
});
In order to get the row index:
var rowindex = $('#jqxgrid').jqxGrid('getselectedrowindex');
So, I have a DataGrid, that I want to manipulate programmatically a lot.
string[] values = new string[something.Count];
for (int i = 0; i < somethingElse.Count; i++)
{
if (condition)
values[i] = Data[i].ToString();
else
values[i] = "";
}
var style = new System.Windows.Style(typeof(DataGridRowHeader));
style.Setters.Add(new Setter(DataGridRowHeader.ContentProperty, Data[0].ToString()));
MyGrid.Items.Add(new DataGridRow()
{
HeaderStyle = style,
Item = values
});
This I do in a loop and I am able to fill in my grid with all the data I need.
Later, I am able to access cells, edit them, take their values, whatever I want and need.
However, when user wants to use the grid as you would in MS Excel, the cells are not editable.
So I went the other way and created a :
ObservableCollection<ObservableCollection<string>> gridData = new ObservableCollection<ObservableCollection<string>>();
//*** ... *** the gridData is filled in the same way, you can imagine
MyGrid.ItemsSource = gridData;
This does fill in the data perfectly the same way, more than that, the data are now editable.
But my custom row headers disappeared.
I need them, also, I do not think I want to use binding for row header values.
Can the first approach be somehow modified to still be editable, but rows with data being filled the very same way?
I eventually solved this combining both the abovementioned approaches.
First, I generate ObservableCollection<ObservableCollection<string>> dataCollection, fill it with data.
Next I generate an ObservableCollection<DataGridRow> rowCollection collection.
In my declarative part of the loop from the first approach, that you can see in the question, I do this
rowCollection.Add(new DataGridRow()
{
HeaderStyle = style,
Item = dataCollection[i] //for the corresponding iteration element
});
This all ends up when setting
MyGrid.ItemsSource = rowCollection;
Till now (very little time of testing), this seems to be what I was looking for, hope it might help someone else aswell.
I'm reading a menu control code. The code uses a tablerow in a table to construct the menu. After each menu item tablecell, it adds the code:
TableCell td = new TableCell();
Literal lt = new Literal();
td.Controls.Add(lt);
tr.Cells.Add(td);
And it results in a space between each menu item, when displaying the menu table. I just wonder why it does that? Does an empty tablecell take space?
I've noticed .NET adds in into empty cells, this has to be down to HTML tables getting a bit ugly looking with an empty cell; it won't get any border and can sometimes (depending on your styling) look rather weird. If you're wanting a gap between table cells use cellspacing or apply a style with margin-right.
On a side note it's recommended you be using var on the left side of your declarations (only when the right side clearly states what it is), ie:
var td = new TableCell();
var lt = new Literal();
td.Controls.Add(lt);
tr.Cells.Add(td);
You would not use it like this:
var x = GetMyVariable();
I have a datagrid dgCompanies declare like this:
// bind the data to the datagrid
dgCompanies.PageSize = pageSize;
dgCompanies.DataSource = rdr;
Then I need to check the records inside this datagrid:
int j = 0;
foreach (DataGridItem item in dgCompanies.Items)
{
HtmlGenericControl name = (HtmlGenericControl)item.Cells[j].FindControl("SpanTitle");
string drstring = name.InnerHtml.Trim();
if (checkingfunction(drstring))
{
//do removing record from datagrid.
I tried this: item.Cells.Remove(item.Cells[j]); but the result still there, don't see anything removed!
}
j = j + 1;
}
dgCompanies.DataBind();
How could I remove that record from datagrid dgCompanies when if condition is satisfy ?
I agree with #Andrei, it would be best to just not return that data. Otherwise you're returning and churning through data that is unnecessary. However, if in the context of you can't filter the data up front, I suppose you could add a css class "donotshow" to your rows (see How do I specify CSS classes for specific rows in a GridView?).
Then using jquery use
$('.donotshow').hide();
Again, in this regard, you are still returning all that HTML to the browser, so that will make your page size larger than necessary. Additionally, using this method could screw up pagination if you using it (example, if it says "rows 1-10", but 5 rows are hidden, then that will look goofy).
Hope this helps