Intersoft Community - WebCombo - Upgrading WebCombo From Version 2 to 6

Upgrading WebCombo From Version 2 to 6

Hans — Mon, 25 Nov 2013 22:23:44 GMT

Hello,

Thank you for the reply and I am sorry for the late response.

I have re-uploaded the video to the SkyDrive.

Regarding the “Styling” issue, in WebCombo Samples Solution, there are a couple of WebCombo sample that using customize style (for example: Style_GreenGrass.aspx; Style_XPBlue.aspx; etc.) and it works fine.
Please kindly have review on those samples.
In my humble opinion, please kindly try WebCombo 6 in the latest IE browser version, due to basically WebCombo 6 not designed for older IE browser version.

Regarding “LoadOnDemand” feature, that is default behavior in WebCombo 6. You should click on “down arrow” to load more data.

Thank you.

Regards,

Hans.

Upgrading WebCombo From Version 2 to 6

craig.bennett@vc3.com — Fri, 22 Nov 2013 09:52:44 GMT

Thanks for giving this a try. I cannot access your video from the attached file and it does not appear to be on the SKyDrive page. So, I cannot see what you saw.

I took your code and see that the red works on the selected row. When the line setting UseDefaultStyle is commented out, I can get that to work also. However, I cannot style other things such as the row height and the column borders. Please uncomment the line setting UseDefaultStyle = true and then try it. Doing this will show the results area with those styles working. Also, with the line commented out, as I move my mouse over the rows, the row height appears to change. So, I don't think the styles are working properly.

I uploaded a file to your SkyDrive folder, linked in your post, named WebComboCompare.gif. The image on the left shows the WebCombo, generated from your code, with the UseDefaultStyle line commented out. The image on the right shows the WebCombo after uncommenting the UseDefaultSyle line. Nothing else was change in the code or CSS file.

Also, I had another question in the prior posts. In my existing application using WebCombo 2, when I use the down arrow to move through the results and reach the bottom, more data is retrieved automatically. In this example, the cursor wraps back to the top and I must click the more button to get more data. How can I enable this feature in WebCombo 6 so that data is automatically loaded when reaching the end of the current data?

Thanks

Upgrading WebCombo From Version 2 to 6

Hans — Thu, 21 Nov 2013 23:00:36 GMT

Hello,

Thank you for the sample.

I try to make a sample based on your code. I make a couple of changes from your code.
In Default.cs file, from: “ISNet.WebUI.DisplayType.Normal;” to “ISNet.WebUI.DisplayType.PopUp;”.
In Style.css file, in “.comboRowOverMini” section, I modify the background color to “Red”.
And it works fine on my end.

I provide the sample and video about the result that I get on my local end.
Please kindly have review on the sample & video and please let me know your response.

Or you could download the video from this link: http://sdrv.ms/17Sxpyl

Regards,

Hans.

Upgrading WebCombo From Version 2 to 6

craig.bennett@vc3.com — Wed, 20 Nov 2013 07:55:47 GMT

I'll just put the code here. The Default.aspx page contains the WebCombo. I have a Container.aspx page that embeds Default.aspx in an iframe.

web.config

<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
    <configSections>
    </configSections>
    <appSettings file="">
        <clear />
        <add key="ISNet.WebUI.ISRes_Registered" value="true"/>
        <add key="ISNet.WebUI.WebCombo.v6_0_7200.RenderingMode" value="Quirks"/>
        <add key="ISNet.WebUI.WebCombo.v6_0_7200.ViewStateStorage" value="None" />
        <add key="ISNet.WebUI.WebCombo.v6_0_7200.ViewStateItems" value="Behavior" />
        <add key="ISNet.WebUI.WebCombo.v6_0_7200.CachePriority" value="Normal" />
        <add key="ISNet.WebUI.WebCombo.v6_0_7200.RunTimeLicenseKey" value="?????-????-?????" />
    </appSettings>
    <system.web>
        <httpRuntime targetFramework="4.5" />
        <compilation debug="true" targetFramework="4.5">
            <assemblies>
                <add assembly="ISNet.WebUI, Version=3.0.5000.1, Culture=neutral, PublicKeyToken=B1F2A8511635667A"/>
                <add assembly="ISNet, Version=3.0.5000.1, Culture=neutral, PublicKeyToken=B1F2A8511635667A"/>
            </assemblies>
        </compilation>
        <httpHandlers>
            <add path="ISRes.axd" verb="GET" type="ISNet.WebUI.WebResourceHandler, ISNet.WebUI, Version=3.0.5000.1, Culture=neutral, PublicKeyToken=b1f2a8511635667a" validate="true"/>
        </httpHandlers>
    </system.web>
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <handlers>
            <add name="ISRes.axd_GET" path="ISRes.axd" verb="GET" type="ISNet.WebUI.WebResourceHandler, ISNet.WebUI, Version=3.0.5000.1, Culture=neutral, PublicKeyToken=b1f2a8511635667a" preCondition="integratedMode"/>
        </handlers>
    </system.webServer>
