Intersoft Community - WebCombo - Binding WebCombo Client Side

Binding WebCombo Client Side

yudi — Thu, 02 Jan 2014 21:32:10 GMT

I enclosed one working sample of client-binding WebCombo which implements data-table rebind. Please have the attached sample evaluated on your end and let me hear your feedback.

Binding WebCombo Client Side

simon.dunn — Sun, 29 Dec 2013 20:21:56 GMT

Thanks for the Help Yudi.

However when I get to SetDataSource it is unknown. Same for DataBind, Render, cancelBubble and returnValue. Do I have to set something else for these events to register?

Binding WebCombo Client Side

yudi@intersoftpt.com — Wed, 25 Dec 2013 20:28:34 GMT

Thank you for your recent inquiry regarding client-binding WebCombo.

Could you please try to use different approach to load new data to the wcStock WebCombo (to re-bind data table instead of adding new rows)? Following snippet code shows a simple sample to rebind data table.

function reloadStockItems (jsonItems)
{
    alert(jsonItems);
    var items = eval(jsonItems);
    
    var rows = purchaseOrder.wcStock.GetRows();
    for (var i = 0; rows[i] != null; i++)
    {
        rows.Remove(rows[i], true);
    }
    
    purchaseOrder.wcStock.Values = null;
	
	var dataTable = new ISDataTable();
    var idColumn = new ISDataColumn(dataTable);
    var descriptionColumn = new ISDataColumn(dataTable);
	var categoryDescriptionColumn = new ISDataColumn(dataTable);
	var groupDescriptionColumn = new ISDataColumn(dataTable);	
    
	/* setup data columns */
    dataTable.Name = dataTable.TableName = "Root";
    idColumn.Name = idColumn.ColumnName = "ID";
    descriptionColumn.Name = textColumn.ColumnName = "Text";
    categoryDescriptionColumn.Name = checkColumn.ColumnName = "Bool";
    groupDescriptionColumn.Name = descColumn.ColumnName = "Desc";
	
	/* add columns to data table */
    dataTable.Columns.Add(idColumn);
    dataTable.Columns.Add(descriptionColumn);
    dataTable.Columns.Add(categoryDescriptionColumn);
    dataTable.Columns.Add(groupDescriptionColumn);
	
	/* add rows to data table */
    for (var i = 0; i < 100; i++)
    {
        var dataRow = dataTable.NewRow();
        dataRow.Cells.GetNamedItem("ID").Value = i;
        dataRow.Cells.GetNamedItem("Text").Value = "Item " + i;
        dataRow.Cells.GetNamedItem("Bool").Value = (i % 3 != 0);
        dataRow.Cells.GetNamedItem("Desc").Value = "Description " + i;
        dataTable.Rows.Add(dataRow);
    }
	
	/* bind the data table to WebCombo */
    wcStock.SetDataSource(dataTable);
    wcStock.DataBind();
    wcStock.Render();
    event.cancelBubble = true;
    event.returnValue = false;
}

I found that (in a working sample) using this approach doesn’t trigger OnAfterItemSelected client-side event.
Please let us know whether this help or not.

Binding WebCombo Client Side

simon.dunn — Mon, 23 Dec 2013 22:34:44 GMT

Actually, I havent found the answer. The rows.Clear() actually did absolutely nothing at all, and that is why the next time I used the combo, it had all the right values in it - because it never cleared any. The incorrect values were all plugged onto the end....so still in the world of pain.

Binding WebCombo Client Side

simon.dunn — Sun, 22 Dec 2013 23:11:43 GMT

Ok found my own solution.

Instead of removing the old rows manually in a loop, instead simply use .Clear().

Second problem averted by checking Disabling he WebCombo at the beginning of reloadStockItems() then enabling it at the end, after the UpdateUI(). This didn't actually stop the _AfterItemSelected being called, but inside I protected the action by checking webCombo.FrameObj.disabled.

Binding WebCombo Client Side

simon.dunn — Sun, 22 Dec 2013 18:58:59 GMT

I have been trying to bind a webcombo client side, as the other controls are all working client side and with it running server side I would lose other data. I have given this a red-hot go and got it working for the initial load, but when the combo needs to be reloaded based on other changes on the page, and the second time around there are no "values" to retrieve.

                    <td class="EditField" colspan="7">
                        <ISWebCombo:WebCombo ID="wcStock" runat="server" DataMember="Stock" DataValueField="ID" DataTextField="Description" UseDefaultStyle="true" DropDownRows="1000000" Width="232px" BindingOperationMode="ClientBinding">
                            <Columns>
                                <ISWebCombo:WebComboColumn BaseFieldName="Description" HeaderText="Stock" Name="Description" Width="200px" />
                                <ISWebCombo:WebComboColumn BaseFieldName="CategoryDescription" HeaderText="Category" Name="CategoryDescription" Width="120px" />
                                <ISWebCombo:WebComboColumn BaseFieldName="GroupDescription" HeaderText="Group" Name="GroupDescription" Width="120px" />
                                <ISWebCombo:WebComboColumn BaseFieldName="ID" Hidden="true" Name="ID" Bound="false" />
                            </Columns>
                            <LayoutSettings AlwaysShowHelpButton="false" ComboMode="MultipleColumns" AlwaysShowAllRowsOnDropdown="true">
                                <ClientSideEvents OnAfterItemSelected="wcStock_AfterItemSelected" />
                            </LayoutSettings>
                        </ISWebCombo:WebCombo>
                        <asp:RequiredFieldValidator ID="valReqStock" runat="server" ControlToValidate="wcStock" Display="Dynamic" ErrorMessage="Please select a stock item" ValidationGroup="valGrpItems" />
                    </td>

javascript to remove existing data and reload - this does as expected - rows are removed and new rows added, but the ID Value is not readable the second time through :>

function reloadStockItems (jsonItems)
{
    alert(jsonItems);
    var items = eval(jsonItems);
    
    var rows = purchaseOrder.wcStock.GetRows();
    for (var i = 0; rows[i] != null; i++)
    {
        rows.Remove(rows[i], true);
    }
    
    purchaseOrder.wcStock.Values = null;
    
    rows = purchaseOrder.wcStock.GetRows();
    for (i = 0; i < items.length; i ++)
    {
        var stock = items[i];
    
        stock = stock.split('|');
        var newRow = purchaseOrder.wcStock.NewRow(stock[0]);
        newRow.Value = stock[0];
        var cells = newRow.GetCells();
        cells.GetNamedItem("Description").Text = stock[1];
        cells.GetNamedItem("CategoryDescription").Text = stock[2];
        cells.GetNamedItem("GroupDescription").Text = stock[3];
        
        rows.Add(newRow);
    }
    purchaseOrder.wcStock.RefreshValueItems();    
    purchaseOrder.wcStock.UpdateUI();
        
}

function wcStock_AfterItemSelected(controlId)
{         
    purchaseOrder.wcStock.AddInput("SelectedSupplierValue", purchaseOrder.lstDDSupplier.getSelectedValue());
    purchaseOrder.wcStock.AddInput("SelectedStockValue", purchaseOrder.wcStock.Value);  // <----- problem occurs here in that the values are all set to 0.
    purchaseOrder.wcStock.SendCustomRequest();
    return true;
}

My main issue is that after the combo is reloaded - the second time through (and every time afterwards) the Value is set to 0;

Me second problem, which is unpretty, is that for every row added to the combo, the AfterItemSelected event gets fired, without selection occuring (is before it is finished rendeering)

Any help would be appreciated.

cheers

Simon