PDA

View Full Version : [CLOSED] Fill Combobox inside Grid Panel and populate other fields with its selection change event



matrixwebtech
Jun 25, 2014, 8:38 PM
@using Ext.Net.MVC
@using Ext.Net

@{
ViewBag.Title = "Confirm MessageBox with ButtonsConfig - Ext.NET MVC Examples";
Layout = null;
var X = Html.X();
}



<script>
var addPlant = function () {

var r = Ext.create('Plant', {
//common: 'New Plant 1',
//light: 'Mostly Shady',
//price: 0,
//availability: Ext.Date.clearTime(new Date()),
//indoor: false
}),
grid = App.gridpanel;

grid.store.insert(0, r);
grid.editingPlugin.startEditByPosition({ row: 0, column: 0 });
};

Ext.onReady(function () {
// alert('hello world');
addPlant();
});
</script>

</script>
@X.ResourceManager()

@(
Html.X().GridPanel().ColSpan(4)
.ID("gridpanel")
.Width(600)
.Height(300)
.Border(false)
.Title("Edit Plants")
.Header(false)
// .Layout(LayoutType.Fit)
.Frame(true)
.Listeners(l =>
{
l.ViewReady.Fn = "addPlant";
l.ViewReady.Delay = 1;
})
.Store(
Html.X().Store().ID("Store1")
.Model(
Html.X().Model().ID("Model1")
.Name("PR")
.Fields(
Html.X().ModelField().Name("MaterialID").Type(ModelFieldType.Int),
Html.X().ModelField().Name("UOMCode").Type(ModelFieldType.Int),
Html.X().ModelField().Name("avaiablestock").Type(ModelFieldType.Float),
Html.X().ModelField().Name("requireqty").Type(ModelFieldType.Float),
Html.X().ModelField().Name("UnitRate").Type(ModelFieldType.Float),
Html.X().ModelField().Name("totalvalue").Type(ModelFieldType.Float),
Html.X().ModelField().Name("approvedqty").Type(ModelFieldType.Float),
Html.X().ModelField().Name("approvedunitrate").Type(ModelFieldType.Float),
Html.X().ModelField().Name("approvedtotalvalue").Type(ModelFieldType.Float)

)
)


)

.ColumnModel(

Html.X().Column()
.MenuDisabled(true)
.Sortable(false)
.Text("Material")
.DataIndex("MaterialID")
.Width(130)
.Editor(
Html.X().ComboBox()
.ID("ddlMaterialID")
.TypeAhead(true)
.SelectOnTab(true)
.ValueField("MaterialID")
.DisplayField("MaterialName")
.Data(ViewBag.loadddlMaterialID)
),
Html.X().Column()
.MenuDisabled(true)
.Sortable(false)
.Text("UOM")
.DataIndex("UOMCode")
.Width(130)
.Editor(
Html.X().ComboBox()
.ID("ddlUOMCode")
.TypeAhead(true)
.SelectOnTab(true)
.ValueField("UOMCode")
.DisplayField("UOMName")
.Data(ViewBag.loadddlUOMCode)
),

Html.X().Column()
.Text("Avaiable Stock")
.DataIndex("avaiablestock")
.Flex(1)
.Editor(
Html.X().NumberField().AllowBlank(false).Disabled( true)
),
Html.X().Column()
.Text("Require QTY")
.DataIndex("requireqty")
.Flex(1)
.Editor(
Html.X().NumberField().AllowBlank(false).Disabled( true)
),
Html.X().Column()
.Text("Unit Rate")
.DataIndex("unitrate")
.Flex(1)
.Editor(
Html.X().NumberField().AllowBlank(false).Disabled( true)
),
Html.X().Column()
.Text("Total Value")
.DataIndex("totalvalue")
.Flex(1)
.Editor(
Html.X().NumberField().AllowBlank(false).Disabled( true)
),
Html.X().Column()
.Text("Approved Qty")
.DataIndex("approvedqty")
.Flex(1)
.Editor(
Html.X().NumberField().AllowBlank(false).Disabled( true)
),
Html.X().Column()
.Text("Approved Unit Rate")
.DataIndex("approvedunitrate")
.Flex(1)
.Editor(
Html.X().NumberField().AllowBlank(false).Disabled( true)
),
Html.X().Column()
.Text("Approved Total Value")
.DataIndex("approvedtotalvalue")
.Flex(1)
.Editor(
Html.X().NumberField().AllowBlank(false).Disabled( true)
),

Html.X().DateColumn()
.Text("Available")
.DataIndex("availability")
.Width(95)
.Format("dd-MM-yyyy")
.Editor(
Html.X().DateField()
.Format("yyyy-MM-dd")
.MinDate(new DateTime(2006, 1, 1))
.DisabledDays(new int[] { 0, 6 })
.DisabledDaysText("Plants are not available on the weekends")
),

Html.X().CheckColumn()
.Text("Indoor?")
.DataIndex("indoor")
.StopSelection(false)
.Editable(true)
.Width(55),

Html.X().ImageCommandColumn()
.Width(30)
.Commands(
Html.X().ImageCommand()
.Icon(Icon.Decline)
.ToolTip(t =>
{
t.Text = "Delete plant";
})
.CommandName("delete")
)
.Listeners(l =>
{
l.Command.Handler = "this.up('gridpanel').store.removeAt(recordIndex);";

})
)
.SelectionModel(
Html.X().CellSelectionModel()
)
.Plugins(
Html.X().CellEditing().ClicksToEdit(1)
)
)

