[CLOSED] How to create Ext.net grid panel dynamically at client side

**alscg** · Apr 24, 2013, 1:26 PM

Hi,

I have been using ext.net Mvc + razor in my application. Can you please provide code sample for grid panel creation at client side.
I need to add listeners and load store data using ajax calls. For example..... following is the code for grid with razor syntax. Almost same kind of grid I want to create at client side dynamically.

  @(Html.X().GridPanel()
                .ID("grdBusinessUnits")
                .Cls("grd-existing-goals")
                .Border(false)
                .Height(280)
                .Width(210)
                .SelectionMemory(false)
                .Store(Html.X().Store().ID("BusinessUnitsStore").Listeners(ls => ls.Load.Fn = "SelectBusinessUnits")
                                .AutoLoad(false)
                                .Model(Html.X().Model().ID("BusinessUnitsModel")
                                               .IDProperty("Org_Level_Id")
                                               .Fields(
                                                        new ModelField("Org_Level_Id", ModelFieldType.Int) { Mapping = "Org_Level_Id" },
                                                        new ModelField("Org_Level_Desc", ModelFieldType.String) { Mapping = "Org_Level_Desc" }
                                                       )
                                        )
                                .Proxy(Html.X().AjaxProxy()
                                                .Url(Url.Action("GetBusinessUnits"))
                                                .Reader(Html.X().JsonReader().Root("data"))
                                      )
                                .Parameters(
                                              ps => ps.Add(new StoreParameter("regionCSV", "App.hdnRegionIds.value", ParameterMode.Raw))
                                           )

                     ).EmptyText("No records found. Please select a region to see related business units")
                .ColumnModel(
                                Html.X().Column().Text(Resource.Talent.LinkedHierarchies.BusinessUnitsText).Width(160).DataIndex("Org_Level_Desc")
                            )
                .SelectionModel(Html.X().CheckboxSelectionModel().ID("chkBusinessUnitsSelect")
                                    .Mode(SelectionMode.Multi)
                                    .SelectedRecordID("Org_Level_Id")
                                    .CheckOnly(true)
                                    .Listeners(ls =>
                                    {
                                        ls.Select.Handler = "if (!this.selectLock){ BusinessUnitSelect(this,record,index); }";
                                        ls.Deselect.Handler = " if (!this.deselectLock){ BusinessUnitDeselect(); }";
                                    }
                                              )
                                )
             )

**Daniil** · Apr 24, 2013, 2:46 PM

Hi @alscg,

It is easy to get the script that you need.

Open this Razor view in a browser, then look at the Page Sources. You will see a required script.

Here are some detailed steps.
http://forums.ext.net/showthread.php?20673#post89172

**alscg** · Apr 25, 2013, 5:03 AM

Originally Posted by Daniil

Hi @alscg,

It is easy to get the script that you need.

Open this Razor view in a browser, then look at the Page Sources. You will see a required script.

Here are some detailed steps.
http://forums.ext.net/showthread.php?20673#post89172

Danill,

I want to create/generate grid as mentioned above at client side using script. Please provide code sample.

**Daniil** · Apr 25, 2013, 6:01 AM

Have you not tried my suggestion?

You would get something like this.

Ext.create("Ext.grid.Panel", {
    store: {
      model: Ext.define("App.BusinessUnitsModel", {
        extend: "Ext.data.Model",
        fields: [{
          name: "Org_Level_Id",
          mapping: "Org_Level_Id",
          type: "int"
        }, {
          name: "Org_Level_Desc",
          mapping: "Org_Level_Desc",
          type: "string"
        }
                ],
        idProperty: "Org_Level_Id"
      }),
      storeId: "BusinessUnitsStore",
      readParameters: function (operation) {
        return {
          apply: {
            "regionCSV": App.hdnRegionIds.value
          }
        };
      },
      proxy: {
        type: "ajax",
        reader: {
          type: "json",
          root: "data"
        },
        url: "/Razor/GetBusinessUnits"
      },
      listeners: {
        load: {
          fn: SelectBusinessUnits
        }
      }
    },
    id: "grdBusinessUnits",
    border: false,
    cls: "grd-existing-goals",
    height: 280,
    renderTo: "App.grdBusinessUnits_Container",
    width: 210,
    columns: {
      items: [{
        width: 160,
        dataIndex: "Org_Level_Desc",
        text: "Resource.Talent.LinkedHierarchies.BusinessUnitsText"
      }
             ]
    },
    emptyText: "No records found. Please select a region to see related business units",
    selModel: window.App.chkBusinessUnitsSelect = Ext.create("Ext.selection.CheckboxModel", {
      proxyId: "chkBusinessUnitsSelect",
      selType: "checkboxmodel",
      listeners: {
        deselect: {
          fn: function (item, record, index) {
            if (!this.deselectLock) {
              BusinessUnitDeselect();
            }
          }
        },
        select: {
          fn: function (item, record, index) {
            if (!this.selectLock) {
              BusinessUnitSelect(this, record, index);
            }
          }
        }
      },
      checkOnly: true
    }),
    selectionMemory: false
  });

**alscg** · Apr 25, 2013, 6:41 AM

Originally Posted by Daniil

Have you not tried my suggestion?

You would get something like this.

