Intersoft Community - WebGrid Enterprise - Web Grid data display in List Box

Web Grid data display in List Box

faizalrahman4u@live.com — Thu, 28 Jan 2010 05:56:20 GMT

It works..

Web Grid data display in List Box

Glayaar — Thu, 28 Jan 2010 04:00:12 GMT

It seems Firefox did not recognoze the Add function in the Options object. In order for compliance with Firefox we will have to add the new options using indexer. Here is the new snippet:

function display(idx) {

    var grid = ISGetObject("WGActivity");
    var tblElm = grid.RootTable.GetElement(WG40.BODY, WG40.HTMLTABLE);
    
    var selRow = tblElm.rows[idx];    
    var optText = "";
    var optVal = "";
    
    for (j = 0; j < selRow.cells.length; j++) {
        var val = selRow.cells[j].innerText;
        if(j == 0)
            optVal = optText = val;

        if (selRow.cells[j].getElementsByTagName("input").length > 0)
            if (!(val == " " || val == "<nobr> </nobr>") && 
                j > 0 && selRow.cells[j].getElementsByTagName("input")[0].checked)
                    optText += " " + val;   
    }

    var listBox = document.getElementById("lbactivity");
    var doAdd = true;
    
    for (var i = 0; i < listBox.options.length; i++)
    {
        if (listBox.options[i].value == optVal) {
            doAdd = false;
            listBox.options[i].text = optText;
            if (optText == optVal)
                listBox.options[i] = null; 
            break;
        }
    }

    if (doAdd)
        listBox.options[listBox.options.length] = (new Option(optText, optVal));
}

Web Grid data display in List Box

faizalrahman4u@live.com — Thu, 28 Jan 2010 00:36:26 GMT

Hi Glenn Layaar,

Thanks for ur reply..

In Firefox it will show all checkboxes. for that i hav added an if loop..

for (i = 0; i < tblElm.rows.length; i++) {
    for (j = 1; j < tblElm.rows[i].cells.length; j++) {
        var val = tblElm.rows[i].cells[j].innerText;
        if (tblElm.rows[i].cells[j].innerText != " ") {
         if(tblElm.rows[i].cells[j].innerHTML != "<nobr>&nbsp;</nobr>")
          {tblElm.rows[i].cells[j].innerHTML = "<INPUT id='h' TYPE=CHECKBOX  onClick='display(" + i + ");'>" + val;}
        }
    }
}
But is not displaying the clicked items in Listbox[Firefox].

Web Grid data display in List Box

Glayaar — Tue, 26 Jan 2010 04:17:24 GMT

You will need to modify the window onload function to pass the WebGrid rowIndex to the display function. Here is the snippet:

var i;
var j;

var grid = ISGetObject("WGActivity");
var tblElm = grid.RootTable.GetElement(WG40.BODY, WG40.HTMLTABLE);

var no = tblElm.rows.length;
for (i = 0; i < tblElm.rows.length; i++) {
    for (j = 1; j < tblElm.rows[i].cells.length; j++) {
        var val = tblElm.rows[i].cells[j].innerText;
        if (tblElm.rows[i].cells[j].innerText != " ") {
            tblElm.rows[i].cells[j].innerHTML = "<INPUT id='h' TYPE=CHECKBOX  onClick='display(" + i + ");'>" + val;
        }
    }
}

return true;

The display function wil be responsible to add, modify, delete the item in the ListBox when user checked the CheckBox. Here is the snippet:

function display(idx) {
    var grid = ISGetObject("WGActivity");
    var tblElm = grid.RootTable.GetElement(WG40.BODY, WG40.HTMLTABLE);
    
    var selRow = tblElm.rows[idx];    
    var optText = "";
    var optVal = "";
    
    for (j = 0; j < selRow.cells.length; j++) {
        var val = selRow.cells[j].innerText;
        if(j == 0)
            optVal = optText = val;
        if (val != " " && j > 0 && selRow.cells[j].getElementsByTagName("input")[0].checked)
            optText += " " + val;   
    }

    var listBox = document.getElementById("lbactivity");
    var doAdd = true;
    
    for (var i = 0; i < listBox.options.length; i++)
    {
        if (listBox.options[i].value == optVal) {
            doAdd = false;
            listBox.options[i].text = optText;
            if (optText == optVal)
                listBox.remove(i); 
            break;
        }
    }

    if (doAdd)
        document.getElementById("lbactivity").add(new Option(optText, optVal));
}

Web Grid data display in List Box

faizalrahman4u@live.com — Thu, 21 Jan 2010 06:51:51 GMT

I have a web grid which contains 4 fields as Name, 1, 2, 3, 4 in which name field displas names and other field diplays a single character(let it be A for one field D for other etc) as table given below.i am loading webgrid fields and values at runtime. on window load i am giving input check box as inner html for the fields 1,2,3,4 if character exists. Now my doubt is, when i click on the check box i have to disply the clicked character in the list box. For example if click on character A and D against name 'astr', the list box have to show it as astr A D. like that show for all check boxes i click. I want to do all these operations in client side..

Name	1	2	3	4
astr	A	D	C	T
bstr	C		T
cstr		T

Codes

Window onload function

window.onload = function() {

var i; var j;

var grid = ISGetObject("WGActivity");

var tblElm = grid.RootTable.GetElement(WG40.BODY, WG40.HTMLTABLE);

var no = tblElm.rows.length;

for (i = 0; i < tblElm.rows.length; i++) {

for (j = 1; j < tblElm.rows[i].cells.length; j++) {

var val = tblElm.rows[i].cells[j].innerText;

if (tblElm.rows[i].cells[j].innerText != " ") {

tblElm.rows[i].cells[j].innerHTML = "<INPUT id='h' TYPE=CHECKBOX onClick='display();'>" + val;

}

return true;

}

Webgrid and listbox

<tr>

<ISWebGrid:WebGrid ID="WGActivity" runat="server" Height="220px" Width="400px"

UseDefaultStyle="True" DefaultStyleMode="Elegant">

</Columns>

</RootTable>

<LayoutSettings GridLines="None" AllowDefaultStyleMerging="true" ApplyFiltersKey="Enter" AlwaysShowHelpButton="False" AutoFitColumns="true" AllowSorting="Yes"

AllowColumnSizing="No" RowHeaders="No" AllowFilter="Yes" AllowGrouping="Yes" ShowRefreshButton="false"

AllowExport="no" FilterBarVisible="false" AutoFilterSuggestion="True" HideColumnsWhenGrouped="No" >

</HeaderStyle>

</TextSettings>

</LayoutSettings>

</ISWebGrid:WebGrid>

</td>

</tr>

<tr>

<td>

<asp:ListBox ID="lbactivity" runat="server" Height="180px" SelectionMode="Multiple" Width="250px">

</asp:ListBox>

</td>

</tr>

</table>