[CLOSED] Checkboxgroup not retaining checkbox items

[Edward]

Hi

I think the checkboxes are not retained in the checkboxgroup. Also it looks like there is another (or related) problem with this control.

I'm using the build (downloaded yesterday):

 ex.net: 1, 0, 3910, 17017
 ext.utilities: 1, 0, 0, 17014

Let me explain:

On the onload I add a few checkbox items, those are visible. No problem. If I do an 'Addbuttons click' the added buttons from the onload are gone (count items == 0) ! Only the added buttons are there. This is not expected behaviour because I cannot see which one are checked !

uncommenting //CheckboxGroup1.Render(); does not make any difference.

Another issue I discovered is if you uncomment the value setting lines (like: //c1.Value = "onload 1"; ) you get exceptions.

I hope you can help with a solution or a work around.

protected void Page_Load(object sender, EventArgs e)
    {

        if (IsPostBack) return;

        var c1 = new Checkbox();
        //c1.Value = "onload 1";
        
        c1.BoxLabel = "onload 1";
        CheckboxGroup1.Items.Add(c1);

        var c2 = new Checkbox();
        //c1.Value = "onload 2";
        c2.BoxLabel = "onload 2";
        CheckboxGroup1.Items.Add(c2);

        X.Msg.Notify("added onload:", "total count:" + CheckboxGroup1.Items.Count).Show();
    }


    protected void BtnAddComboItems_Click(object sender, DirectEventArgs e)
    {

        X.Msg.Notify("before adding:", "total count:" + CheckboxGroup1.Items.Count).Show();

        var c1 = new Checkbox();
        //c1.Value = "added 1";
        c1.BoxLabel = "added 1";
        CheckboxGroup1.Items.Add(c1);

        var c2 = new Checkbox();
        //c1.Value = "added 2";
        c2.BoxLabel = "added 2";
        CheckboxGroup1.Items.Add(c2);

        //CheckboxGroup1.Render();

        X.Msg.Notify("added checkboxes", "total count:" + CheckboxGroup1.Items.Count).Show();
    }

    protected void BtnShowCheckedComboItems_Click(object sender, DirectEventArgs e)
    {
        string s = string.Empty;
        foreach (Checkbox li in CheckboxGroup1.Items)
        {
            if (li.Checked)
                s += li.BoxLabel + "   ";
        }

        X.Msg.Notify("Test checkboxes", s).Show();
    }




 <ext:ResourceManager ID="ResourceManager1" runat="server" />

        <ext:Button ID="btAdd" runat="server" Text="Add some checkboxes">
         <DirectEvents>
            <Click OnEvent="BtnAddComboItems_Click" />
        </DirectEvents>
        </ext:Button>

        <ext:Button ID="btnShow" runat="server" Text="Show checked items">
            <DirectEvents>
                <Click OnEvent="BtnShowCheckedComboItems_Click" />
            </DirectEvents>
        </ext:Button>
    

     <ext:CheckboxGroup ID="CheckboxGroup1" runat="server" >       
     </ext:CheckboxGroup>

[Daniil]

Hello!

It needs to recreate controls during each request (it happens during each direct events) if you want to handle them on server side.

So, please remove this

if (IsPostBack) return;

,
uncomment invoking of Render method and try again.

Another issue I discovered is if you uncomment the value setting lines (like: //c1.Value = "onload 1"; ) you get exceptions.

There is expecting a bool value - checked or unchecked.

Example

c1.Value = true;

[Daniil]

Also please note that the AddTo method can be used instead of Render.
IMO it makes code more readable.

Example

CheckboxGroup1.AddTo(this.Form);

[Edward]

Hello Danii

Thanks for your reply, maybe I was not clear enough, let me explain.

When you rebuild the checkboxlist (based on a dynamic table) in every onload you cannot be sure which one was checked. for example: I have 2 checkboxes in the onload. I do some mutations on the form and check one of them. Another user is changing the list in the meanwhile. When I do a save and cause a roundtrip the rebuilded combobox item list is changed... Hence the postback check.

When I add in the BtnAddComboItems_Click 2 items I got them rendered. But when I then click on the BtnShowCheckedComboItems_Click the checked onces are not detected because they are not rebuilded.

Hello!

It needs to recreate controls during each request (it happens during each direct events) if you want to handle them on server side.

So, please remove this

if (IsPostBack) return;

,
uncomment invoking of Render method and try again.

There is expecting a bool value - checked or unchecked.

Example

c1.Value = true;

c1.Checked = true/false would be the expected behaviour. v1.Value should be a value string like its asp.net equivalent.

Do you recommend using the RawValue property to store unique id's ?

[Vladimir]

Hi,

CheckboxGroup uses Checkbox controls as items. ASP.NET is stateless system therefore anydynamic controls must be recreated on each request otherwise you cannot handle it submitted values (only if read directly from Request.Form), events, viewstate and etc

Therefore you have to repopulate Items collection of CheckboxGroup in each request (otherwise you will get Count equals 0)

c1.Checked = true/false would be the expected behaviour. v1.Value should be a value string like its asp.net equivalent.
Do you recommend using the RawValue property to store unique id's ?

Please use InputValue property (by default, it has ClientID value)

The value that should go into the generated input element's value attribute

[Edward]

Hi,

CheckboxGroup uses Checkbox controls as items. ASP.NET is stateless system therefore anydynamic controls must be recreated on each request otherwise you cannot handle it submitted values (only if read directly from Request.Form), events, viewstate and etc

Therefore you have to repopulate Items collection of CheckboxGroup in each request (otherwise you will get Count equals 0)

aaah thats the problem. It uses Checkboxes (controls) instead of listitems like other controls (comboboxes etc.)..

For my problem it is unacceptable to use it like this. This control is only safe when only static items are used.

Do you have any idea of an alternative component ?


btw: i did see http://forums.ext.net/showthread.php...up-DataBinding

and I suggest using listitems instead of checkboxes :)

[Vladimir]

Hi,

Our CheckboxGroup is based on ExtJS CheckboxGroup which doesn't support store functionality, doesn't support add/remove items after rendering, works with Checkbox as items only
Therefore to implement your wishes need completely refactor ExtJS CheckboxGroup

I prepared sample for which demonstrates how to add checkbox dynamically and get checked items

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    private static int index = 0;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            index++;
            Group1.Items.Add(new Checkbox
            {
                ID = "Check" + index,
                IDMode = IDMode.Explicit,
                BoxLabel = "Label" + index,
                InputValue = "Value" + index,
                Checked = false
            });
        }
    }
    
    protected void AddClick(object sender, DirectEventArgs e)
    {
        var items = JSON.Deserialize<JsonObject[]>(e.ExtraParams["items"]);
        foreach (JsonObject item in items)
        {
            Checkbox cb = new Checkbox { 
                ID = item["id"].ToString(),
                IDMode = IDMode.Explicit,
                InputValue = item["value"].ToString(),
                BoxLabel = item["label"].ToString(),
                Checked = bool.Parse(Ext.Net.Utilities.StringUtils.ToTitleCase(item["checked"].ToString()))
            };

            Group1.Items.Add(cb);
        }

        index++;
        Group1.Items.Add(new Checkbox {
            ID = "Check" + index,
            IDMode = IDMode.Explicit,
            BoxLabel = "Label" + index,
            InputValue = "Value" + index,
            Checked = false
        });

        Group1.Render(Group1.ContainerID, RenderMode.RenderTo);
    }

    protected void ShowChecked(object sender, DirectEventArgs e)
    {
        var items = JSON.Deserialize<System.Collections.Generic.List<string>>(e.ExtraParams["items"]);
        StringBuilder sb = new StringBuilder();
        items.ForEach(item => sb.Append("<p>" + item + "</p>"));
        X.Msg.Alert("Checked", sb.ToString()).Show();
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <script type="text/javascript">
        function getCheckboxes(group){
            var items = [];
            group.items.each(function(item){
                items.push({
                    id : item.id,
                    value : item.inputValue,
                    checked : item.getValue(),
                    label : item.boxLabel
                });
            });
            
            return items;
        }
        
        function getChecked(group){
            var items = [];
            group.items.each(function(item){
                if(item.getValue()){
                    items.push(item.inputValue);
                }
            });
            
            return items;
        }
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:CheckboxGroup ID="Group1" runat="server">           
        </ext:CheckboxGroup>
        
        <ext:Button runat="server" Text="Add checkbox">
            <DirectEvents>
                <Click OnEvent="AddClick">
                    <ExtraParams>
                        <ext:Parameter Name="items" Value="getCheckboxes(#{Group1})" Mode="Raw" Encode="true" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>
        
        <ext:Button runat="server" Text="Show checked">
            <DirectEvents>
                <Click OnEvent="ShowChecked">    
                    <ExtraParams>
                        <ext:Parameter Name="items" Value="getChecked(#{Group1})" Mode="Raw" Encode="true" />
                    </ExtraParams>               
                </Click>
            </DirectEvents>
        </ext:Button>
    </form>
</body>
</html>

[Edward]

Yes that probably will work. It's still a hack though.

I do agree that if you want databinding and work with items instead of checkboxes it needs refactoring. Maybe a job for the extjs/sencha guys?

The multi select (https://examples1.ext.net/#/Form/MultiSelect/Overview/) is also interesting; if it only rendered checkboxes in colunms instead of panels :)

Thanks anyway !

[Daniil]

Hello!

Maybe the ListView control would be interesting for you.
There is the template mechanism supported. So, you could set data's view as you wish.

Here is an example.
But there is some trouble with initial checkbox state and its disappearing after checking.
I'm sure it can be fixed through Template by setting the 'checked' attribute depending on respective record's value but I can't implement it yet in a markup.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.ListView1.Store.Primary;
            store.DataSource = new object[] { 
                                         new object[] {true, "checkboxId0",  "test12", "test13"},
                                         new object[] {false, "checkboxId1", "test22", "test23"},
                                         new object[] {true, "checkboxId2", "test32", "test33"}
                                };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>

    <script type="text/javascript">
        var onClickHandler = function(e) {
            alert("Hello from " + e.id);
        }

    </script>

    <style type="text/css">
        .myClass {
        }
    </style>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:ListView 
        ID="ListView1" 
        runat="server" 
        MultiSelect="true" 
        Width="300">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:ArrayReader>
                        <Fields>
                            <ext:RecordField Name="test1" Type="Boolean"/>
                            <ext:RecordField Name="checkboxId" />
                            <ext:RecordField Name="test2" />
                            <ext:RecordField Name="test3" />
                        </Fields>
                    </ext:ArrayReader>
                </Reader>
            </ext:Store>
        </Store>
        <Columns>
            <ext:ListViewColumn DataIndex="test1" Header="Test1">
                <XTemplate runat="server">
                    <Html>
                        <input 
                            class="myClass" 
                            id="{checkboxId}" 
                            type="checkbox" 
                            onclick="onClickHandler(this)" />
                    </Html>
                </XTemplate>
            </ext:ListViewColumn>
            <ext:ListViewColumn DataIndex="test2" Header="Test2" />
            <ext:ListViewColumn DataIndex="test3" Header="Test3" />
        </Columns>
    </ext:ListView>
    </form>
</body>
</html>

[Edward]

hmm

A quick test revealed that the MultiSelect="true" setting is the cause of the 'disappearing' of the new checkbox state.

How would you read the result values server side? Put every thing in a ext:hidden element and parse it on the server?