PDA

View Full Version : [CLOSED] MultiCombo in Gridpanel



hemantpatil
Jul 03, 2013, 1:13 PM
Hi,

Can i use Multicombo (multiple values to be selected in combobox) column in gridpanel..?

Daniil
Jul 03, 2013, 3:15 PM
Hi @hemantpatil,

You can use a ComponentColumn, placing a MultiCombo in its Component.

hemantpatil
Jul 04, 2013, 9:03 AM
Hi @hemantpatil,

You can use a ComponentColumn, placing a MultiCombo in its Component.

Hi Daniil,

Thanks for the Reply.

i've used ComponentColumn as per your suggestion and it seems working as expected. but i m facing few issues in the sample. i m posting the sample code herewith.

Note : i m using Ext.net Ver 2.2

Problem Faced:

1. i've added editor controls in other column. on click of Tab in any column, Editor control in the next column should get visible. but it's not happening in the sample. i think there is some Javascript Error on the page. (Sceenshot 1-1.png)

2. in Multiselect combo, when i tick/check two items, it shows both the item as column value, but when i uncheck one of the selected value, that value gets removed from the column value but the checkbox still appears as checked in list. (Screenshot 2-2.png)

Sample Code as Below.

GridPanel_MultiSelectCombo.aspx


<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GridPanel_MultiSelectCombo.aspx.vb" Inherits="Ext.Net_Samples_New.GridPanel_MultiSelectCombo" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Simple Array Grid - Ext.NET Examples</title>
<link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
<style>
.x-grid-row-over .x-grid-cell-inner
{
font-weight: bold;
}
</style>

<script>
var template = '<span style="color:{0};">{1}</span>';

var change = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value);
};

var pctChange = function (value) {
return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
};

var StatusRenderer = function (value, st) {
var ind = st.find("ID", value);
var r = st.getAt(ind);
if (Ext.isEmpty(r)) {
return "";
}
return r.data.Name;

};
</script>

</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1> Simple Array Grid</h1>
<ext:Store ID="StoreCombo" runat="server">
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="1200" Height="600">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
<ext:ModelField Name="DepartmentId" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company">
<Editor>
<ext:TextField ID="txtCol1" runat="server" AllowBlank="false"/>
</Editor>
</ext:Column>
<ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
<Renderer Format="UsMoney" />
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:Column>
<ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
<Renderer Fn="change" />
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
<Renderer Fn="pctChange" />
</ext:Column>
<ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
<ext:ComponentColumn ID="DepartmentCol" runat="server" DataIndex="" Text="Department" Width="240">
<Component>
<ext:MultiCombo ID="ComboBox1" runat="server" StoreID="StoreCombo" DisplayField="Name" ValueField="ID" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
</ext:GridPanel>
</form>
</body>
</html>


GridPanel_MultiSelectCombo.aspx.vb



Imports System.Web.UI.WebControls
Imports System.Configuration

Imports ext1 = Ext.Net
Imports Ext.Net
Imports Ext.Net.JSON

Imports System.Data
Imports System
Imports System.Data.SqlClient

Partial Public Class GridPanel_MultiSelectCombo
Inherits System.Web.UI.Page

Dim STRSQL As String

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Me.Store1.DataSource = Me.Data
Me.Store1.DataBind()

Me.StoreCombo.DataSource = Me.DeptData
Me.StoreCombo.DataBind()

GridPanel1.Plugins.Add(New Ext.Net.CellEditing)
End Sub

Private ReadOnly Property Data() As Object()
Get
Return New Object() {New Object() {"3m Co", 71.72, 0.02, 0.03, "9/1 12:00am"}, New Object() {"Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am"}, New Object() {"Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am"}, New Object() {"American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am"}, New Object() {"American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am"}, New Object() {"AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am"}, _
New Object() {"Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am"}, New Object() {"Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am"}, New Object() {"Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am"}, New Object() {"E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am"}, New Object() {"Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am"}, New Object() {"General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am"}, _
New Object() {"General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am"}, New Object() {"Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am"}, New Object() {"Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am"}, New Object() {"Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am"}, New Object() {"International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am"}, New Object() {"Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am"}, _
New Object() {"JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am"}, New Object() {"McDonald""s Corporation", 36.76, 0.86, 2.4, "9/1 12:00am"}, New Object() {"Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am"}, New Object() {"Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am"}, New Object() {"Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am"}, New Object() {"The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am"}, _
New Object() {"The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am"}, New Object() {"The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am"}, New Object() {"United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am"}, New Object() {"Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am"}, New Object() {"Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am"}}
End Get
End Property

