[CLOSED] CheckboxSelectionModel Selected DataIndex from Store

[ljcorreia]

Hi there,

Based on the CheckboxSelectionModel (https://examples1.ext.net/#/GridPane...box_Selection/)

How can I set the selected records based on the Store values?

I can see in the example, it set the values on Page_Load like:

             if (!this.IsPostBack)
             {
                 RowSelectionModel sm = this.GridPanel1.SelectionModel.Primary as RowSelectionModel;

                 sm.SelectedRow = new SelectedRow(2);
                 
                 sm.SelectedRows.Add(new SelectedRow(2));
                 sm.SelectedRows.Add(new SelectedRow("11"));
             }

Why not have a property on CheckboxSelectionModel to point the Store DataIndex fileld in order to select a row? Is it not possible? CAn I suggest this if not already done?

Alternatively, is there a way to do this based on my Store instead of put this on Page_Load?

I have already a "Checked" field that I wish to use in order to set the current selected rows and I wish to perform the query only once.

Thanks in advance,

Leo.

[Vladimir]

Hi,

Well, you can select required records after data loading

1. Add Store's listener

<Load Fn="selectRows" Single="true" Delay="20" />

2.

function selectRows(){
            var records = [];
            Store1.each(function(record){
                if(record.get("Price") > 50){
                    records.push(record);
                }
            })
            GridPanel1.getSelectionModel().selectRecords(records);
        }

[ljcorreia]

Hi Vlad,

Thant worked for me, but please consider the following sample using User Controls.
For the sake of simplicity, the main page does not have anything, but I got many scenarios were I have the main FormPanel to be saved as well as more relationship data triggered by the main page button.

It's kinda Master Details scenarios where the Details are in UC and using Grid.

CompanyUC:

<%@ Control Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Ext.IsAjaxRequest)
        {
            this.Store1.DataSource = new List<Company> 
             { 
                 new Company(0, "3m Co", 71.72, 0.02, 0.03),
                 new Company(1, "Alcoa Inc", 29.01, 0.42, 1.47),
                 new Company(2, "Altria Group Inc", 83.81, 0.28, 0.34),
                 new Company(3, "American Express Company", 52.55, 0.01, 0.02),
                 new Company(4, "American International Group, Inc.", 64.13, 0.31, 0.49),
                 new Company(5, "AT&amp;T Inc.", 31.61, -0.48, -1.54),
                 new Company(6, "Boeing Co.", 75.43, 0.53, 0.71),
                 new Company(7, "Caterpillar Inc.", 67.27, 0.92, 1.39),
                 new Company(8, "Citigroup, Inc.", 49.37, 0.02, 0.04),
                 new Company(9, "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28),
                 new Company(10, "Exxon Mobil Corp", 68.1, -0.43, -0.64),
                 new Company(11, "General Electric Company", 34.14, -0.08, -0.23),
                 new Company(12, "General Motors Corporation", 30.27, 1.09, 3.74),
                 new Company(13, "Hewlett-Packard Co.", 36.53, -0.03, -0.08),
                 new Company(14, "Honeywell Intl Inc", 38.77, 0.05, 0.13),
                 new Company(15, "Intel Corporation", 19.88, 0.31, 1.58),
                 new Company(16, "International Business Machines", 81.41, 0.44, 0.54),
                 new Company(17, "Johnson &amp; Johnson", 64.72, 0.06, 0.09),
                 new Company(18, "JP Morgan &amp; Chase &amp; Co", 45.73, 0.07, 0.15),
                 new Company(19, "McDonald\"s Corporation", 36.76, 0.86, 2.40),
                 new Company(20, "Merck &amp; Co., Inc.", 40.96, 0.41, 1.01),
                 new Company(21, "Microsoft Corporation", 25.84, 0.14, 0.54),
                 new Company(22, "Pfizer Inc", 27.96, 0.4, 1.45),
                 new Company(23, "The Coca-Cola Company", 45.07, 0.26, 0.58),
                 new Company(24, "The Home Depot, Inc.", 34.64, 0.35, 1.02),
                 new Company(25, "The Procter &amp; Gamble Company", 61.91, 0.01, 0.02),
                 new Company(26, "United Technologies Corporation", 63.26, 0.55, 0.88),
                 new Company(27, "Verizon Communications", 35.57, 0.39, 1.11),
                 new Company(28, "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63)
             };

            this.Store1.DataBind();
        }
    }

    [Coolite.Ext.Web.AjaxMethod]
    public void DoSave()
    {
        //TODO Save
    }

    protected void Store1_BeforeChange(object sender, BeforeStoreChangedEventArgs e)
    {
        //The below data contains all changed records which grouping by modification actions: changed, updated, inserted
        //string json = e.DataHandler.JsonData
        //XmlDocument xml = e.DataHandler.XmlData
        //ChangeRecords<Customer> customers = e.DataHandler.ObjectData<Customer>();
        //Own logic was added for save using one of above data representation and then set e.Cancel=true for canceling Store events

        string json = e.DataHandler.JsonData;
        StoreDataHandler dataHandler = new StoreDataHandler(json);
        ChangeRecords<Company> data = dataHandler.ObjectData<Company>();

        foreach (Company record in data.Deleted)
        {
            //TODO detele
        }

        foreach (Company record in data.Updated)
        {
            //TODO update
        }

        e.Cancel = true;
    }
    

    public class Company
    {
        public Company(int id, string name, double price, double change, double pctChange)
        {
            this.ID = id;
            this.Name = name;
            this.Price = price;
            this.Change = change;
            this.PctChange = pctChange;
        }

        public int ID { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
        public double Change { get; set; }
        public double PctChange { get; set; }
    }    
</script>

<ext:Store ID="Store1" runat="server" OnBeforeStoreChanged="Store1_BeforeChange">
    <Reader>
        <ext:JsonReader ReaderID="ID">
            <Fields>
                <ext:RecordField Name="ID" />
                <ext:RecordField Name="Name" />
                <ext:RecordField Name="Price" />
                <ext:RecordField Name="Change" />
                <ext:RecordField Name="PctChange" />
            </Fields>
        </ext:JsonReader>
    </Reader>
    <Listeners>
        <Load Fn="selectRows" Single="true" Delay="20" />
    </Listeners>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server" StoreID="Store1" StripeRows="true"
    Title="Company List" AutoExpandColumn="Company" Collapsible="true" Width="600"
    Height="350">
    <ColumnModel ID="ColumnModel1" runat="server">
        <Columns>
            <ext:Column ColumnID="Company" Header="Company" Width="160" Sortable="true" DataIndex="Name"
                Resizable="false" MenuDisabled="true" Fixed="true">
                <Editor>
                    <ext:TextField ID="TextField1" runat="server" />
                </Editor>
            </ext:Column>
            <ext:Column Header="Price" Width="75" Sortable="true" DataIndex="Price">
                <Renderer Format="UsMoney" />
            </ext:Column>
            <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="Change">
                <Renderer Fn="change" />
            </ext:Column>
            <ext:Column Header="Change" Width="75" Sortable="true" DataIndex="PctChange">
                <Renderer Fn="pctChange" />
            </ext:Column>
        </Columns>
    </ColumnModel>
    <BottomBar>
        <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="Store1"
            DisplayInfo="false" />
    </BottomBar>
    <SelectionModel>
        <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
        </ext:CheckboxSelectionModel>
    </SelectionModel>
</ext:GridPanel>

Main .aspx page - GridPanelCheckBoxSelectionModel_UC:

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

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<%@ Register TagPrefix="uc" TagName="CompanyUC" Src="CompanyUC.ascx" %>

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

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button2_Click(object sender, AjaxEventArgs e)
    {
        //TODO Save the main form info.
    }

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>GridPanel with Checkbox Selection Model within User Control - Coolite Examples</title>
</head>
<body>

    <script type="text/javascript">
        var template = '{1}';

        var change = function(value) {
            return String.format(template, (value > 0) ? "green" : "red", value);
        };

        var pctChange = function(value) {
            return String.format(template, (value > 0) ? "green" : "red", value + "%");
        };

        function selectRows() {
            var records = [];
            CompanyUC1_GridPanel1.getStore().each(function(record) {
                if (record.get("Price") > 50) {
                    records.push(record);
                }
            })
            CompanyUC1_GridPanel1.getSelectionModel().selectRecords(records);
        }
    </script>

    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <uc:CompanyUC ID="CompanyUC1" runat="server" />
    <ext:Button ID="Button2" runat="server" Text="AjaxPostBack">
        <AjaxEvents>
            <Click OnEvent="Button2_Click" Success="#{GridPanel1}.save();Coolite.AjaxMethods.CompanyUC1.DoSave();">
                <EventMask ShowMask="true" />
            </Click>
        </AjaxEvents>
    </ext:Button>
    <div style="width: 590px; border: 1px solid gray; padding: 5px;">
        <ext:Label ID="Label1" runat="server" />
    

    </form>
</body>
</html>

Please clarify some points to me based on the provided sample:

1. I wish to put the selectRows() in a shared js file and obviously make it generic. So I wish do not hard-code the Grid ids, but when trying to pass it as parameter I got 'gridXXX is undefined'. I believe because the grid is still not loaded when Store Load listener happens. Is there a way to do this more generic? I still think it would be a good idea to have a Property on <ext:CheckboxSelectionModel ... SelectedDataIndex="MyStoreField" ../> and handle this automatically.
2. The other point is based on what I raised a while ago handling grid save scenario. I wish to keep my logic separated on the UserControl and submit the grid(s) as a parameter for the main page's button is not exactly ideal. It is ok in some scenarios, but ideally it would be something like the way grid.save() works. The problem is that changing the selected/unselected status will not be considered a grid data's changing and it will not raise "OnBeforeStoreChanged" event. Imagine you are saving only the relationship between the main page data and the list within the user control. This would be my current scenario. I seem to be came out with a better solution for this scenario using Ajax Methods (see code), but I still wish to use grid's save(). Can you explain me how to make the grid's data "dirty" and pick up the lines changed on StoreChanged?
3. The other point is that the user control may need to be disabled when for example the user has no permission.

I hope you can understand and clarify my points and I am willing to provide you more details if necessary.

The main idea for me is keep it as a pluggable, generic and reusable solution. To be able to carry the code related to UC within its code-behind and not on parent page.

Maybe there are better solutions out there that I still have not came across. I am still using 0.8.2 due the huge amout of breaking changes, but I will have to migrate it at some point. So if I am missing too many good things for the new version that could handle this scenarios in a better way, please let me know.

BTW, what is an EditableGrid plugin? What is that for?

Thanks
Leo

[Vladimir]

Hi,

1. Just pass grid to the selectRows as the following

Handler="selectRows(#{GridPanel1});"

2. I am not sure that clear understood you. How the selecting is releated with dirty status. If you need to set/cleat dirty status on select/deselect then you can add special field (this field can be missing in the real data which you bind) and use the following selection model listeners

<ext:RecordField Name="isDirty" DefaultValue="false"/>

<RowSelect Handler="record.set('isDirty', true);" />

<RowDeselect Handler="record.commit();"/>

3. What you mean 'the user control may need to be disabled'? I think ASP.NET doesn't allow disabling a user control


what is an EditableGrid plugin? What is that for?
Please see http://www.extjs.com/forum/showthread.php?t=79232

[ljcorreia]

Hi Vlad,

Thank you very much for your response.

1 - It did work. My mistake was using Fn instead of Handler. Shouldn't I use Fn when passing parameters or it is because of the "#{}" place-holder?

Handler="selectRows(#{GridPanel1});"

2 - Sorry if I was not clear but I guess you ended up getting my point. What you suggested is what I was looking for, except that I wish not set as dirty first time on Store Load. Even if I put record.set('isDirty', false); on selectedRows the Listeners RowSelect would set it to true again at the first Store Load. Is there a way to avoid this?

On "BeforeStoreChanged" I wish to have the ones with the check status modified and not include the ones previously checked.

3. Thanks for the link provided. I will test it in the future when I update the version.

Regards,

Leo

[Vladimir]

Hi,

Just add the following code to the end of the 'selectRows' method (after 'selectRecords')

Ext.each(records, function(record){record.set('isDirty', false);record.commit();})

[ljcorreia]

Hi Vlad,

That worked!

Once again, thank you very much for all your help.

Kind Regards,
Leo

PS: This topic can be marked as solved.