|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
I am looking for a control which is simialr to this: http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/AutoComplete/AutoComplete.aspxBut, it should allow to list items which are matching any part inside the Value Text of the result, not only beginning of the text specified. I looked arround in you control list, but did not find one. Did I miss it ? Appreciate your feedback. Tarek.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Thank you very much for your feedback. We do not have such a control now because user AJAX toolkit already has it. We understand that you want to match by value but I am not sure whether user will understand what's going on when they type "abc" and some items like "xyz" shows up because the item value match.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
Thank you for the reply.
So, I suppose I can use AutoComplete and ComboBox Ajax Controls with your EO.Web Grid Control, without any confolicts or issues, right ?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
I believe that is correct. However as our official policy, we do not guarantee that our control will absolutely work with another control (because we have no control over how other controls are implemented). We are not aware of any issue with AutoComplete though.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
I am now in a stage where I have to begin implementing the EO.Web Grid control in the Live Project.
I have use 3 separate AutoComplete Ajax Controls inside a .NET DetailsView, and it worked successfully. I know how this control works.
The required Excel-Like Grid is actually very simple, as it has max 4 columns, but it must provide the following feature:
1. The Laboratory Test Name is a Free Text must be based on AutoComplete Ajax Control (as referenced above). As soon as the user enters some characters, it should poup and the user can choose one entry.
2. Ability to delete any row in the grid by pressing the "Del" key on the keyboard.
3. Ability to add a new row easily. Any simple method to allow this is OK like "New" command button, or leave one empty row at the end.
4. The Grid is to be Bound to a CslaDataSource (similar to ObjectDataSource). I tested using CslaDataSource with EO.Web Grid Control for Display (Database Read/Fetch), and it was successful. But I did not test Edit/Insert/Delete yet. I hope it works much like the .NET GridView. I have developed the Data Source to support all CRUD Operations for the Grid Control.
I am now working on the implementation, and I hope you can give me hints to make my job easier.
Tarek.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, As to your questions: 1. You will need to use CustomColumn. This is an advanced feature that allows you to take full control the Grid's edit/display UI. With CustomColumn, the Grid only maintains the cell value, you are responsible for displaying the value (formatting the cell value to the result HTML that you want to display) and editing the value (this allows you to use your own edit UI such as AutoComplete Ajax control). Please see here for details about how to use CustomColumn: http://doc.essentialobjects.com/library/1/grid/custom_column.aspx2. The Grid does not have this built-in but it allows you to delete a row programmatically. So you can capture Del key by yourself and then call the following function to implement this feature: http://doc.essentialobjects.com/library/1/jsdoc.public.grid.deleteitem.aspx3. These are supported. Please refer to the documentation and sample project; 4. This is where our Grid differs from .NET GridView. Please see here for more details: http://doc.essentialobjects.com/library/1/grid/editing.aspxThanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
I faced this small issue when binding data to the EO.Web Grid Control.
I am using this code to bind the data of "gridLabItems" EO.Web Grid Control, and it works, but, if the result is "Nothing", it will still maintain the grid items of the last post-back:
Protected Sub dtaLabRequest_SelectObject(ByVal sender As System.Object, ByVal e As Csla.Web.SelectObjectArgs) Handles dtaLabRequest.SelectObject
Try
Dim theLabRequest As LabRequest
theLabRequest = GetLabRequest()
e.BusinessObject = theLabRequest
If Not theLabRequest Is Nothing Then
gridLabItems.DataSource = theLabRequest.RequestItems
Else
gridLabItems.DataSource = Nothing
End If
gridLabItems.DataBind()
Catch ex As Exception
Me.ErrorLabel.Text = ex.Message
End Try
End Sub
How I can force the Grid Control to list nothing if the datasource is nothing or empty ?
Appreciate your reply.
Tarek.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Try to bind the Grid to an empty array (an array with zero elements) and that should clear out the Grid.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
I wrote the following javascript to implement the Delete Row function by "Del" key.
Code:
function LabRequestItemsGridKeyUp() {
var theGrid;
if (event.keyCode == 46) {
theGrid = eo_GetContainer(event.srcElement, 'Grid');
if (theGrid) {
if (theGrid.getItemCount() > 0 && theGrid.getSelectedItem()) {
theGrid.deleteItem(theGrid.getSelectedItem().getIndex());
GridSelectNearestItem(theGrid, theGrid.getSelectedItem().getIndex());
}
}
}
}
function GridSelectNearestItem(theGrid, idx) {
var i;
var idxSelected=-1;
if (theGrid && theGrid.getItemCount() > 0) {
for (i=idx; i >= 0; i--) {
var itemCurrent = theGrid.getItem(i);
if (itemCurrent && !itemCurrent.isDeleted()) {
idxSelected = i;
break;
}
}
if (idxSelected < 0) {
for (i=idx+1; i < theGrid.getItemCount(); i++) {
var itemCurrent = theGrid.getItem(i);
if (itemCurrent && !itemCurrent.isDeleted()) {
idxSelected = i;
break;
}
}
}
}
if (idxSelected >=0) {
theGrid.selectItem(idxSelected);
theGrid.getSelectedItem().ensureVisible();
}
}
and, on the server-side, I did the following:
Code:
Protected Sub gridLabItems_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles gridLabItems.Load
Dim myGrid As EO.Web.Grid
myGrid = sender
myGrid.Attributes.Item("onkeyup") = "LabRequestItemsGridKeyUp()"
End Sub
the above code is working fine. I am posting just to confirm if this is the correct "Scientific" approach. Tarek.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Yes. This should work.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
Is it possible to assign a multi-value key field (Compsite Key) to EO.Web Grid Control, KeyField Property ? http://doc.essentialobjects.com/library/1/eo.web.grid.keyfield.aspxTarek.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
It's a single property. So it's up to you to encode/decode multiple values into/from a single value if you must store multiple values inside a single property.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
I am now implementing AutoComplete Ajax Control using <eo:CustomColumn />. I have also examined the sample demo in details. I am finding one difficulty. As you know, I have to use the <asp:TextBox /> server control to implement the AutoComplete function. This means I have to set the ID of this control, but I will not be able to get the ID of the ClientSide Control. The Client ID of this control is needed inside "ClientSideEndEdit" and "ClientSideBeginEdit" javascript function. I cannot figure out how to access the TexBox Control inside Javascript. In the Demo you provided, you are not using server web controls, it is a standard HTML Control: <select id="product_dropdown" style="width:200px" onchange="on_product_change()"> How I can access the HTML Control of the related ASP TextBox inside the related JavaScript functions ? Tarek.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
Use the following code to find out the client ID:
((EO.Web.CustomColumn)Grid1.Columns[x]).EditorInstance.FindControl("your_control_id").ClientID
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
eo_support wrote:Hi,
Use the following code to find out the client ID:
((EO.Web.CustomColumn)Grid1.Columns[x]).EditorInstance.FindControl("your_control_id").ClientID
Thanks Ok, I understand what you mean. The above script, is server-side. I need this value to be available on the client JavaScript. So, the only way to get this value is to push this value to the client by initializing a hidden <INPUT> HTML element using in-line server script using the following tags: <% %> . Right ? I figured out another way to get the HTML Element of theClient ID using Javascirpt:
Code:
function fn_be_LabTestKeyValue(cell) {
// Begin Edit Function
var txtLabTestKeyValue = "txtLabTestKeyValue"; // the ASP TexBox Control ID
var elmHTML;
var elmID;
elmID = cell.getGrid().getId() + "_edit_" + txtLabTestKeyValue;
elmHTML = document.getElementById(elmID);
cell.getGrid().selectItem(cell.getItemIndex());
elmHTML.value = cell.getValue();
}
Let me know if this is OK too. Tarek.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Both are good. You can also put the code we provided directly inside your script with <%= %>. For example:
var eleHTML = document.getElementById("<%=copy the code we provided here%>");
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
I was successfull in implementing the following with EO.Web Grid: 1. Data Binding for Display and Data Update on the Database. 2. Using AutoComplete Ajax inside <eo:CustomColumn /> control, as follows:
Code:
<eo:CustomColumn DataField="LabTestKeyValue" HeaderText="Laboratory Test Details (Test ID - RefID - Catg - Test Name)" Width="350" ClientSideBeginEdit="fn_be_LabTestKeyValue" ClientSideEndEdit="fn_ee_LabTestKeyValue" > <EditorTemplate> <asp:TextBox ID="txtLabTestKeyValue" Width="340" runat="server" /> <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender4" TargetControlID="txtLabTestKeyValue" runat="server" ServicePath="~/MyWebService.asmx" ServiceMethod="GetLabTestKeyValue" CompletionInterval="1000" CompletionSetCount="12" EnableCaching="true" MinimumPrefixLength="3" /> /> </EditorTemplate> </eo:CustomColumn>
All is working fine, but I am facing the following problems: 1. The height of the <INPUT> HTML Element (CustomColumn) during Edit is about 6 px more than the height of the standard <TextBoxColumn>. And also, it looks a bit different. How I can ensure the styling of this CustomColumn TexBox is similar to all other elements during edit ? 2. When the AutoComplete Ajax Control gives the Popup Box after typing few characters in the "CustomColumn" input, and if the grid row is near the bottom of the grid, the popup box will be truncated, or it will not be shown at all. This is becuase the height of the popup is bypassing the bottom of the Grid. How I can ensure the the AutoComplete Popup Box will be visible even if it is near the bottom of the grid ? Tarek.
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
I am posting more details hope this will help find a reasonable solution. See the snapshots below: Grid in Read Mode: http://bit.ly/bLFfUw Grid in edit mode, with AutoComplete looking OK: http://bit.ly/9y7q2A Grid in edit mode with AutoComplete Truncated becuase its longer than the bottom edge of the grid: http://bit.ly/b0FStTI did extensive analysis and following is the outcome: 1. The Grid Control is a DIV element with Overflow attribute set to hidden. When I modified this attribute by force during debug mode under IE 8, the AutoComplete worked fine, but all the other rows became visible too which is a mess. 2. I was able to write some client javascript for the AutoComplete "OnClientShown" to remove the Completion List Element from the Grid Container, and add it back to the document body element. This worked, but there is still some error rate in caculating the absolute position of the List Element relative to the body element. With this method, the AutoComplete List is showing 10px more below the TextBox. See code below:
Code:
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft; // - el.scrollLeft;
_y += el.offsetTop; // - el.scrollTop;
el = el.parentNode;
}
return { top: _y, left: _x };
}
function OnClientShown(source, eventArgs){
//alert("OnClientShown");
var elmComp = source.get_completionList();
var theGrid = eo_GetContainer(source.get_element() , 'Grid');
var elmGrid = document.getElementById(theGrid.getId());
var GridOffset = getOffset(elmGrid);
var CompOffset = getOffset(elmComp);
var GridBottom = GridOffset.top + elmGrid.offsetHeight;
var CompBottom = CompOffset.top + elmComp.offsetHeight;
var GridIndex = parseInt(elmGrid.zIndex)
if (isNaN(GridIndex)) {
GridIndex = 0;
}
elmComp.parentNode.removeChild(elmComp);
elmComp.style.position = "absolute";
elmComp.style.posTop = CompOffset.top;
elmComp.style.posLeft = CompOffset.left;
elmComp.style.zIndex = GridIndex + 1000;
document.body.appendChild(elmComp);
}
Code:
<asp:TextBox ID="txtLabTestKeyValue" Width="340" runat="server" /> <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender4" TargetControlID="txtLabTestKeyValue" runat="server" ServicePath="~/MyWebService.asmx" ServiceMethod="GetLabTestKeyValue" CompletionInterval="1000" CompletionSetCount="12" EnableCaching="true" MinimumPrefixLength="3" OnClientShown="OnClientShown" CompletionListElementID="autocompLabTestKeyValue" />
I need your help. Tarek.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Sorry about the delay. It has taken us a little while to come up a solution for you. The root of the problem is AutoComplete creates its popup inside the container. To ensure the popup not to be clipped and also to effectively control its zIndex, the popup must be created outside of any possible positioned container. If you look at our DatePicker control, you will see our DatePicker control can display popup beyond the Grid border. To resolve this issue, the textbox and AutoCompleteExtender must be moved outside of the Grid. The basic idea is place a "place holder" DIV inside the CustomColumn's EditorTemplate, but leave the real "editor", which includes the textbox and the AutoCompleteExtender outside of the Grid. Then when user enters edit mode, we dynamically align the "editor" to the "place holder" so the editor appears on top of the cell to be edited. The code will be something like this:
Code: JavaScript
//This function is called when the cell enters edit mode.
//We dynamically align the "editor" div to "anchor div
//in this function
function begin_edit()
{
//The call must be delayed with a timer because
//at this moment "anchor" is not visible yet
setTimeout(function()
{
//Get the "anchor" position
var e = $get("anchor");
var b = $common.getBounds(e);
//Move the "editor" to the same position
//and display the editor at the same time
e = $get("editor");
e.style.display = "";
$common.setLocation(e, b);
}, 10);
}
//This function is called when the cell exists
//edit mode
function end_edit(cell)
{
//Hide the editor
var e = $get("editor");
e.style.display = "none";
//Return the new value to the Grid
var input = $get("<%=myTextBox.ClientID%>");
return input.value;
}
The CustomColumn's EditorTemplate contains the "anchor" div only. It also has ClientSideBeginEdit and ClientSideEndEdit set to the above JavaScript functions:
Code: HTML/ASPX
....
<eo:CustomColumn
ClientSideBeginEdit="begin_edit"
ClientSideEndEdit="end_edit">
<EditorTemplate>
<div id="anchor" style="width:1px;height:1px;"></div>
</EditorTemplate>
</eo:CustomColumn>
Finally, the "editor" div contains the textbox and AutoCompleteExtender and it is outside of the Grid:
Code: HTML/ASPX
<div id="editor" style="position:absolute;z-Index:1000">
<asp:TextBox runat="server"
ID="myTextBox" Width="100" autocomplete="off" />
<ajaxToolkit:AutoCompleteExtender .....>
.....
</ajaxToolkit:AutoCompleteExtender>
</div>
Putting all these together should achieve the intended result. Note you may still need to polish the code a little bit such as applying necessary CSS styles (borders, font, color, etc) to the textbox so that it looks the same as other textboxes in the Grid, or even automatically focus the textbox when it enters edit mode, etc. All those are very easy. Hope this helps. Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 3/27/2010
Posts: 48
|
I followed your instructions accuratly ... Great ! It worked. Your support is wonderful.
Kindly see the images I posted earlier as I will refer to them here.
I have placed the editor/ajax elements before the "Save Test Results" button.
I have the following new small problems !
1. The "editor" is not capturing the "Esc" Key to cancel the edit. But, when I press the "Esc" key, the edit is cancelled only for the regular column, but for the Custom (TextBox under Ajax). When I press Esc, it remains in Edit Mode, and when I press Enter after Esc it will fire the "end_edit" event, and it will save the value back to the cell.
2. When I press Tab in Edit Mode, it jumps to the next element as in the document, which is the Save Button.
Appreciate your feedback.
Tarek.
|
|