[CLOSED] Build Dynamic grid with checkbox selection in div

[imaa]

Dear All,
I want to build grid panel in java script in dynamic mode , I faced 2 problem, first, i can't do multi selection from the grid (I mean I can select only one row) and the second i added combo box to this grid but I can't edit the column that has this combo-box the grid render to the window and the window render to dive, I tried to use "Daniil" solution in this page (http://forums.ext.net/archive/index.php/t-16059.html)
but it return error(Microsoft JScript runtime error: Object doesn't support property or method 'getRowExpander') and return empty row

        var clm = new Ext.grid.ColumnModel();
            columns: [sm,
{ header: 'الرقم الاكاديمي', width: 100, sortable: true, dataIndex: 'AcademicNumber' },
{ header: 'اسم الطالب', width: 200, sortable: true, dataIndex: 'StudentName' },
{ header: 'المنئأه', width: 160, hidden: true, sortable: true, dataIndex: 'EstablisheName' },
{ header: 'الكلية/المعهد', width: 160, sortable: true, dataIndex: 'CollageName' },
{ header: 'القسم', width: 160, sortable: true, dataIndex: 'DepartmentName' },
{ header: 'التخصص', width: 160, sortable: true, dataIndex: 'SpecializationName' },
{ header: 'أسم المرشد', width: 160, sortable: true, dataIndex: 'GuidanceName' },
{ dataIndex: "CurrentGuidanceType_ID", editor: new Ext.grid.GridEditor(Ext.apply({ field: { id: "cbGudance",
    xtype: "combo",editable:true, blankText: "نوع الأرشاد", displayField: "GuidanceTypeName",
    forceSelection: true, hiddenName: "cbGudance_Value", mode: "local", queryDelay: 10, triggerAction: "all",
    valueField: "GuidanceType_ID", store: stGuidanceType, submitValue: true, editable:true
}
}, {})),
header: "نوع الأرشاد", renderer: SubjectTypRenderer, width: 170
}]
        });

        var gridWindow = new Ext.Window({
            id: "window" ,
            renderTo: gridsAreas,
            autoScroll: true,
            height: 600,
            width: 1100,
            bodyStyle: "background-color: #fff;",
            collapsible: true,
            iconCls: "icon-application",
            padding: 5,
            title: groupsNames[groupNameCount][2],
            hidden: true,
            modal: false
        });
        var grid = new Ext.grid.GridPanel({
            id: 'grid',
            enableDragDrop: true,
            ddGroup: "groupGrid",
            StripeRows: true,
            trackMouseOver: true,
            title: groupsNames[groupNameCount][2],
            store: creatStor(studantGrupNameArray[i], Fielsd, i, count),
            renderTo: gridWindow.getBody(),
            cm: clm,
            sm:sm,
            autoHeight: true,
            hidden: false,
            tbar: { id: "tb" , xtype: "toolbar", items: [{ id: "tbSaveSatuse_" + i, iconCls: 'icon-disk', text: "حفظ حالة المرشد الجديد", listeners: { click: { fn: SaveGuidanceSatuse}} },
      ]
            },
            listeners:
{
    render:
{
    fn: setDD
}
}
        });
SubjectTypRenderer = function (value, e, store, record) {

    var r = stGuidanceType.getById(value);
    if (value == null || value == '') {
        return '<font color=green> نوع الأرشاد</font>';
    }
    if (r) {
        return r.data.GuidanceTypeName;
    }
    return value;

}

[Daniil]

Hi,

I faced 2 problem, first, i can't do multi selection from the grid (I mean I can select only one row) and the second i added combo box to this grid but I can't edit the column that has this combo-box the grid render to the window and the window render to dive

I can't see the code of creating a selection model and ComboBox, so, I have no idea what might be wrong.

Generally, your code looks correct.

One issue I see, though this one doesn't cause the problems - "StripeRows" must start with the lower-case first letter "stripeRows".

Are you able to get the required things configuring them up in aspx markup? If yes, you could get the scripts viewing the "Page Sources" in a browser.

[imaa]

