Display Clicked Item with Knockoutjs - c#

I am trying to display information about the selected item in a list as well as highlight the row that is selected. This is what I have:
http://jsfiddle.net/blankasaurus/qUydu/6/
1) When I try to set the CurrentDisplayThing = item it doesn't do what I want it to do (which is update the Display div with the selected item). I also tried $.extend(CurrentDisplayThing, item); Am I going to have to set each property individually or something? I have about 30 of them on my real project.
2) The other thing i wanted to figure out is how to go about highlighting the row that I just clicked the proper way using Knockout.
PS: For what I am actually doing I am using the mapping plug-in and both Things and CurrentDisplayThing are coming from my .NET model I pass in. I am assuming what I have in JS Fiddle mirrors the way mapping would set this up?

Here is a fiddle that solves both problems.
http://jsfiddle.net/johnpapa/6FCEe/
1) The selected item property is actually an observable (which is a function). So the value must be passed into the observable function like this:
self.model.CurrentDisplayThing(item);
2) Highlighting the row can be done through the css binding in Knockout. The css binding accepts an object with the name of the css class (ex: selected) and an expression (ex: isSelected). In the example below, when isSelected is true, the class will be applied, otherwise it is removed.
<tr data-bind="click: $root.selectThing, css: { selected: isSelected} ">
Check the fiddle out for the full example.

You can't just assign Knockout observables using code like
CurrentDisplayThing = item
And you can't $.extend them either, because in the end that does assignments too.
Instead you have to use the function syntax:
self.model.CurrentDisplayThing(item);
Similarly you have to use the function syntax when accessing:
self.model.CurrentDisplayThing().ID
Working example: http://jsfiddle.net/HUjau/1/

Related

jQuery selected grid cell not returning html() value

I have a dynamically-created ASP.net gridview. I want to return the contents of the grid cell my user clicks. Everywhere I look, the html() property should do it, but mine keeps coming back 'undefined'.
I'm set up so only the first column responds to clicks. My code:
$('#dgrMainGrid td:nth-child(1)').click(function() {
var barCode = $('this').html();
alert(barCode);
})
I've tried a few hail-Marys based on advice from various sites, but the consensus is that html() should work. I'm wondering if the way I select my cell is wrong - in other words, my 'this' isn't what I think it is.
Any help is appreciated.
EDIT:
Here is a rendered HTML row.
</tr><tr>
<td>TD-00154</td>
<td>IV PRobe</td>
<td>Romex</td>
<td>350 Under</td>
<td>217M01866</td>
</tr><tr>
The selector is not good I think, it must be $(this).html()
Make sure you are calling your JS after the DOM (document object model) has been loaded or mostly you will get undefined when selecting the dgrMainGrid
$(document).ready(function(){
// add your code hear
});
Also, when calling ASP.net GridView by ID use <%= dgrMainGrid.ClientID %> instide of dgrMainGrid as ID is auto generated in HTML.

How to Dynamically fetch the fields from item in Sitecore using C# code?

I have a template called 'Footer' which contains a Rich-Text Field.
Using the Footer Template I have created an Item called 'FooterComponent' and filled in the Rich-Text Field.
I have a sublayout called 'Footer-Sublayout' and Mapped the Visual studio sublayout with this.
Using Footer-Sublayout C# code I have to fetch the Rich-Text field from the 'FooterComponent' and display it in my Home Page.
You need to add the footer sublayout to the presentation detail of the homepage and bind it to the placeholder that corresponds to the one in the code.
In the code behind of the footer sublayout, you will then need to fetch the value from the rich text field of the item. So, first get the footer item either by path or template ID. Second, read the value of the rich text field.
Thanks
Give your Footer-Sublayout a datasource. In your code you can request the datasource of the rendering/sublayout (the exact how can differ, depending on the sitecore version, frameworks used (glass, ..) but can be easily found).
By using a datasource (and not hardcoding the item in your code) you give your editors the ability to change the item without changing code - or use the personalization/testing features of Sitecore.
e.g. (in v7 without frameworks):
public Item GetDataSource(Control parent)
{
var sublayout = parent as Sublayout;
return sublayout != null ? Context.Database.GetItem(sublayout.DataSource) : null;
}
Use the parent of your control in this function to retrieve the datasource item. Once you have the item, you can attach it to a FieldRenderer or fetch the fields in code.