I generate a view with above code,now I want to populate ddlMaterialID combo box with .Data(ViewBag.loadddlMaterialID) property ,and want o populate other fields of same row on ddlMaterialID selection changed event.please let me know how do i do this.

Daniil
Jun 26, 2014, 4:59 AM
Hi @matrixwebtech,

There is an example with a scenario similar to yours.
http://examples2.ext.net/#/Form/ComboBox/Linked_Combos_In_Grid/

matrixwebtech
Jun 26, 2014, 6:07 AM
Hi @matrixwebtech,

There is an example with a scenario similar to yours.
http://examples2.ext.net/#/Form/ComboBox/Linked_Combos_In_Grid/

Thanks for your assistance,Is there any code sample of this functionality for mvc?because this example is help full but some time problem with server side coding,because asp.net and asp.net mvc coding are different.and I am a new user of ext.net so some times I not understand what to be write in server side.

Daniil
Jun 26, 2014, 8:07 AM
Unfortunately, there is no such the example in the MVC Examples Explorers, but there are many other examples which might definitely help to understand the syntax.
http://mvc.ext.net/

matrixwebtech
Jun 26, 2014, 5:18 PM
Unfortunately, there is no such the example in the MVC Examples Explorers, but there are many other examples which might definitely help to understand the syntax.
http://mvc.ext.net/

I follow http://examples2.ext.net/#/Form/ComboBox/Linked_Combos_In_Grid/ example

VIEW COD


@( Html.X().Store()
.ID("stormaterialid")

.Model(
Html.X().Model()
.IDProperty("MaterialID")
.Fields(
Html.X().ModelField().Name("MaterialID").Type(ModelFieldType.Int),
Html.X().ModelField().Name("MaterialName").Type(ModelFieldType.String)

)


)
.ServerProxy(X.AjaxProxy()
.Url(Url.Action("Pur_MaterialInformation_Get", "MaterialRequisitionsEntry"))
.Reader(X.JsonReader().Root("data"))
)

)


Html.X().ComboBox()
.ID("ddlMaterialID")
.TypeAhead(true)
.SelectOnTab(true)
.ValueField("MaterialID")
.DisplayField("MaterialName")
.StoreID("stormaterialid")
.QueryMode(DataLoadMode.Local)
.TriggerAction(TriggerAction.All)




CONTROLLER CODE


public StoreResult Pur_MaterialInformation_Get()
{
List<tbl_Pur_MaterialInformation> _tbl_Pur_MaterialInformation = new List<tbl_Pur_MaterialInformation>();
tbl_Pur_MaterialInformation obj_tbl_Pur_MaterialInformation = new tbl_Pur_MaterialInformation();
_UserSession = (UserSession)Session[AppSession.SessionCurrentUser];
ERP.Models.PurchaseManagement.MasterManagement.Mat erialInformation.MaterialInformation _MaterialInformation = new Models.PurchaseManagement.MasterManagement.Materia lInformation.MaterialInformation();
obj_tbl_Pur_MaterialInformation.BranchID = _UserSession.BranchID;
obj_tbl_Pur_MaterialInformation.CompanyID = _UserSession.CompanyID;
_tbl_Pur_MaterialInformation = _MaterialInformation.Pur_MaterialInformation_Get(o bj_tbl_Pur_MaterialInformation);
return this.Store( _tbl_Pur_MaterialInformation.Cast<object>().ToArray());
}

how do I load store on load

can you please provide me a code sample in mvc razor with a combobox and a text box inside grid,and on combo box selection change text box fill accordingly.
it will be very helpful for me

Daniil
Jun 27, 2014, 11:27 AM
can you please provide me a code sample in mvc razor with a combobox and a text box inside grid,and on combo box selection change text box fill accordingly.
it will be very helpful for me

According to this description I can provide the following example.

View

@model IEnumerable<object>

@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@X.ResourceManager()

@(X.GridPanel()
.Store(X.Store()
.Model(X.Model().Fields("test", "test2"))
.DataSource(Model)
)
.ColumnModel(
X.Column()
.Text("ComboBox")
.DataIndex("test")
.Editor(X.ComboBox().Items("Item 1", "Item 2", "Item 3")),

X.Column()
.Text("TextField")
.DataIndex("test2")
.Editor(X.TextField())
)
.Plugins(X.CellEditing()
.Listeners(events =>
events.Edit.Handler = @"if (e.field === 'test') {
e.record.set('test2', e.value);
}"
)
)
)
</body>
</html>


Controller

public ActionResult Index()
{
return View(new List<object>
{
new { test = "Item 1" },
new { test = "Item 2" },
new { test = "Item 3" }
});
}

geoffrey.mcgill
Jun 30, 2014, 6:51 PM
For some reason OP started a new thread regarding this topic and the discussion has continued at the following location:

http://forums.ext.net/showthread.php?38421-Master-Details-entry-form