Ext.net 2.0 ComboBox Store - asp.net

I have a ComboBox Control:
<ext:ComboBox id="comboDatabase"></ext:ComboBox>
In my code I populate the ComboBox Store by:
comboDatabase.Store.Primary.DataSource = dbList
comboDatabase.Store.Primary.DataBind()
However, in my javascript, when I do comboDatabase.getStore().data.items, it returns nothing.
Any idea why? Thanks in advance.

Just define the store:
<ext:ComboBox ID="PACKING" runat="server" FieldLabel="PACKING"
ValueField="id" DisplayField="pk" QueryMode="Local">
<Store>
<ext:Store ID="PackingStore" runat="server" Data='<%# packings %>'>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="id" />
<ext:ModelField Name="pk" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader IDProperty="id" />
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
c#:
protected object packings
{
get { return ctx.Packings.Select(p => new object[] { p.id, p.PackingName }).ToArray<object>();
}

Is Easy, the same code of ext.net 1.x
EXT.NET CODE
<ext:Store ID="Store1" runat="server" >
<Model>
<ext:Model runat="server" IDProperty="code">
<Fields>
<ext:ModelField Name="code_item" />
<ext:ModelField Name="description_item" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
...
<ext:combobox id="combo" runat="server" storeid="Store1" displayfield="description_item" valuefield="code_item" />
C# CODE
private void LoadStore(Store store, string query)
{
OdbcConnection Odbc = new OdbcConnection();
try
{
Odbc.ConnectionString = mntClass.HelperDB.strConn(); //mntClass is my particular dll
Odbc.Open();
DataSet objDataset1 = new DataSet();
objDataset1 = mntClass.HelperDB.ExecuteSelectQuery(Odbc, query);
store.DataSource = objDataset1;
store.DataBind();
}
catch (OdbcException)
{
}
finally
{
Odbc.Close();
}
}

Related

How to get the value of selected valueField in Combobox?

I'm trying to assign a value ext:Hidden. I want to set the selected value of the field "HiddenSmo". How to get the value of selected valueField in Combobox?
<DirectEvents>
<Select OnEvent="ValueSelected" After="var ind = #{ComboBoxSmo}.getValue();
#{HiddenSmo}.setValue(#{ComboBoxSmo}.store.getAt(ind).get('code'));" />
</DirectEvents>
but after selection HiddenSmo="". Please help me. thanks in advance. Full code:
<ext:ComboBox
ID="ComboBoxSmo"
runat="server"
DisplayField="name"
ValueField="IdSmo"
TypeAhead="false"
TriggerAction="Query"
QueryMode="Remote"
ForceSelection="true"
SelectOnFocus="true"
Disabled="false"
Name="IDSmo">
<Store>
<ext:Store
runat="server">
<Proxy>
<ext:AjaxProxy
Url="~/Controls/DataService.asmx/GetSMOsD" >
<ActionMethods
Read="POST" />
<Reader>
<ext:XmlReader
Root="ArrayOfSMOResponse"
Record="SMOResponse"
/>
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model
runat="server"
IDProperty="IdSmo">
<Fields>
<ext:ModelField Name="code" Type="Int" />
<ext:ModelField Name="IdSmo" Type="Int" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<DirectEvents>
<Select OnEvent="ValueSelected" After="var ind = #{ComboBoxSmo}.getValue();
#{HiddenSmo}.setValue(#{ComboBoxSmo}.store.getAt(ind).get('code'));" />
</DirectEvents>
Although I don't know the "wrapper language" you use, combo, as any other form fields, has setter and getter of its value:
var val = combo.getValue(); // to get the current combo value
combo.setValue(val); // to set value of the combo to val
try to use this one
App.ComboBoxSmo.getValue()
instead of this #{ComboBoxSmo}.getValue()
I don't understand why you would use a HiddenField to store the value of the combobox selection when the combobox selection already stores it's own value. My guess is that you are trying to workaround what you see as strange behavior within the combobox. So here are some quick pointers I've learned while fighting with combobox's.
If you use a store, you need to shape the object in "setValue([object])" just like the way the store model is shaped.
Use "SelectedItems.Add(...)" and "UpdateSelectedItems()". When just using Ext.Net.ListItems and adding to the Items collection on comboboxes this may not be necessary but when you use a store this seems to be required to get the combobox to play nice with the store on directevents.
<Model>
<ext:Model
runat="server"
IDProperty="IdSmo">
<Fields>
<ext:ModelField Name="code" Type="Int" />
<ext:ModelField Name="IdSmo" Type="Int" />
<ext:ModelField Name="name" Type="String" />
</Fields>
</ext:Model>
</Model>
Server Side:
protected void updateComboBoxSelection(object sender, DirectEventArgs e)
{
if (X.IsAjaxRequest)
{
this.ComboBoxSmo.SelectedItems.Add(new { IdSmo=101, name="foobar", code=15 });
this.ComboBoxDateTime.UpdateSelectedItems();
}
}

Pass all rows from grid that have certain value in a specific column

I have a Ext GridPanel named sampleGrid, which has some column. one of them is named IsAssigned holding a bool value.
I have a ext button. When I click it I want to pass all the row that has IsAssigned column value false.
I can pass all the grid rows,
See below code sample,
<ext:Button ID="btnSave" runat="server" Text="Save"
Icon="Accept">
<DirectEvents>
<Click OnEvent="btnSave_Click">
<ExtraParams>
<ext:Parameter Name="rows" Value="Ext.encode(#{sampleGrid}.getRowsValues())"
Mode="Raw" ></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
Here Ext.encode(#{sampleGrid}.getRowsValues()) will pass all the rows. But I want to pass only rows that have IsAssigned column value false.
isAssigned column code:
<ext:CheckColumn ColumnID="chkSelect" DataIndex="IsAssigned" MenuDisabled="true"
Sortable="true" Width="30px" Editable="true">
</ext:CheckColumn>
Any help will be appreciated.
I am not sure if it is best solution but give try.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function Test() {
var jsondata = Ext.encode(App.grd.getRowsValues());
alert("{dt:" + jsondata + "}");
var mynewitems = {};
var myobj = JSON.parse('{"dt":' + jsondata +'}');
for (var i = 0; i < myobj.dt.length; i++) {
alert(myobj.dt[i].data2);
if (myobj.dt[i].data2 == true) { myobj.dt.splice(i, 1); }
}
alert(myobj);
return myobj;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server"></ext:ResourceManager>
<ext:Button ID="btnSave" runat="server" Text="Save"
Icon="Accept">
<DirectEvents>
<Click OnEvent="btnSave_Click">
<ExtraParams>
<ext:Parameter Name="rows" Value="Test()"
Mode="Raw" ></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:GridPanel runat="server" ID="grd" Height="300" Layout="FitLayout">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="data0"></ext:ModelField>
<ext:ModelField Name="data1"></ext:ModelField>
<ext:ModelField Name="data2"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" DataIndex="data0" Text="data0"></ext:Column>
<ext:Column ID="Column2" runat="server" DataIndex="data1" Text="data1"></ext:Column>
<ext:CheckColumn ID="CheckColumn1" runat="server" DataIndex="data2" Text="data2"></ext:CheckColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</form>
</body>
</html>
code behind;
protected void Page_Load(object sender, EventArgs e)
{
grd.GetStore().DataSource = GetData();
grd.DataBind();
}
public void btnSave_Click(Object sender,DirectEventArgs e)
{
string js = e.ExtraParams["rows"].ToString();
X.Msg.Alert("aaa", js).Show();
}
private object[] GetData()
{
return new object[] {
new object[] { "test1", "test1", true },
new object[] { "test2", "test2", false },
new object[] { "test3", "test3", false } };
}
Guys i have done it using filterRecord.
<ext:Parameter Name="rows" Value="Ext.encode(#{sampleGrid}.getRowsValues(
{
filterRecord : function (record) {
return (record.data.IsAssigned==false); }
})
)" Mode="Raw" >
</ext:Parameter>

ext.net.row editing ,how to triger update event fire ( OnBeforeRecordUpdated)

I have a srote like this
<ext:Store ID="strPos" runat="server" AutoSync="false" OnReadData="StoreChange_Event"
OnBeforeRecordUpdated="StorePostGuncelle" OnBeforeRecordInserted="StorePostEkle"
AutomaticResponseValues="false" OnBeforeRecordDeleted="StorePosSil">
I can ınserting values like that way,
grid.store.insert(0, r);
#{strPos}.sync();
grid.store.reload();
but the problem is when updating the value .when clcik the row ,open row editor,then I clcik the update button but no event fire .(I wanna fireOnBeforeRecordUpdaten event ).
I have already tried this ,
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" CancelBtnText="İptal" SaveBtnText="Kaydet" ClicksToEdit="1" TriggerEvent="#{strPos}.sync();#{strPos}.reload();" >
</ext:RowEditing>
</Plugins>
and this one
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" CancelBtnText="İptal" SaveBtnText="Kaydet" ClicksToEdit="1" SaveHandler="#{strPos}.sync();#{strPos}.reload();" SaveHandler="" >
</ext:RowEditing>
</Plugins>
but change nothing.
thank you
**
it is availbale this.up('gridpanel').store.removeAt(recordIndex); and insert method but where is the update method.
EDITED: complete example ;
<ext:XScript ID="XScript1" runat="server">
<script>
function addPlant(btn) {
// Create a model instance
var grid = #{GridPanel1};
grid.editingPlugin.cancelEdit();
var r = Ext.ModelManager.create({
Adi: 'pos bilgisi',
Id:'0'
} ,'Pos');
grid.store.insert(0, r);
#{strPos}.sync();
grid.store.reload();
// grid.editingPlugin.startEditByPosition({ row: 0, column: 1 });
}
</script>
</ext:XScript>
<ext:GridPanel ID="GridPanel1" Scroll="Vertical" runat="server" Title="Pos tanımlamalrı"
Height="200">
<Store>
<ext:Store ID="strPos" runat="server" AutoSync="false" OnReadData="StoreChange_Event" OnAfterStoreChanged="store_change"
OnBeforeRecordUpdated="StorePostGuncelle" OnBeforeRecordInserted="StorePostEkle"
AutomaticResponseValues="false" OnBeforeRecordDeleted="StorePosSil">
<Model>
<ext:Model ID="Model1" runat="server" Name="Pos">
<Fields>
<ext:ModelField Name="Id" Type="Int" SortDir="ASC" />
<ext:ModelField Name="Adi" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Pos ekle" Handler="addPlant" Icon="Add" />
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column7" runat="server" Text="Id" DataIndex="Id" Flex="1">
</ext:Column>
<ext:Column ID="Column8" runat="server" Text="Banka adı" DataIndex="Adi" Flex="1">
<Editor>
<ext:TextField ID="txtAd" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Width="30" Sortable="false">
<Commands>
<ext:ImageCommand Icon="Decline" ToolTip-Text="Delete Plant" CommandName="delete">
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="this.up('gridpanel').store.removeAt(recordIndex);#{strPos}.sync();" />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="rowSelectionModel1" runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<Plugins>
<ext:RowEditing ID="RowEditing1" runat="server" CancelBtnText="İptal" SaveBtnText="Kaydet" ClicksToEdit="0" SaveHandler="#{strPos}.sync();" >
</ext:RowEditing>
</Plugins>
</ext:GridPanel>
and the code behind is here
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
strPos.DataSource = ps.Getir();
strPos.DataBind();
}
}
protected void StoreChange_Event(object sender, EventArgs e)
{
strPos.DataSource = ps.Getir();
strPos.DataBind();
}
protected void store_change(object sender, AfterStoreChangedEventArgs e)
{
strPos.DataSource = ps.Getir();
strPos.DataBind();
}
public void StorePostEkle(object sender, BeforeRecordInsertedEventArgs e)
{
// string ss = e.Record.ToString();
Pos pss = e.Object<Pos>();
ps.Ekle(pss);
X.Msg.Notify("store", "storea veri eklendi" + e.Record).Show();
// GridPanel1.Reload();
}
protected void StorePosSil(object sender, BeforeRecordDeletedEventArgs e)
{
X.Msg.Notify("store", "storea dan veri, silindi " + e.Record).Show();
Pos pss = e.Object<Pos>();
try
{
ps.Sil(pss.Id);
}
catch (Exception)
{
throw;
}
}
protected void StorePostGuncelle(object sender, BeforeRecordUpdatedEventArgs e)
{
X.Msg.Notify("store", "storea güncellendi " + e.Record).Show();
Pos pss = e.Object<Pos>();
// Pos pss = JSON.Deserialize<Pos>(e.ToString());
ps.Guncelle(pss);

ComboBox is not displaying "DisplayText" instead of that it is showing "Value" in Ext.net

I am filling a Combobox store values with One Service Using the Ajax Request to automatically display the matched text(filtering) using the following code
<ext:ComboBox ID="cbManager" runat="server" DisplayField="FirstName"
LabelAlign="Right" ValueField="EmployeeID" AllowBlank="false"
HideTrigger="true" MinChars="1" FieldLabel="* Manager" >
<ext:Store ID="storeManager" runat="server" AutoLoad="false">
<Proxy>
<ext:AjaxProxy Url="~/Modules/eHRMS/FilterEmployeeNames.ashx?empType=1">
<ActionMethods Read="GET" />
<Reader>
<ext:JsonReader Root="employees" TotalProperty="total" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model4" runat="server">
<Fields>
<ext:ModelField Name="EmployeeID" />
<ext:ModelField Name="FirstName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
When i select the any name from the Combobox,it is giving Correct
Value But when i trying to Fill the ComboBox Value using the Code it
showing only EmployeeID(Value) not showing the EmplyeeName
I have used the following code in CodeBehind
Employee emp = GetProject(EmployeeID);
cbManager.SetValue(project.ManagerID);
I have also tried the following one also
cbManager.Select(project.ManagerID.ToString());
but it only showing the int Value instead of String(i.e EmployeeName)
What could be the Reason for this behaviour,Please suggest me the
right way.
Thank you
You should add record that corresponds to this value and then set the value:
<%# 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)
{
Store store = this.ComboBox1.GetStore();
store.Data = new object[]
{
new
{
value = "2",
text = "Item 2"
}
};
}
}
protected void Store_OnReadData(object sender, StoreReadDataEventArgs e)
{
Store store = sender as Store;
store.DataSource = new object[]
{
new { value = "1", text = "Item 1" },
new { value = "2", text = "Item 2" },
new { value = "3", text = "Item 3" }
};
store.DataBind();
}
protected void ButtonClick(object sender, DirectEventArgs e)
{
ComboBox1.GetStore().Add(new object[]
{
new
{
value = "4",
text = "Item 4"
}
});
ComboBox1.SetValue("4");
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox
ID="ComboBox1"
runat="server"
DisplayField="text"
ValueField="value">
<Store>
<ext:Store runat="server" OnReadData="Store_OnReadData">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy>
<Reader>
<ext:JsonReader />
</Reader>
</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<SelectedItems>
<ext:ListItem Index="0" />
</SelectedItems>
</ext:ComboBox>
<ext:Button runat="server" Text="Set some value">
<DirectEvents>
<Click OnEvent="ButtonClick"></Click>
</DirectEvents>
</ext:Button>
</form>
</body>
</html>

Is InsertMethod broken when using ASPxGridView and ObjectDatasource with a custom EditForm?

I have an ASPxGridView, currently 11.1.7.0, which I populate with an ObjectDatasource. Everything works as expected until I use a custom editform. In another control i solved this by using the OnRowInserting attribute in the aspxgridview control, but I dont like this since it's extra work compared to using the objectdatasource.
The code looks something like this.
<dx:ASPxGridView ID="ASPxGridView1" runat="server"
ClientIDMode="AutoID"
AutoGenerateColumns="False"
KeyFieldName="UserId"
DataSourceID="ObjectDataSource1"
ClientInstanceName="grid"
onhtmleditformcreated="AsPxGridView1HtmlEditFormCreated">
<SettingsEditing PopupEditFormWidth="600" PopupEditFormModal="true" Mode="EditForm" />
<Templates>
<TitlePanel>
<dx:ASPxButton ID="New" runat="server" Text="Ny användare" ClientInstanceName="New" AutoPostBack="false">
<ClientSideEvents Click="function (s, e) { grid.AddNewRow(); }" />
</dx:ASPxButton>
</TitlePanel>
<EditForm>
First Name: <dx:ASPxTextBox ID="FirstName" runat="server" />
<dx:ASPxGridViewTemplateReplacement ID="UpdateButton" ReplacementType="EditFormUpdateButton" runat="server" />
<dx:ASPxGridViewTemplateReplacement ID="CancelButton" ReplacementType="EditFormCancelButton" runat="server" />
</EditForm>
</Templates>
<Columns>
<dx:GridViewDataTextColumn FieldName="UserId" VisibleIndex="0" />
<dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="2" />
<dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="3" />
</Columns>
</dx:ASPxGridView>
<asp:ObjectDataSource
ID="ObjectDataSource1"
TypeName="UserData"
SelectMethod="GetItems"
UpdateMethod="ItemUpdate"
InsertMethod="ItemInsert"
DeleteMethod="ItemDelete"
runat="server">
<InsertParameters>
<asp:Parameter Name="FirstName" Type="String"/>
</InsertParameters>
</asp:ObjectDataSource>
And the UserData object
public class UserData
{
public List<TblProUserData> GetItems()
{
var tblProUserData = new TblProUserData();
tblProUserData.Fill();
return tblProUserData.List;
}
public void ItemDelete(int userId)
{ }
public void ItemUpdate()
{ }
public void ItemInsert(string FirstName)
{
// This method gets called, but the FirstName is null.
}
}
The problem is that the ItemInsert gets called, but the FirstName attribute is always null.
Is this a bug? is there a way around this? Did I miss something?
Thanks.
It is necessary to use the Two-Way data-binding technique to bind template editors with DataItem's fields:
<dx:ASPxTextBox ID="FirstName" runat="server" Text='<%#Bind("FirstName")%>' />
Based off the following question, specifying TypeName="UserData" could be causing the problem.
ObjectDataSource not calling Insert method when it has extra parameters
Try removing that from the asp:ObjectDataSource and see if the ItemInsert method works.

Resources