How to display selective items in a binding list in grid control

I have implemented below code:
gridControl.DataSource = CusColumnList
CusColumnList is of type MyBindingList which inherits BindingList, in my case T is class MyColumn. The binding works well.
But now my problem comes, I don't want the data source to bind to every column in CusColumnList, I only want it binds to column whose name contains "ABC" or whose display name contains "XYZ". I tried to set
gridControl.DataSource = CusColumnList.Where(column => column.Name.Contains("ABC") || column.DisplayName.Contains("XYZ"));
But seems it does not work.
I also tried to create another bindinglist collection MyTempCusColumnList of type MyBindingList, and in the Get method of this MyTempCusColumnList, I just return every item in CusColumnList where the name or display name qualifies. But in this way, every time when CusColumnList is updated, I need to manually update MyTempCusColumnList.
I wonder whether there is a better way to archive this goal with just CusColumnList.
Thanks!
Edit : format code
You could use a filter string on a BindingSource object.
Check out the MSDN documentation on it, it's quite good: http://msdn.microsoft.com/en-us/library/system.windows.forms.bindingsource.filter(v=vs.100).aspx

How To Hide ListView ColumnHeader?

I am struggling to figure out the correct control to use for a list of predefined jobs in the included form. I currently have a ListBoxControl in the Predefined Job Name group that lists all of the predefined jobs for a marine service shop (i.e. oil change, tune up, etc...). Then, based on the item (i.e. job name) that is selected in my ListBox, I need to display the items that correspond to that job. For example, if oil change is the selected job I need to show 4 quarts oil, 1 oil filter, labor, etc...and so on.
Currently, when I load the form data I have a DAO that retrieves all of my jobs from the database using LINQ to SQL. Then I iterate over the results and put the job names into the ListBox. The problem that I am having is that there is no tag for ListBox items like there is for ListView items. So each time the user selects another item in the ListBox, I have to perform another LINQ query to get the job from the database again so that I can display its' corresponding items. If I could use a ListView and hide the column header I could set the entire job on the tag so that each time the user selects a new item I would have access to the details without having to make another call to the database. Is there a way that I can hide the column header of a ListView without hiding the entire column?
You can set the HeaderStyle member of the ListView to None.
listView1.HeaderStyle = System.Windows.Forms.ColumnHeaderStyle.None;
Checkout the ListView HeaderStyle property. It has the following options:
None
Nonclickable
Clickable
From MSDN:
The HeaderStyle property allows you to specify whether the column headers are visible or, if they are visible, whether they will function as clickable buttons. If the HeaderStyle property is set to ColumnHeaderStyle.None, the column headers are not displayed, although the items and subitems of the ListView control are still arranged in columns
You can also create simple object like ListItem which has two poperties: Text (string) and Tag (object). Then implement ListItem.ToString() and you can use these in the ListBox as well.
You can also check out Better ListView Express component, which is free and allows displaying items in Details view without columns. The advantage over ListBox and ListView is a native look and many extra features.
Easy way is using the ColumnWidthChanging event
private void listViewExtended1_ColumnWidthChanging(object sender, ColumnWidthChangingEventArgs e)
{
if (e.ColumnIndex == 0)
{
e.Cancel = true;
e.NewWidth = listViewExtended1.Columns[e.ColumnIndex].Width;
}
}
I found that if you know for a fact you are not displaying the headers it may be best to set the HeaderStyle property to None, as Rajesh mentions above.
When setting in the .CS when screen initially loads the headers are displayed until screen is fully rendered.

Different Value Member, same control