Dear Daniil,
I have the following issues:
1-I can't check more than one row and I can't edit the combo box (for example the selection header is disable so I can't select all rows )
but i don't have any exception if I don't Put "sm" in the grid define as the following

    var sm = new Ext.grid.CheckboxSelectionModel();
        var clm = new Ext.grid.ColumnModel({
            columns: [sm,
{ header: 'الرقم الاكاديمي', width: 100, sortable: true, dataIndex: 'AcademicNumber' },
{ header: 'اسم الطالب', width: 200, sortable: true, dataIndex: 'StudentName' },
{ header: 'المنئأه', width: 160, hidden: true, sortable: true, dataIndex: 'EstablisheName' },
{ header: 'الكلية/المعهد', width: 160, sortable: true, dataIndex: 'CollageName' },
{ header: 'القسم', width: 160, sortable: true, dataIndex: 'DepartmentName' },
{ header: 'التخصص', width: 160, sortable: true, dataIndex: 'SpecializationName' },
{ header: 'أسم المرشد', width: 160, sortable: true, dataIndex: 'GuidanceName' },
 { header: "نوع الأرشاد", dataIndex: "CurrentGuidanceType_ID", renderer: function (value, e, store, record) {
     var r = stGuidanceType.getById(value);
     if (value == null || value == '') {
         return '<font color=green> نوع الأرشاد</font>';
     }
     if (r) {
         return r.data.GuidanceTypeName;
     }
     return value;
}, editor: new Ext.form.ComboBox({
    allowBlank: false,
    store: stGuidanceType,
    mode: 'local',
    typeAhead: true,
    forceSelection: true,
    triggerAction: 'all',
    valueField: 'GuidanceType_ID',
    displayField: 'GuidanceTypeName'
})
}]
        });

        var gridWindow = new Ext.Window({
            id: "window" + i,
            renderTo: gridsAreas,
            autoScroll: true,
            height: 600,
            width: 1100,
            bodyStyle: "background-color: #fff;",
            collapsible: true,
            iconCls: "icon-application",
            padding: 5,
            title: groupsNames[groupNameCount][2],
            hidden: true,
            modal: false
        });
        var grid = new Ext.grid.GridPanel({
            id: 'grid' + i,
            enableDragDrop: true,
            ddGroup: "groupGrid",
            stripeRows: true,
            trackMouseOver: true,
            title: groupsNames[groupNameCount][2],
            store: creatStor(studantGrupNameArray[i], Fielsd, i, count),
            renderTo: gridWindow.getBody(),
            cm: clm,
            autoHeight: true,
            hidden: false,
            tbar: { id: "tb" + i, xtype: "toolbar", items: [{ id: "tbSaveSatuse_" + i, iconCls: 'icon-disk', text: "حفظ حالة المرشد الجديد", listeners: { click: { fn: SaveGuidanceSatuse}} },
      ]
            },
            listeners:
{
    render:
{
    fn: setDD
}
}
        });

2- If I added the "sm" to the grid define I'll have the following exception
"Microsoft JScript runtime error: Object doesn't support property or method 'getRowExpander' "
without any rows in the grid
as following:

    var sm = new Ext.grid.CheckboxSelectionModel();
        var clm = new Ext.grid.ColumnModel({
            columns: [sm,
{ header: 'الرقم الاكاديمي', width: 100, sortable: true, dataIndex: 'AcademicNumber' },
{ header: 'اسم الطالب', width: 200, sortable: true, dataIndex: 'StudentName' },
{ header: 'المنئأه', width: 160, hidden: true, sortable: true, dataIndex: 'EstablisheName' },
{ header: 'الكلية/المعهد', width: 160, sortable: true, dataIndex: 'CollageName' },
{ header: 'القسم', width: 160, sortable: true, dataIndex: 'DepartmentName' },
{ header: 'التخصص', width: 160, sortable: true, dataIndex: 'SpecializationName' },
{ header: 'أسم المرشد', width: 160, sortable: true, dataIndex: 'GuidanceName' },
 { header: "نوع الأرشاد", dataIndex: "CurrentGuidanceType_ID", renderer: function (value, e, store, record) {
     var r = stGuidanceType.getById(value);
     if (value == null || value == '') {
         return '<font color=green> نوع الأرشاد</font>';
     }
     if (r) {
         return r.data.GuidanceTypeName;
     }
     return value;
}, editor: new Ext.form.ComboBox({
    allowBlank: false,
    store: stGuidanceType,
    mode: 'local',
    typeAhead: true,
    forceSelection: true,
    triggerAction: 'all',
    valueField: 'GuidanceType_ID',
    displayField: 'GuidanceTypeName'
})
}]
        });

        var gridWindow = new Ext.Window({
            id: "window" + i,
            renderTo: gridsAreas,
            autoScroll: true,
            height: 600,
            width: 1100,
            bodyStyle: "background-color: #fff;",
            collapsible: true,
            iconCls: "icon-application",
            padding: 5,
            title: groupsNames[groupNameCount][2],
            hidden: true,
            modal: false
        });
        var grid = new Ext.grid.GridPanel({
            id: 'grid' + i,
            enableDragDrop: true,
            ddGroup: "groupGrid",
            stripeRows: true,
            trackMouseOver: true,
            title: groupsNames[groupNameCount][2],
            store: creatStor(studantGrupNameArray[i], Fielsd, i, count),
            renderTo: gridWindow.getBody(),
            cm: clm,
            sm:sm,
            autoHeight: true,
            hidden: false,
            tbar: { id: "tb" + i, xtype: "toolbar", items: [{ id: "tbSaveSatuse_" + i, iconCls: 'icon-disk', text: "حفظ حالة المرشد الجديد", listeners: { click: { fn: SaveGuidanceSatuse}} },
      ]
            },
            listeners:
{
    render:
{
    fn: setDD
}
}
        });

[Daniil]

I think you should use the Ext.net.GridPanel class instead of the Ext.grid.GridPanel one.

Also, using the GridEditor class was a correct way for creating a column's editor.

Please investigate the following example.

I've commented out the markup which I used to get the raw scripts. Then I've cleaned them up to make more readable.

One of the key thing is forcing to register Ext.NET "data" scripts, this one:

ResourceManager.RegisterControlResources<Store>();

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)
        {
            ResourceManager.RegisterControlResources<Store>();
            //Store store = this.GridPanel1.GetStore();
            //store.DataSource = new object[] 
            //{ 
            //    new object[] { "1" },
            //    new object[] { "2" },
            //};
            //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 onReady = function () {
            new Ext.net.GridPanel({
                store : new Ext.net.Store({
                    autoLoad : true,
                    reader   : new Ext.data.ArrayReader({
                        fields : [{
                            name : "test"
                        }]
                    }),
                    data : [
                        ["1"],
                        ["2"]
                    ]
                }),
                renderTo   : Ext.getBody(),
                autoHeight : true,
                sm         : this.mySelModel = new Ext.grid.CheckboxSelectionModel(),
                cm         : new Ext.grid.ColumnModel({
                    columns : [
                        mySelModel,
                        {
                            dataIndex : "test",
                            editor    : new Ext.grid.GridEditor(Ext.apply({
                                field : {
                                    xtype         : "combo",
                                    valueField    : "value",
                                    displayField  : "text",
                                    mode          : "local",
                                    triggerAction : "all",
                                    store         : new Ext.data.SimpleStore({
                                        fields : ["text", "value"],
                                        data   : [
                                            ["test1", "1"],
                                            ["test2", "2"]
                                        ]
                                    })
                                }
                            })),
                        header : "Test",
                        renderer : function (value, metadata, record, rowIndex, colIndex, store) {
                            var text;
                            if (value === '1') {
                                text = 'test1';
                            } else if (value === '2') {
                                text = 'test2';
                            }
                            return text;
                        }
                    }]
                })
            });
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <DocumentReady Handler="onReady();" />
            </Listeners>
        </ext:ResourceManager>
        <%--<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test">
                        <Renderer Handler="var text;
                                           if (value === '1') {
                                               text = 'test1';
                                           } else if (value === '2') {
                                               text = 'test2';
                                           }
                                           return text;" />
                        <Editor>
                            <ext:ComboBox runat="server">
                                <Items>
                                    <ext:ListItem Text="test1" Value="1" />
                                    <ext:ListItem Text="test2" Value="2" />
                                </Items>
                            </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:CheckboxSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>--%>
    </form>
</body>
</html>

[imaa]

Dear Daniil,

Hope you are fine and doing well,

I'm so sorry to replay you late, I was busy A little but I tried your last replied today, I'm so thankful for you ,But If you can I want to ask u question about the same idea:

1-what is the defferent between Ext.net.GridPanel class and Ext.grid.GridPanel , And where is better to use each one(I mean in which place is better to use Ext.net.GridPanel class or Ext.grid.GridPane)?

Again thank you very much.

[Daniil]

Ext.net.GridPanel is our Ext.NET grid class inherited from the native ExtJS Ext.grid.GridPanel one.

If you need Ext.NET functionality, please use Ext.net.GridPanel, if not - Ext.grid.GridPanel.