</configuration>

Styles.css

body { padding:0px; margin: 0px;}
.comboFrameMini { background-color:#FFFFFF;border-color:#999999;border-width:1px;border-style:solid;}
.comboFrameOverMini { background-color:#FFFFFF;border-color:#999999;border-width:1px;border-style:solid;}
.comboTextBoxMini { background-color:#FFFFFF;border-width:0px;border-style:none; font-family:Verdana;  font-size:8pt;  font-weight:normal; color:#000000;}
.comboTextBoxOverMini { background-color:#FFFFFF;border-width:0px;border-style:none; font-family:Verdana;  font-size:8pt;  font-weight:normal;}
.comboSearchSpanMini { background-color:#999999; font-family:Webdings;  font-size:9pt;  font-weight:normal;color:#E9EBF4;cursor:Hand;}
.comboSearchSpanOverMini { background-color:#999999; font-family:Webdings;  font-size:9pt;  font-weight:normal;color:#E9EBF4;cursor:Hand;}
.comboMoreMini { background-color:#FFFFFF;border-color:#FFFFFF;border-width:1px;border-style:solid;}
.comboMoreOverMini { background-color:#E9EBF4;border-color:#B0C4DE;border-width:1px;border-style:solid;}
.comboRowMini { background-color:#FFFFFF; height: 20px; }
.comboRowOverMini { background-color:#FFFFFF; height: 20px; }
.comboResultBoxMini {  background-color:#FFFFFF;font-family:Verdana;  font-size:8pt;  font-weight:normal;border-collapse:collapse;}
.comboResultFrameMini { background-color:#FFFFFF;border-color:#666666;border-width:1px;border-style:solid;height:1000px;}
.comboStatusBoxMini { background-color:#858585; font-family:Verdana;  font-size:8pt;  font-weight:normal;color:#ffffff;}
.comboHeaderMini { background-color:#E7F0F8; font-family:Verdana;  font-size:8pt;  font-weight:bold;color:#000000;border-right: aliceblue 1px solid; padding:3px 3px 3px 3px ;}
.comboColumnMini { background-color:#FFFFFF; text-overflow: ellipsis; overflow: hidden; padding:3px 3px; border-width:1px; border-style:solid; border-color: #cccccc; }
.comboSelectedRowMini { background-color:#FFFFCC; color:#000000;font-family:Verdana;  font-size:8pt;  font-weight:normal;height: 20px;}

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebComboTest.Default" %>
<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.0 Transitional//EN"">
<html>
<head id="Head1" runat="server">
    <link rel="stylesheet" type="text/css" href="Styles.css">
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:PlaceHolder ID="wc" runat="server"></asp:PlaceHolder>
        </div>
    </form>
</body>
</html>

Default.aspx.cs

using ISNet.WebUI.WebCombo;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebComboTest
{
    public class Default : System.Web.UI.Page
    {
        protected PlaceHolder wc;
        public class KeyAndValue
        {
            public string Key { get; set; }
            public int Value { get; set; }
        }
        List<KeyAndValue> data = new List<KeyAndValue>();
        protected void Page_Load(object sender, EventArgs e)
        {
            WebCombo combo = new WebCombo("combo");
            SetLayout(combo);
            combo.Width = Unit.Pixel(250);
            combo.InitializeDataSource += combo_InitializeDataSource;
            combo.InitializeLayout += combo_InitializeLayout;
            wc.Controls.Add(combo);
            LoadData();
        }
        void LoadData()
        {
            data.Add(new KeyAndValue { Key = "One", Value = 1 });
            data.Add(new KeyAndValue { Key = "Two", Value = 2 });
            data.Add(new KeyAndValue { Key = "Three", Value = 3 });
            data.Add(new KeyAndValue { Key = "Four", Value = 4 });
            data.Add(new KeyAndValue { Key = "Five", Value = 5 });
            data.Add(new KeyAndValue { Key = "Six", Value = 6 });
            data.Add(new KeyAndValue { Key = "Seven", Value = 7 });
            data.Add(new KeyAndValue { Key = "Eight", Value = 8 });
            data.Add(new KeyAndValue { Key = "Nine", Value = 9 });
            data.Add(new KeyAndValue { Key = "Ten", Value = 10 });
            data.Add(new KeyAndValue { Key = "Eleven", Value = 11 });
            data.Add(new KeyAndValue { Key = "Twelve", Value = 12 });
            data.Add(new KeyAndValue { Key = "Thirteen", Value = 13 });
            data.Add(new KeyAndValue { Key = "Fourteen", Value = 14 });
            data.Add(new KeyAndValue { Key = "Fifteen", Value = 15 });
            data.Add(new KeyAndValue { Key = "Sixteen", Value = 16 });
            data.Add(new KeyAndValue { Key = "Seventeen", Value = 17 });
            data.Add(new KeyAndValue { Key = "Eighteen", Value = 18 });
            data.Add(new KeyAndValue { Key = "Nineteen", Value = 19 });
            data.Add(new KeyAndValue { Key = "Twenty", Value = 20 });
            data.Add(new KeyAndValue { Key = "Twenty-One", Value = 21 });
            data.Add(new KeyAndValue { Key = "Twenty-Two", Value = 22 });
            data.Add(new KeyAndValue { Key = "Twenty-Three", Value = 23 });
            data.Add(new KeyAndValue { Key = "Twenty-Four", Value = 24 });
            data.Add(new KeyAndValue { Key = "Twenty-Five", Value = 25 });
            data.Add(new KeyAndValue { Key = "Twenty-Six", Value = 26 });
            data.Add(new KeyAndValue { Key = "Twenty-Seven", Value = 27 });
            data.Add(new KeyAndValue { Key = "Twenty-Eight", Value = 28 });
            data.Add(new KeyAndValue { Key = "Twenty-Nine", Value = 29 });
            data.Add(new KeyAndValue { Key = "Thirty", Value = 30 });
        }
        void SetLayout(WebCombo combo)
        {
            combo.AllowAutoPostback = true;
            combo.LayoutSettings.ResultBoxWindowType = ISNet.WebUI.DisplayType.Popup;  // LayoutEventArgs issues seem to be fewer when set to Normal.  However, need popup to work.
            combo.LayoutSettings.ComboMode = Mode.MultipleColumns;
            combo.LayoutSettings.StatusBoxPosition = BoxPosition.Top;
            combo.LayoutSettings.ResultBoxHeight = 360;
            combo.LayoutSettings.AllowFloatingText = false;
            //combo.UseDefaultStyle = true;  // Uncommenting helps
            //combo.LayoutSettings.AllowDefaultStyleMerging = false;
            combo.LayoutSettings.ColumnWidthDefault = Unit.Pixel(50);
            combo.LayoutSettings.MoreButtonStyle.Normal.CssClass = "comboMoreMini";
            combo.LayoutSettings.MoreButtonStyle.Over.CssClass = "comboMoreOverMini";
            combo.LayoutSettings.FrameStyle.Normal.CssClass = "comboFrameMini";
            combo.LayoutSettings.FrameStyle.Active.CssClass = "comboFrameMini";
            combo.LayoutSettings.FrameStyle.Over.CssClass = "comboFrameOverMini";
            combo.LayoutSettings.TextBoxStyle.Normal.CssClass = "comboTextBoxMini";
            combo.LayoutSettings.TextBoxStyle.Active.CssClass = "comboTextBoxMini";
            combo.LayoutSettings.TextBoxStyle.Over.CssClass = "comboTextBoxOverMini";
            combo.LayoutSettings.ResultBoxStyle.CssClass = "comboResultBoxMini";
            combo.LayoutSettings.RowStyle.Normal.CssClass = "comboRowMini";
            combo.LayoutSettings.RowStyle.Over.CssClass = "comboRowOverMini";
            combo.LayoutSettings.HeaderStyle.CssClass = "comboHeaderMini";
            combo.LayoutSettings.StatusBoxStyle.CssClass = "comboStatusBoxMini";
            combo.LayoutSettings.SelectedRowStyle.CssClass = "comboSelectedRowMini";
            combo.LayoutSettings.ResultFrameStyle.CssClass = "comboResultFrameMini";
            combo.LayoutSettings.ColumnStyle.CssClass = "comboColumnMini";
        }
        void combo_InitializeDataSource(object sender, DataSourceEventArgs e)
        {
            WebCombo combo = (WebCombo)sender;
            e.DataSource = data;
        }
        void combo_InitializeLayout(object sender, LayoutEventArgs e)
        {
            WebCombo combo = (WebCombo)sender;
            combo.DataTextField = "Key";
            combo.DataValueField = "Value";
        }
    }
}

Container.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Container.aspx.cs" Inherits="WebComboTest.Container" %>
<!DOCTYPE HTML PUBLIC ""-//W3C//DTD HTML 4.0 Transitional//EN"">
<html>
<head id="Head1" runat="server">
    <link rel="stylesheet" type="text/css" href="Styles.css">
</head>
<body>
    <form id="form1" runat="server">
        <iframe width="251" height="21" scrolling="no" src="Default.aspx"></iframe>
    </form>
</body>
</html>

Container.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebComboTest
{
    public class Container : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
    }
}

Upgrading WebCombo From Version 2 to 6

Hans — Wed, 20 Nov 2013 07:27:33 GMT

Hello,

Could you please resend the sample once again?
However please kindly upload the sample to another server and provide me the link to download the sample.
Because I can download your sample properly if you attach the sample in this community site.

I apologize for any inconvenience.

Regards,
Hans.

Upgrading WebCombo From Version 2 to 6

craig.bennett@vc3.com — Tue, 19 Nov 2013 12:04:51 GMT

It appears to be an issue mainly when using a ResultBoxWindowType of Popup. When I set this to Normal, most of the style issues are fixed. However, our application currently has the WebCombo in a IFrame and will not work properly unless the type is set to Popup. The application is currently only used in IE 8. So, I have to make it work for that. In the near future, it will be migrated to IE9 and 10. I'll have more flexibility then.

I'm trying to create a sample application to show what I'm seeing but it appears to work differently. I'm getting script errors when the WebCombo page is placed inside an IFrame and the ResultBoxWindoType = Normal. However, even if I don't run it in an IFrame, the columns seem to lose their width when I hover over the rows. The first column expands to take up 100% of the results box.

I'll keep looking and try to post an example later today.

UPDATE: I've also been unable to get the currently selected row to be highlighted. And one other thing, in my existing application using the old version of WebCombo, when I move down the rows either by using the down arrow or mouse wheel, when I get to the last row, I get a postback to load more data. Using version 6.0, I can't seem to get this to work and must click the more button to get this to happen. How can this be enabled?

I'm including a simple example for your review. Again, I am trying to get this to work in IE8. I don't seem to have as many problems in Chrome. It mostly looks ok as it is in the example. If you comment out the UseDefaultStyle, you will see that the styles get lost.

Upgrading WebCombo From Version 2 to 6

bernard — Mon, 18 Nov 2013 23:58:44 GMT

Hi Keith,

I have tried to replicate your issue in our local end. Unfortunately, I couldn't replicate this issue in our local end. I'm using WebCombo 6 in IE8 with Quirks rendering mode. I also using HTML4 as doctype of my page. By using your description above, I can make my resultbox's column has 1px border and each row have white background for normal and hover by using CssClass property. Here's the screenshot:

http://www.mediafire.com/?hq1xunn0cyactb9

Is there any simple sample that can replicate this issue in our local end? I will gladly help you to trace this problem. Look forward to hear any feedback from you so I can help you further.

Regards,
Bernard

Upgrading WebCombo From Version 2 to 6

craig.bennett@vc3.com — Mon, 18 Nov 2013 15:08:00 GMT

Hi Hans,

I have removed the references to the CommonLibrary and am now usng SmartWebResources. This has things mostly working. However, I am initiallty trying to get the application running in IE8. Based on what you said above, and also what I've read in other discussions, I've set the RenderingMode to Quirks. I'm also using a ComboMode of MultipleColumns. The most obvious issue that I'm having now is the style specified for the columns by using LayoutSettings.ColumnStyle.CssClass = "myClass". This seems to work fine in Chrome but the syle doesn't get applied in IE8.

Other than the RenderingMode, is there anything that is needed to support IE8? I've seen where others have reported issues with IE8 but haven't found a good answer as to what to do.

UPDATE: To be more specific, I am attempting to style the WebCombo by using the available styles in LayoutSettings. Here is what I'm doing:

		combo.LayoutSettings.ComboMode = Mode.MultipleColumns;
                combo.LayoutSettings.StatusBoxPosition = BoxPosition.Top;
                combo.LayoutSettings.MoreButtonStyle.Normal.CssClass = "comboMoreMini";
                combo.LayoutSettings.MoreButtonStyle.Over.CssClass = "comboMoreOverMini";
                combo.LayoutSettings.FrameStyle.Normal.CssClass = "comboFrameMini";
                combo.LayoutSettings.FrameStyle.Active.CssClass = "comboFrameMini";
                combo.LayoutSettings.FrameStyle.Over.CssClass = "comboFrameOverMini";
                combo.LayoutSettings.TextBoxStyle.Normal.CssClass = "comboTextBoxMini";
                combo.LayoutSettings.TextBoxStyle.Active.CssClass = "comboTextBoxMini";
                combo.LayoutSettings.TextBoxStyle.Over.CssClass = "comboTextBoxOverMini";
                combo.LayoutSettings.RowStyle.Normal.CssClass = "comboRowMini";
                //combo.LayoutSettings.RowStyle.Over.CssClass = "comboRowOverMini";
                combo.LayoutSettings.ResultBoxStyle.CssClass = "comboResultBoxMini";
		combo.LayoutSettings.HeaderStyle.CssClass = "comboHeaderMini";
		combo.LayoutSettings.StatusBoxStyle.CssClass = "comboStatusBoxMini";
		combo.LayoutSettings.SelectedRowStyle.CssClass = "comboSelectedRowMini";
		combo.LayoutSettings.ResultFrameStyle.CssClass = "comboResultFrameMini";
		combo.LayoutSettings.ColumnStyle.CssClass = "comboColumnMini";
		combo.LayoutSettings.ResultBoxHeight = 360;

My ColumnStyle has border: solid 1px #cccccc; which works fine in Chrome but not in IE8. Also, if I set the RowStyle.Over.CssClass to be anything different from RowStyle.Normal.Class, the row loses it's styling, even if the stle contents are the same as in:

.comboRowMini { background-color:#FFFFFF; height: 20px; }
.comboRowOverMini { background-color:#FFFFFF; height: 20px; }

I am trying to enable the row highlighting when hover over a row. This works fine if I use the default style. I just can't seem to make it work when I style the control. I assumed it would be controlled with the RowStyle.Over property. I have found no documentation for the Over, Normal and Active properties. I assume they correspond to hover, non-focus and focus.

Thanks,

Keith

Upgrading WebCombo From Version 2 to 6

Hans — Sun, 17 Nov 2013 21:41:20 GMT

Hello,

I apologize for any inconvenience this problem may have caused you.

Thank you for the question regarding WebCombo.

What is the html doctype that you use in your page?’
If you use html 4 doctype, please try to set the “RenderingMode” property to “Quirks”.
If you use html 5 doctype, please try to set the “RenderingMode” property to “HTML5”.

However if the issue still persist, could you help me to provide me a simple runnable sample that replicates this issue?
So I can help you to investigate the issue further more.

Regards,
Hans.

Upgrading WebCombo From Version 2 to 6

craig.bennett@vc3.com — Fri, 15 Nov 2013 15:53:04 GMT

I'll answer my own question because I found others asking the same thing without an answer. I had added the SharedScriptDirectory, ScriptDirectory, and ImagesDirectory values to the appSettings section of the web.config using the Deployment Manager. However, I did not end the path with a "/" and therefore, code WebCombo code that constructs a path to images and scripts was not correct. Seems like a simple thing to be checked by the WebCombo code. And instead of displaying a "6" (caused by the SharedScriptDirectory not ending with a "/") display something meaningful. Now, I'm having issues attempting to load ISRes.axd?C/DD4_Over.gif and ISRes.axd?C/DD4_Active.gif. I'll still take any help I can get. Thanks.

Upgrading WebCombo From Version 2 to 6

craig.bennett@vc3.com — Fri, 15 Nov 2013 15:20:30 GMT

I have an application that has used WebCombo version 2 for years. It is using very basic features. The WebCombo is created at runtime in server code as part of a custom control. The data source is being set to a ICollection object. I have multiple columns and allow searching on several data fields. There have obviously been many breaking changes between 2 and 6.

After trying to get anything to work, I created a new empty ASP.Net project in VS2012 and added a web form. I added code to create a WebCombo object and load it with generic List of objects. I used sample code found here as my starting point. I see a rectangle where the WebCombo should be. But, the only thing I see is the number 6 in the right of it where I would expect to see the down arrow. I've tried this in Chrome, Firefox and IE8 with the same results.

Can someone give me some insight into the issue? I've found no help in the documentation or here.

Thanks!

Keith