Private ReadOnly Property DeptData() As Object()
Get
Return New Object() {New Object() {1, "Dept. 1"}, New Object() {2, "Dept. 2"}, New Object() {3, "Dept. 3"}, New Object() {4, "Dept. 4"}}
End Get
End Property
End Class


64816482

Daniil
Jul 04, 2013, 12:45 PM
1. You should not add two CellEditing plugins here and here.

<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>

GridPanel1.Plugins.Add(New Ext.Net.CellEditing)

Please remove one. After that you will be able to go trough common Editors (Column's Editors) by pressing the Tab key. But a ComponentColumn doesn't support it.

Do you not want to use a common Column with a MultiCombo Editor?

2. I cannot reproduce it with the latest Ext.NET sources from SVN trunk. It is probably fixed.

hemantpatil
Jul 05, 2013, 5:50 AM
1. You should not add two CellEditing plugins here and here.

<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>

GridPanel1.Plugins.Add(New Ext.Net.CellEditing)

Please remove one. After that you will be able to go trough common Editors (Column's Editors) by pressing the Tab key. But a ComponentColumn doesn't support it.

Do you not want to use a common Column with a MultiCombo Editor?

2. I cannot reproduce it with the latest Ext.NET sources from SVN trunk. It is probably fixed.

Hi Daniil,

Thanks for the Reply.

by removing GridPanel1.Plugins.Add(New Ext.Net.CellEditing), now i m able to go trough column editors on Tab. but as u said, ComponentColumn doesn't support it. i want to set focus to MultiCombo Column on tab. how can i do this...?

2. (I cannot reproduce it with the latest Ext.NET sources from SVN trunk. It is probably fixed.)---i m using the latest version of(available on the site), still i m facing the issue. this issue also exists on the example portal. (please see attached screenshot for the same).

6489

Daniil
Jul 05, 2013, 2:56 PM
want to set focus to MultiCombo Column on tab. how can i do this...?


You should override a RowModel's onEditorTab method.
http://docs.sencha.com/extjs/4.2.1/source/RowModel.html#Ext-selection-RowModel-method-onEditorTab



2. (I cannot reproduce it with the latest Ext.NET sources from SVN trunk. It is probably fixed.)---i m using the latest version of(available on the site), still i m facing the issue. this issue also exists on the example portal. (please see attached screenshot for the same).


The online Examples Explorer uses the last public release (v2.2). This release is available to download on the site which you are probably using. But it is not the latest. The latest Ext.NET sources is in SVN trunk.
http://svn.ext.net/premium/trunk/

hemantpatil
Jul 06, 2013, 4:49 AM
You should override a RowModel's onEditorTab method.
http://docs.sencha.com/extjs/4.2.1/source/RowModel.html#Ext-selection-RowModel-method-onEditorTab



The online Examples Explorer uses the last public release (v2.2). This release is available to download on the site which you are probably using. But it is not the latest. The latest Ext.NET sources is in SVN trunk.
http://svn.ext.net/premium/trunk/

Hi Daniil,

i m not able to login to "http://svn.ext.net/premium/trunk/" using my username and password. i can login to forum with same credentials.

Baidaly
Jul 06, 2013, 4:58 AM
Hello!

Please, send an email with this problem to the following address: support@object.net

Daniil
Jul 08, 2013, 4:20 AM
Just to clarify. The SVN and forum credentials are not the same, they are different.

The SVN credentials should be emailed to you when you bought Premium Support Subscription. Please check the inbox.

If the SVN credentials are lost, then yes, please send a request to support at ext dot net.

hemantpatil
Jul 09, 2013, 6:58 AM
Just to clarify. The SVN and forum credentials are not the same, they are different.

The SVN credentials should be emailed to you when you bought Premium Support Subscription. Please check the inbox.

If the SVN credentials are lost, then yes, please send a request to support at ext dot net.

Hi Daniil,

i've the SVN credentials now, n i can login also. this might sound sily but can you please brief me what is SVN n which files do i need to download from the link..?

right now i m using assemblies from Ext.NET.WebForms.Pro.2.2.0.zip (downloaded from the ext.net site). i've never downloaded anything from SVN.

Daniil
Jul 09, 2013, 8:23 AM
To work with SVN I would recommend you to install some SVN client. I use TortoiseSVN (http://tortoisesvn.net/). It is free and nice.

After installing you will need to right click some folder, then choose "Checkout" and put this URL into a respective field.
http://svn.ext.net/premium/trunk/

It will download all the required sources. Then run a Visual Studio solution file you need (.sln files in the root). Then build. So, you will get required dlls in the bin folder.