PDA

View Full Version : [CLOSED] Filter Header and Combo boxes



vmehta
Jun 10, 2014, 4:02 PM
Hello,

I am using Filter Header to filter my grid data as in this example - : http://examples2.ext.net/#/GridPanel/FilterHeader/Overview/
This does not seem to work on combo boxes. Any suggestions?

Daniil
Jun 11, 2014, 4:29 AM
Hi @vmehta,

You should use a Column's HeaderItems, like that:

<ext:Column runat="server" Text="Size" DataIndex="Size">
<HeaderItems>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="small" />
<ext:ListItem Text="large" />
</Items>
</ext:ComboBox>
</HeaderItems>
</ext:Column>

vmehta
Jun 11, 2014, 7:26 AM
I am using a editable grid.


<ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID" >
<Renderer Fn="topicValues" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID" />
</Editor>
</ext:Column>

Daniil
Jun 11, 2014, 7:31 AM
Thanks for sharing that.

vmehta
Jun 11, 2014, 11:14 AM
Is there a way to implement it to combo boxes?

Daniil
Jun 11, 2014, 3:06 PM
Is there a way to implement it to combo boxes?

Please clarify to implement what? If you put the code that I posted earlier into the FilterHeader example that you mentioned, you will see a ComboBox filter for the Size column. Is that not what you need? If so, please clarify your requirement. It is not clear.

vmehta
Jun 12, 2014, 1:00 PM
I did this.


<ext:Column ID="Column3" runat="server" Text="Topic" DataIndex="TopicID">
<Renderer Fn="topicValues" />
<HeaderItems>
<ext:ComboBox ID="ComboBox2" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID">
</ext:ComboBox>
</HeaderItems>
</ext:Column>

but I am using a editable grid


<ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID" >
<Renderer Fn="topicValues" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID" Editable="false">
</ext:ComboBox>
</Editor>
</ext:Column>

Please let me know how I can implement it in this

Daniil
Jun 12, 2014, 2:40 PM
Do you mean that this combination doesn't work?

<ext:Column>
<Renderer ... />
<Editor>...</Editor>
<HeaderItems>...</HeaderItems>
</ext:Column>

vmehta
Jun 12, 2014, 3:10 PM
There is no <Headertems> in <Editor>

vmehta
Jun 12, 2014, 3:38 PM
I did this.


<ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID">
<Renderer Fn="topicValues" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID" Editable="false">
</ext:ComboBox>
</Editor>
<HeaderItems>
<ext:ComboBox ID="ComboBox2" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID"/>
</HeaderItems>
</ext:Column>

and I got the filter combo box. But when I choose a value it gives this error 'Object doesn't support property or method 'split''. Any idea?

Daniil
Jun 13, 2014, 8:58 AM
Please provide a full test case.

vmehta
Jun 13, 2014, 3:22 PM
When I bind static data to the combo box store and grid store, the filter for combo box works fine but when I bind it dynamically, I get this javascript error as in image 2 (attached) whenever a choose a selection for filter.

Here is my sample code:

Static binding : works fine (image 1 attached)


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AddEditIdeas.ascx.cs"
Inherits="PHX.Web.PreliminaryIdeas.Controls.AddEditIdeas" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<ext:XScript ID="XScript1" runat="server">
<script language="javascript" type="text/javascript">

var topicValues = function (value)
{

var r = #{StoreCombo}.getById(value);
if (Ext.isEmpty(r))
{
return "";
}
return r.data.TopicName;
};


</script>
</ext:XScript>

<ext:ResourceManager ID="rmPrelimIdeas" runat="server" />

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
//DataSource for StoreCombo
List<object> StoreComboData = new List<object>
{
new {TopicID="1",TopicName="Topic1"},
new {TopicID="2",TopicName="Topic2"},
new {TopicID="3",TopicName="Topic3"},
new {TopicID="4",TopicName="Topic4"}
};
StoreCombo.DataSource = StoreComboData;
StoreCombo.DataBind();



//DataSource for GridBox
List<object> gridData = new List<object>
{
new {TopicID = "1", TopicName = "Topic1"},
new {TopicID = "3", TopicName = "Topic3"},
new {TopicID = "3", TopicName = "Topic3"},
new {TopicID = "1", TopicName = "Topic1"},
new {TopicID = "2", TopicName = "Topic2"},
new {TopicID = "2", TopicName = "Topic2"},
new {TopicID = "3", TopicName = "Topic3"}

};
Store1.DataSource = gridData;
Store1.DataBind();

}
}

</script>
<ext:Store ID="StoreCombo" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TopicID">
<Fields>
<ext:ModelField Name="TopicID" />
<ext:ModelField Name="TopicName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>


<ext:GridPanel ID="GridPanel1" runat="server">
<Store>
<ext:Store ID="Store1" runat="server">

<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="TopicID" />
<ext:ModelField Name="TopicName" />

</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>

<ext:Column ID="Column4" runat="server" Text="Topic" DataIndex="TopicID">

<Renderer Fn="topicValues" />
<Editor>
<ext:ComboBox ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID" >
</ext:ComboBox>
</Editor>
<HeaderItems>
<ext:ComboBox ID="ComboBox2" runat="server" StoreID="StoreCombo" DisplayField="TopicName"
ValueField="TopicID" Editable="false" />
</HeaderItems>
</ext:Column>

</Columns>
</ColumnModel>

<Plugins>
<ext:CellEditing ClicksToEdit="1">
</ext:CellEditing>
<ext:FilterHeader ID="FilterHeader1" runat="server" />
</Plugins>

</ext:GridPanel>


Dynamic binding in .cs page : javascript error (image 2 attached)



protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var entry = new EntityAllPrelimIdeaIn
{
UserId = 1,
GroupID = "1"
};

List<EntityTopicValues> lsttopicList = new List<EntityTopicValues>();
List<EntityIdeaDetails> lstIdeaList = new List<EntityIdeaDetails>();
EntityPrelimIdeaOut ideaData = Business.Idea.PreliminaryIdeas.GetPrelimIdeaList(e ntry);
lstIdeaList = ideaData.ideaDetails;
lsttopicList = ideaData.topicValues;
StoreCombo.DataSource = lsttopicList;
StoreCombo.DataBind();
this.Store1.DataSource = lstIdeaList;
this.Store1.DataBind();

}
}

Please let me know what is causing the error.

Daniil
Jun 14, 2014, 9:19 AM
Please try to set Type="String" for the ModelField which is the ComboBox's ValueField.

vmehta
Jun 17, 2014, 6:56 AM
I tried setting Type="String" for Combo box Model


<ext:Store ID="StoreCombo" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="TopicID">
<Fields>
<ext:ModelField Name="TopicID" Type="String" />
<ext:ModelField Name="TopicName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

It does not load the combo box values if I do this. I also tried the same for GirdPanel model which resulted in the same issue (not loading combo box).

vmehta
Jun 17, 2014, 9:58 AM
I did this.

I added Type="String" in both the places - Model of Combo box and Model of Grid panel and that did the magic :)

A BigThank you!!