Upon dynamically adding a Table webcontrol from the code-behind of my aspx page, I then use
TableCell tableCell = tableRow.Cells[1];
foreach (Control ctrc in tableCell.Controls)
{
...
}
to find the objects I am interest in.
I would rather use a div with a span tag, instead of the table, and use something similar to
foreach (Control ctrc in span.Controls)
{
...
}
As my div also has a label, how do I specify that I am only interested in the objects contained within the span tag?
You can use LINQ to filter the list by a type:
span.Controls.OfType<TextBox>();
I know TextBox controls are not what you are looking for, but I'm not sure what specifically you need, so replace TextBox with whatever... (HtmlGenericControl?). You can also use LINQ Where, which is nice:
span.Controls.Where(i => [SOME CONDITION]);
And the list is filtered to whatever you want. Since you are using HTML elements with runat="server", you have to know what the HTML control type is, which I am not 100% sure what the class names are since I don't use them that often.
Related
The short question:
*takes deep breath*
How I can ClientID of TableRow inside Table added to PlaceHolder, which is in a UserControl inside a Web Part added to a SharePoint page using a MasterPage?
The explanation:
I'm building a usercontrol that dynamically shows SPList items, one per Web.UI.Table(). The 2nd row of the Table() will be hidden at first, with an image used to initiate some JavaScript to hide/show the row at the clients browser (rather than use postback or ajax - I have reasons).
The Table() is then added to a PlaceHolder in a UserControl, which is then used by a WebPart, and that WebPart is added to a SharePoint Page, which of course uses a MasterPage. I'm having real trouble working out the JavaScript method to find the ClientID of the TableRow, given that it's nested so deeply.
My .ascx code looks something like this..
<script type="text/javascript">
function showHidden(itemId) {
var controlId = document.getElementById('<%= phDownloadTable.ClientID %>');
//alert(controlId);
document.getElementById(controlId).style.display = (document.getElementById(controlId).style.display == "table-row") ? "none" : "table-row";
}
</script>
<asp:PlaceHolder ID="phTable" runat="server"></asp:PlaceHolder>
and my .cs codebehind is something like this..
Table myTable = new Table();
TableRow hiddenRow = new TableRow();
hiddenRow.ID = "row" + itemId;
hiddenRow.Attributes.Add("style","display: none;");
... create TableCells and add to hiddenRow...
TableRow displayRow = new TableRow();
TableCell toggleCell = new TableCell();
Image toggleImage = new Image();
toggleImage.ImageUrl = "/images/myimage";
toggleImage.Attributes.Add("onclick","javascript:showHidden('" + hiddenRow.ClientID + "');
toggleCell.Controls.Add(toggleImage);
displayRow.Cells.Add(toggleCell);
... create more TableCells and add to displayRow
myTable.Rows.Add(displayRow);
myTable.Rows.Add(hiddenRow);
the result is that the toggleImage "onclick" attribute shows showHidden('row999');, which passes 'row999' to the JavaScript function, but I cannot figure out there how to get the full clientId of the TableRow it refers to.
The source of my page shows the clientId to be ctl00_SPWebPartManager1_g_eda9b9e9_4c7a_48e0_a2aa_fd8cdd65de6c_ctl00_row999, which is longer than I'm used to seeing, and seems to contain two 'ct100_' parts, suggesting multiple levels of controls.
Any ideas would be greatly appreciated. I've tried all the usual avenues (googleing for 'javascript .net control client id' and the like, but so far I've not found anything that helps. Most suggest document.getElementById('<%= myControl.ClientId %>')... which is fine, but I don't know 'myControl' - I need that send from the toggle image.
Fingers crossed!!
Kevin
If you cant set the client id, you should be able to set a class, and that should be respected by .nat.
Them you can select the element by class name.
JavaScript has no wildcard selection options. Try using jQuery, that makes things more flexible.
Then you can use something like:
$("tr[id*='<%= phDownloadTable.ClientID %>']").css("display", your value);
this way you will still find the right element, even when it's moved to another place on the page.
Here is a more detailed explanation on how to use these wildcard selectors:
http://api.jquery.com/attribute-contains-selector/
With plain JavaScript you can do a document.getElementsByTagName('tr') and then loop those to find the right object.
If you are using Framework 4.0 you can set the ClientIdMode of the page like this:
Page.ClientIDMode = System.Web.UI.ClientIDMode.Static;
That way you can have more predictable client ids. For example, you can have id's without all the ctl00_ prefixes.
I've got a ListView which contains edit,delete and add. All good here, however the List is too large and I would like give users a serach functionality with text box and button.
When user clicks on search button, List view gets filtered by search criteria.
could someone help me to achieve this please.
Thank you
(In response to the comments on the question...)
Depends a lot on your DOM structure. You'll need to know how the ListView has laid out its elements. For example, if they're all div elements then you'll need to know that for your JavaScript code. (I'm going to assume the use of jQuery, because it's a safe assumption these days.)
Essentially, your filter is going to have at least a text input element:
<input type="text" id="searchFilter" />
You can also have a button to engage the filter, but for brevity let's just filter as the user types:
$(document).ready(function() {
$('#searchFilter').keyup(function() {
// Here you would do your filtering.
});
});
For the filtering itself, you could use the :contains() selector. See information about it here. Basically, you'd hide all of the elements and then show the ones which match. Something like this (untested):
$('#parentDiv div').hide();
$('#parentDiv div:contains(' + $('#searchFilter').val() + ')').show();
The idea is to hide all of the child divs (your selectors may need to be more specific, depending on your DOM) and then show the ones which match the filter. Don't forget, of course, to have a default case to show all if the filter text is empty.
Well, you have to know your underlying structure; say you are rendering a table, you need to write JavaScript to loop through each row and do something like:
$("#table").find("tbody > tr").each(function() {
var row = this;
//loop through the cells, do the string match
var tds = $(this).find("td");
//match the inner HTML of the td to the search criteria, depending on how
//your search critiera is setup
//if not found
$(this).css("display", "none"); //hide the row
});
It depends on how you render your ListView but if you render a table and want to do the filtering client side you could use a jQuery plugin such as UI Table Filter
ended up using this:
protected void btnSearch_Click(object sender, EventArgs e)
{
DS.SelectCommand =
"SELECT ReportName, ReportType,
FROM Table
WHERE ReportName LIKE #param
ORDER BY ReportType Desc";
DS.SelectParameters.Add("Param", searchTxtBox.Text.Replace("'", "''"));
DS.DataBind();
ListView1.DataBind();
}
For example when using a gridview. When you specify the columns
BoundField for example won't work if you are binding it to a field instead of a property.
I guess this is so because when the gridview is looking for the DataField property it looks for a property and not a field. Now the question is how can i change this behavior to make it possible to use fields. I know i have to inherit from the gridview, but i don't know where to go from there.
This functionality is so wrapped into the framework and wasn't designed for extensibility so no you can't change this behavior; the only thing you can do is to create wrapper objects or wrap fields with properties.
Or render the UI in your own way, which then you lose the GridView in-built functionality.
Wrap the fields with Properties
private string fieldA;
public string FieldA
{
get { return fieldA; }
set { fieldA = value; }
}
Hai guys,
I used find control to find a list item of an unoreder list inside a master page from content page using this,
Control home = this.Page.Master.FindControl("list").FindControl("home");
Now i have to change the id of the control home to "current" because to apply css for it....
Do you know the Type of the control you're finding? Neither Control nor ListItem expose a CssClass property, however, ListItem does expose it's Attributes property.
Update based on comment and other question:
You should be using System.Web.UI.HtmlControls.HtmlGenericControl
So something like this should work for you:
HtmlGenericControl home =
this.Page.Master.FindControl("list").FindControl("home")
as HtmlGenericControl;
string cssToApply = "active_navigation";
if (null != home) {
home.Attributes.Add("class", cssToApply);
}
If you think there might already be an class assigned to it that you need to append to you could do something like:
if (null != home) {
if (home.Attributes.ContainsKey("class")) {
if (!home.Attributes["class"].Contains(cssToApply)){
// If there's already a class attribute, and it doesn't already
// contain the class we want to add:
home.Attributes["class"] += " " + cssToApply;
}
}
else {
// Just add the new class
home.Attributes.Add("class", cssToApply);
}
}
If they aren't ListItems, cast them to the correct type, and modify the attributes collection as before, unless there's a CssClass property for that type.
Yes, to use css id's in asp.net is a big problem. first of all you can change your server control's id to what you want but, this will be regenerated by ASP.NET depending on the position of the control in your page's control tree.
My recommendation is to use cssclass property of the controls, and to replace the css ids to class.
I have sort of a table with a radio-button column. I managed to make radio-button column work dynamically inserting into a cell (div if matter). But, on postback innerHtml hasn't been updated with "checked" attribute.
Could you give me an idea how can I find out (on the server) if radio-button has been checked?
More info: This is on user control inside update panel.
This would be good post on my topic, still doesn't help
Any reason you cannot use a standard asp:RadioButton and use javascript to ensure it is mutually exclusive. I have done this before by adding a custom attribute to the radiobutton and then using a js function to uncheck all items with that attribute and then check the selected one. This works around the IE issue which prevents the groupname attribute from working on radioboxes that are in different containers.
radioButton.InputAttributes.Add("ClientGroupName", "grpRadioList");
radioButton.InputAttributes.Add("onclick",
string.Format(
"javascript:radiobuttonToggle('{0}','ClientGroupName','grpRadioList');"
,radioButton.ClientID));
and use the following JS to uncheck all radios and then check the one you want.
Note i used InputAttributes instead of Attributes as the radiobutton is wrapped inside a span tag so InputAttributes is for items added to the actual input control rather than the span.
function radiobuttonToggle(selectedRB, attribName, attribValue)
{
var objRadio = document.getElementById(selectedRB);
for(i = 0; i < document.forms[0].elements.length; i++)
{
elm = document.forms[0].elements[i];
if (elm.type == 'radio')
{
if(elm.getAttribute(attribName) == attribValue)
elm.checked = false;
}
}
objRadio.checked = true;
}
You can then expose radioButton.Checked as a property in your CS file and reuse this as a control.
Check Form.Request("radio-name") != null
You only get a non-null value when it's been checked.
Make sure your page elements are being rebuilt correctly on postback. Any binding process that inserted the radio buttons the first time around will have to be re-run before you can access them the second time.
Here is a working example, first I add radios to my webform by the method you linked :
function addRadio()
{
try{
rdo = document.createElement('<input type="radio" name="fldID" />');
}catch(err){
rdo = document.createElement('input');
}
rdo.setAttribute('type','radio');
rdo.setAttribute('name','fldID');
document.getElementById('container').appendChild(rdo);
}
Then at code behind I used only the code below to get the radio's value :
string value = Request["fldID"];
So, be sure you're trying to get the name of the radio buttons at server side. You should use name attribute at server side, not id.