Ext.create("Ext.grid.Panel", {
    store: {
      model: Ext.define("App.BusinessUnitsModel", {
        extend: "Ext.data.Model",
        fields: [{
          name: "Org_Level_Id",
          mapping: "Org_Level_Id",
          type: "int"
        }, {
          name: "Org_Level_Desc",
          mapping: "Org_Level_Desc",
          type: "string"
        }
                ],
        idProperty: "Org_Level_Id"
      }),
      storeId: "BusinessUnitsStore",
      readParameters: function (operation) {
        return {
          apply: {
            "regionCSV": App.hdnRegionIds.value
          }
        };
      },
      proxy: {
        type: "ajax",
        reader: {
          type: "json",
          root: "data"
        },
        url: "/Razor/GetBusinessUnits"
      },
      listeners: {
        load: {
          fn: SelectBusinessUnits
        }
      }
    },
    id: "grdBusinessUnits",
    border: false,
    cls: "grd-existing-goals",
    height: 280,
    renderTo: "App.grdBusinessUnits_Container",
    width: 210,
    columns: {
      items: [{
        width: 160,
        dataIndex: "Org_Level_Desc",
        text: "Resource.Talent.LinkedHierarchies.BusinessUnitsText"
      }
             ]
    },
    emptyText: "No records found. Please select a region to see related business units",
    selModel: window.App.chkBusinessUnitsSelect = Ext.create("Ext.selection.CheckboxModel", {
      proxyId: "chkBusinessUnitsSelect",
      selType: "checkboxmodel",
      listeners: {
        deselect: {
          fn: function (item, record, index) {
            if (!this.deselectLock) {
              BusinessUnitDeselect();
            }
          }
        },
        select: {
          fn: function (item, record, index) {
            if (!this.selectLock) {
              BusinessUnitSelect(this, record, index);
            }
          }
        }
      },
      checkOnly: true
    }),
    selectionMemory: false
  });

Danill,

Thank you...It is very helpful.

Do I need to replace Ext with Ext.Net?

**Daniil** · Apr 25, 2013, 6:53 AM

Originally Posted by alscg

Do I need to replace Ext with Ext.Net?

Within the JavaScript code? No, you should not.

**alscg** · Apr 25, 2013, 7:21 AM

Originally Posted by alscg

Danill,

Thank you...It is very helpful.

Do I need to replace Ext with Ext.Net?

With above code I am trying generate grid as below. to remove complexity I have commented out some portion of the code.
I have div in the page and wants to add created grid to that div...so I changed renderTo property in the code

@model List<Empower.DTO.Talent.GoalDTO>
@{
    ViewBag.Title = "GoalManager";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}
<script>
    $(document).ready(function () {
        LoadGrid();
    });

    function LoadGrid() {
        Ext.create("Ext.grid.Panel", {
            store: {
                model: Ext.define("App.LevelModel", {
                    extend: "Ext.data.Model",
                    fields: [{
                        name: "Org_Level_Id",
                        mapping: "Org_Level_Id",
                        type: "int"
                    }, {
                        name: "Org_Level_Desc",
                        mapping: "Org_Level_Desc",
                        type: "string"
                    }
                    ],
                    idProperty: "Org_Level_Id"
                }),
                storeId: "LevelStore",
                readParameters: function (operation) {
                    return {
                        apply: {
                            "regionCSV": "5"
                        }
                    };
                },
                proxy: {
                    type: "ajax",
                    reader: {
                        type: "json",
                        root: "data"
                    },
                    url: "/Talent/GetBusinessUnits"
                }//,
                //listeners: {
                //    load: {
                //        fn: SelectBusinessUnits
                //    }
                //}
            },
            id: "grdLevel",
            border: false,
            cls: "grd-existing-goals",
            height: 280,
            renderTo: "App.dynamicGrid",
            width: 210,
            columns: {
                items: [{
                    width: 160,
                    dataIndex: "Org_Level_Desc",
                    text: "Resource.Talent.LinkedHierarchies.BusinessUnitsText"
                }
                ]
            },
            //emptyText: "No records found. Please select a region to see related business units",
            //selModel: window.App.chkBusinessUnitsSelect = Ext.create("Ext.selection.CheckboxModel", {
            //    proxyId: "chkBusinessUnitsSelect",
            //    selType: "checkboxmodel",
            //    listeners: {
            //        deselect: {
            //            fn: function (item, record, index) {
            //                if (!this.deselectLock) {
            //                    BusinessUnitDeselect();
            //                }
            //            }
            //        },
            //        select: {
            //            fn: function (item, record, index) {
            //                if (!this.selectLock) {
            //                    BusinessUnitSelect(this, record, index);
            //                }
            //            }
            //        }
            //    },
            //    checkOnly: true
            //}),
            //selectionMemory: false
        });
    }
</script>

<div id="dynamicGrid">
</div>

**Daniil** · Apr 25, 2013, 1:01 PM

I think you should not use "App" for the div.

Please try:

renderTo: "dynamicGrid"

**alscg** · Apr 25, 2013, 1:32 PM

Originally Posted by Daniil

I think you should not use "App" for the div.

Please try:

renderTo: "dynamicGrid"

I tried that also..but No luck. Please help in this reagrd.

**Daniil** · Apr 25, 2013, 2:00 PM

Is there any JavaScript error?

Thread: [CLOSED] How to create Ext.net grid panel dynamically at client side

Thread Tools

Search Thread

Display

[CLOSED] How to create Ext.net grid panel dynamically at client side

Similar Threads

[CLOSED] How I can create a CalendarPanel in client side?

How to hide grid panel rows based on condition on client side at the time of displaying?

[CLOSED] How to determing the grid panel is showing vertical scroll bar in client and server side?

How to Create MultiCombo at client side?

Create Simple Store and Bind to Grid Client-Side?

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] How to create Ext.net grid panel dynamically at client side

[CLOSED] How to create Ext.net grid panel dynamically at client side

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us