Edit 1
I believe my problem stems from the following. The function that fills the dropdown portion sets the Display Member to the CountyName. Then when I try and set the SelectedText or EditValue, as has been suggested, that function only returns the CountyID which it try's to match to something in the DropDown list DisplayMember. I need it to match it to something in the ValueMember list.
Using the following I got it to work but it is a HACK and I'd greatly appreciate finding a real solution.
lkuResidenceCounty.ItemIndex = Convert.ToInt32(row["ResidencyCountyID"].ToString());
Original Post
I have a lookup box(DevExpress) on a member form that I fill the possible values in from the DB with this code -->
lkuResidenceCounty.Properties.DataSource = ConnectBLL.BLL.Person.CountyList();
lkuResidenceCounty.Properties.PopulateColumns();
lkuResidenceCounty.Properties.DisplayMember = "CountyName";
lkuResidenceCounty.Properties.ValueMember = "CountyID";
lkuResidenceCounty.Properties.Columns[0].Visible = false;
lkuResidenceCounty.Properties.Columns[2].Visible = false;
lkuResidenceCounty.Properties.Columns[3].Visible = false;
This works just fine as the CountyName is displayed as expected.
However, When I try and load an existing member's value for this field using the below, which is part of a function that takes a row from the DataSet -->
lkuResidenceCounty.Properties.ValueMember = row["ResidencyCountyID"].ToString();
I get a blank box. I have stepped through the code and the correct ID is being returned for the member.
Unfortunately the stored procedure to fill the dropdown options pulls from a Maintenance Table with the columns "CountyName" & "CountyID". So that is correct. Unfortunately, the stored procedure to load a specific person's current county pulls from the Person Table where there is a column called "ResidencyCountyID". It is so named because there is also a "ResponsibilityCountyID" column.
I need a way for them both to coexist, any solutions?
Thanks!
DisplayMember and ValueMember are used to populate the control with the list of selectable values. To set the selected value of a populated LookUpEdit control, set its EditValue property:
lkuResidenceCounty.EditValue = row["ResidencyCountyID"].ToString();
In response to your edit: According to the documentation:
The currently selected row determines values for the editor's edit value and display text. The value for BaseEdit.EditValue is obtained from the RepositoryItemLookUpEditBase.ValueMember field, while the text to display in the edit box is obtained from the RepositoryItemLookUpEditBase.DisplayMember field of the selected row.
When you change BaseEdit.EditValue,
the editor locates and selects the row
whose
RepositoryItemLookUpEditBase.ValueMember
field contains the new value. The text
in the edit box is changed to reflect
the newly selected row.
I don't use these controls but it sounds to me that it shouldn't be working as you described. I think the ToString() is the problem because EditValue accepts an object so it's probably expecting an int for the value. Try:
lkuResidenceCounty.EditValue = (int)row["ResidencyCountyID"];
The ValueMember property tells the list what field to pull from when setting the Value property. Once you've set the ValueMember to "CountyID", then when the list is Databound, it will set all the list items' value properties to their respect objects' CountyID fields.
Hence, you should not do:
lkuResidenceCounty.Properties.ValueMember = row["ResidencyCountyID"].ToString();
but rather
lkuResidenceCounty.Properties.ValueMember = "CountyID";
was perfectly fine, as long as you've correctly identified the field you're trying to databind. Once the list get's databound you should see the results you're expecting.
However, after looking at your code, it seems that you're mismatching your field. In one place you're using ResidencyCountyID and in another you're using CountyID. That is most likely your source of confusion. Figure out what the actual field name is and make sure you set the ValueMember to that.
UPDATE
After reading your comment, what your looking for is the SelectedValue property. The SelectedValue property tells the list to force the selected value to whatever input you give it.
Essentially you have two things going on here. ValueMember tells the list what to use as the value from your data source, and SelectedValue which tells the list what the currently selected value should be.
Why is it that you need the same LookUpEdit to have two value members? Is it being used standalone or in a grid? If standalone, you could swap out the two repository editors depending on the current row. But, are there more than 2 possible values for the ValueMember? That would also complicate things.
UPDATE
Looking at your edit, I think I understand what's going on a little more. So, you don't wish to change your ValueMember (which refers to a data column), but rather to change the value of the editor? If so, then you should definitely use EditValue (not SelectedText, which I don't believe is meant to be set), and assign it to row["value_field"] like so:
lkuResidenceCounty.EditValue = row["ResidencyCountyID"];
What happens when you do that?

Categories

Resources