On Selection of ProductName need to autofeel 10 and some custom Text in QuantityPerUnit new row's cell.

You can try to use these approaches for such scenario.

First option: to use OnExitEditMode of WebGrid.

OnExitEditMode client-side event of WebGrid specifies the client side (JavaScript) function that will be invoked when edit mode is being ended. Add following snippet code in OnExitEditMode will auto fill string to QuantityPerUnit cell.

function WebGrid1_OnExitEditMode(controlId, tblName, editObject)
{
    var WebGrid1 = ISGetObject(controlId);
    var editObjValue = editObject.element.Value;
            
    if (editObject.element.Name == "WebComboProducts" && editObjValue == "1")
    {
        var selObj = WebGrid1.GetSelectedObject();
        var cell = selObj.ToRowObject().GetCells();
                
        cell.GetNamedItem("QuantityPerUnit").SetText("10 and some custom text", true);
        cell.GetNamedItem("QuantityPerUnit").SetValue("10 and some custom text");
    }

    return true;
}

Another option is to use OnAfterItemSelected client-side event of WebCombo, in this case is the WebComboProducts.

OnAfterItemSelected client-side event of WebCombo specifies the client side (JavaScript) function that will be invoked after an item is selected. The following is the example on how to set text and value of QuantityPerUnit cell in WebGrid after an item of ProductsCombo is selected.

function WebComboProducts_OnAfterItemSelected(controlId)
{
    var combo = ISGetObject(controlId);
    var grid = ISGetObject("WebGrid1");
    var row = grid.GetSelectedObject().GetRowObject();

    if (combo.Text == "Chai")
    {
        var cells = row.GetCells();
        var cellQuantityPerUnit = cells.GetNamedItem("QuantityPerUnit");

        cellQuantityPerUnit.SetText("10 and some custom text", true);
        cellQuantityPerUnit.SetText("10 and some custom text");
    }

    return true;
}

Hope this help.

Thank you for the sent sample.

I’m currently investigating the sample and will get back to you as soon as possible.

Edited on November 2, 2015 6:35 AM
Reason: Update solution

If I try to select SupplierId first then ProductName shows empty rows.

The ProductName combo shows empty rows because it was filtered by a white space. Please allow me to show where the "white space" is.

1. View Webcomboexpbasic.aspx sample file in IE 11 browser.
2. After the page rendered, move the cursor to the textbox of WebComboSuppliers.
3. A white-space is appearing in the textbox of WebComboSuppliers.
4. Within the textbox, you should be able to move the cursor to the left/right. It indicates that there is a white-space in the textbox.
5. Try to delete the white-space and WebCombo should shows their items without problems.
6. Select "SupplierID" equals to 1.
7. Move the cursor to the textbox of WebComboProducts.
8. White-space also appear in the textbox of WebComboProducts. Try to repeat step #3 to #5.

By default, WebCombo will filter its items based on the character typed or entered in the texbox. The result will be shown in the ResultBoxWindow of WebCombo.

It shows empty rows because there is a white-space in the textbox. "Starts with" empty-space is applied to the WebCombo items. It shows empty rows because the filter results is null. No rows match after the filter applied, in this case is "Starts with" empty-space.

Please follow the steps below in order to resolve this white-space problem:

1. Open Webcomboexpbasic.aspx.cs in Visual Studio or text editor.
2. Find/go to the WebGrid1_PrepareDataBinding event declaration.
3. Removes the line which assigns SupplierID and ProductName column with Custom ColumnType.
4. Save the changes and the white-space problem should be resolves now.

After the changes, the code will look like following snippet code:

protected void WebGrid1_PrepareDataBinding(object sender, ISNet.WebUI.WebGrid.DataSourceEventArgs e)
{
    //WebGrid grid = (WebGrid)sender;
    if (!IsPostBack)
    {
        //WebGrid1.ClearCachedDataSource();
        WebGrid1.RetrieveStructure();
        if (WebGrid1.RootTable.Columns.Exists("SupplierID"))
        {
            WebGrid1.RootTable.Columns.GetNamedItem("SupplierID").EditType = EditType.WebComboNET;
            WebGrid1.RootTable.Columns.GetNamedItem("SupplierID").WebComboID = "WebComboSuppliers";
            WebGrid1.RootTable.Columns.GetNamedItem("SupplierID").FilterEditType = FilterEditType.TextBox;
            WebGrid1.RootTable.Columns.GetNamedItem("SupplierID").DefaultText = string.Empty;
            WebGrid1.RootTable.Columns.GetNamedItem("SupplierID").DefaultValue = string.Empty;
            //WebComboSuppliers.Visible = true;
        }
        if (WebGrid1.RootTable.Columns.Exists("ProductName"))
        {
            WebGrid1.RootTable.Columns.GetNamedItem("ProductName").EditType = EditType.WebComboNET;
            WebGrid1.RootTable.Columns.GetNamedItem("ProductName").WebComboID = "WebComboProducts";
            WebGrid1.RootTable.Columns.GetNamedItem("ProductName").FilterEditType = FilterEditType.TextBox;
            WebGrid1.RootTable.Columns.GetNamedItem("ProductName").DefaultText = string.Empty;
            WebGrid1.RootTable.Columns.GetNamedItem("ProductName").DefaultValue = string.Empty;
            //WebComboSuppliers.Visible = true;
        }
        WebGrid1.RootTable.Columns.GetNamedItem("ProductID").Visible = false;
    }
}

Please feel free to let me know if you have different result.

Once the selection from both combo is done then I can only change data after deleting the text inside otherwise in list only selected text is shown.

This is not bug. By default, WebCombo will show only one value after you input a text such as Maria. However, you can show all rows on dropdown by enabling AlwaysShowAllRowsOnDropdown property of WebCombo. This property Determines whether or not to display all rows when dropdown arrow is clicked.

To always show all rows on dropdown combo

1. Open WebCombo Designer - Advanced Settings - LayoutSettings.
2. Set AlwaysShowAllRowsOnDropdown to True.

Hope this helps.

It would be nice if you post the JS exception problem in a new thread since it is a different topic and doesn't have any relation to this grid hiding issue.

I have investigated the report and found that the problem is not reproducible. Will let you know the detail result on your new thread which discuss about the JS exception in Safari.js file when configure the application in https.

... We are facing the below error in google chrome browser.

Uncaught RangeError: Maximum call stack size exceeded in Safari.js file.

This happens when we configure the application in https in IIS as website...

Does the above problem related with the problem discussed in this thread, Webcombo Hides a Grid component in the Page? Or is it a different topic?

Please let me know your response so that I can assist you further.

The combo and grid works fine in Firefox. Thank you for resolving the issue.

Glad to hear the good news.

Should you need further assistance or run into any problems regarding our controls, feel free to post it into our forum. We would be happy to assist you again.