PDA

View Full Version : [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.LinkedHiera rchies.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
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.BusinessUnitsTex t"
}
]
},
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
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.BusinessUnitsTex t"
}
]
},
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
Do I need to replace Ext with Ext.Net?

Within the JavaScript code? No, you should not.

alscg
Apr 25, 2013, 7:21 AM
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.BusinessUnitsTex t"
}
]
},
//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
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?

alscg
Apr 25, 2013, 2:08 PM
Is there any JavaScript error?

Just now I have found that there is below error


"Ext is undefined"



@model List<Empower.DTO.Talent.GoalDTO>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>

<script>
$(document).ready(function () {
LoadGrid();
});
function LoadGrid() {
debugger;
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: "dynamicGrid",
width: 210,
columns: {
items: [{
width: 160,
dataIndex: "Org_Level_Desc",
text: "Resource.Talent.LinkedHierarchies.BusinessUnitsTex t"
}
]
}
//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" runat="server">
</div>

Daniil
Apr 25, 2013, 2:12 PM
Is there a ResoureManager on the view?

alscg
Apr 26, 2013, 4:25 AM
Is there a ResoureManager on the view?

Hi Danill,

I have added resource manager initially and while trying different things I might have removed it. Now I have added that again. Still ajax call is not firing but empty grid is being rendered. I am also providing controller's action method code along with latest view code.

View Code:



@model List<Empower.DTO.Talent.GoalDTO>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>

<script>
$(document).ready(function () {
LoadGrid();
});
function LoadGrid() {
debugger;
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: '@(Url.Action("GetBusinessUnits", "Talent"))'
}//,
//listeners: {
// load: {
// fn: SelectBusinessUnits
// }
//}
},
id: "grdLevel",
border: false,
cls: "grd-existing-goals",
height: 280,
renderTo: "dynamicGrid",
width: 210,
columns: {
items: [{
width: 160,
dataIndex: "Org_Level_Desc",
text: "Levels"
}
]
}
//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>
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))
<div id="dynamicGrid" runat="server">
</div>


And action method coed is:


public ActionResult GetBusinessUnits(string regionCSV)
{
List<GoalBusinessUnitDTO> businessUnits = new List<GoalBusinessUnitDTO>();
businessUnits = adminClient.GetBusinessUnitsByRegion(regionCSV).Th eEntity;
businessUnits = businessUnits.OrderBy(bu => bu.Org_Level_Desc).ToList();
businessUnits.Insert(0, new GoalBusinessUnitDTO() { Org_Level_Id = 0, Org_Level_Desc = "All" });
return this.Store(businessUnits);
}

Daniil
Apr 26, 2013, 4:59 AM
I think you should also set up

autoLoad: true
for the Store's config.

Please simplify your samples before posting.

1. This doesn't look to be required at all.

<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>


2. jQuery

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>


Please use CDN links in your samples if something is really required.

But better - to remove. This

$(document).ready(function () {
LoadGrid();
});
can be replaced with

Ext.onReady(function () {
LoadGrid();
});

It is even better not to mix up the libraries if possible.

3. The comment blocks. I can't see any reason to leave it in the sample.

//listeners: {
// load: {
// fn: SelectBusinessUnits
// }
//}

//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

4. This is not used in the sample and can be removed.

@model List<Empower.DTO.Talent.GoalDTO>



5. As far as I can remember it is not the first time when we are asking you to simplify the samples. Please follow our recommendations. Well, it is an important thing. The better samples you provide, the better support we provide. If a sample is simplified, we can immediately focus on a problem. As a result you are getting an answer as soon as possible.

alscg
Apr 26, 2013, 5:15 AM
I think you should also set up

autoLoad: true
for the Store's config.

Please simplify your samples before posting.

1. This doesn't look to be required at all.

<script src="../../Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>


2. jQuery

<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>


Please use CDN links in your samples if something is really required.

But better - to remove. This

$(document).ready(function () {
LoadGrid();
});
can be replaced with

Ext.onReady(function () {
LoadGrid();
});

It is even better not to mix up the libraries if possible.

3. The comment blocks. I can't see any reason to leave it in the sample.

//listeners: {
// load: {
// fn: SelectBusinessUnits
// }
//}

//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

4. This is not used in the sample and can be removed.

@model List<Empower.DTO.Talent.GoalDTO>



5. As far as I can remember it is not the first time when we are asking you to simplify the samples. Please follow our recommendations. Well, it is an important thing. The better samples you provide, the better support we provide. If a sample is simplified, we can immediately focus on a problem. As a result you are getting an answer as soon as possible.

Danill,

I am really sorry for not simplifying sample. I will promise that this will not repeated again.
Now dynamic grid working properly..Thank you for your support.

Daniil
Apr 26, 2013, 5:37 AM
Thank you for understanding!