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

Create New

New Discussion
New Question
New Product Feedback

Post Reply

Allan DonaldMember

Posted: January 21, 2010 6:51 AM

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>

Quick Reply

Quote

All Replies

Glenn LayaarSupport

Posted: January 26, 2010 4:17 AM in response to Allan Donald

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));
}

Quick Reply

Quote

Allan DonaldMember

Posted: January 28, 2010 12:36 AM in response to Glenn Layaar

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].

Quick Reply

Quote

Glenn LayaarSupport

Posted: January 28, 2010 4:00 AM in response to Allan Donald

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));
}