[CLOSED] Implementing ExtJS Grid DataDrop plugin

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] Implementing ExtJS Grid DataDrop plugin

    Hi!

    I have a hard time to implementing a plugin for the Grid to allow Drag and Drop from Excel to a Grid.
    http://www.vinylfox.com/datadrop-dra...m-spreadsheet/

    My biggest problem is that there is a JS file called Override.js that imlements "Forwarding Mouse Events Through Layers" and I don't know where to put this script to get it all to work.

    If I put it in a script tag in the header it complaints about that Ext js is undefined, because the ResourceManager haven't render the ExtJS script yet.

    Anothter problem is that I'm using the GenericPlugin in the Plugins section of the Grid. But it will render it ctl0 = new Ext.ux.grid.DataDrop({}), but in the example it is rendered like [Ext.ux.grid.DataDrop]

    <ext:GenericPlugin Path="Ext.ux.DataDrop.js" InstanceName="Ext.ux.grid.DataDrop"/>
    //Moltas
    Last edited by geoffrey.mcgill; Sep 09, 2010 at 5:00 PM. Reason: please use [CODE] tags, [CLOSED]
  2. #2
    If I put it in a script tag in the header it complaints about that Ext js is undefined, because the ResourceManager haven't render the ExtJS script yet.
    Hello!

    I would suggest you to use the ResourcePlaceHolder control.

    It's a simple container control to allow for custom placement of Scripts and Styles in the <head> of the Page by the ResourceManager.

    If the Page does not contain a <ext:ResourcePlaceHolder> control, the <script>'s and <style>'s will be added as the last items in the <head>.

    The ResourcePlaceHolder does not render any HTML to the Page.

    Example
    <%@ Page Language="C#" %>
    
    <%@ 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 runat="server">
        <title>Ext.Net Example</title>
    
        <ext:ResourcePlaceHolder runat="server"/>
        <script type="text/javascript">
            Ext.onReady(function() {
                Ext.Msg.alert("", "Hello World!");
            });
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        </form>
    </body>
    </html>
    If remove the ResourcePlaceHolder control there would be an error "Ext is undefined".
    Last edited by geoffrey.mcgill; Sep 09, 2010 at 4:03 PM.
  3. #3
    The fix that Daniil suggested should work, since any Overrides need to be included just after the library files (ie: ext-all.js).

    Let us know how it goes.
  4. #4
    Hi Moltas,

    This topic has actually exposed a bit of a design flaw in the way an <ext:GenericPlugin> is configured if more than one .js file is required.

    At the moment we assume only one .js file is required for the Plugin, although obviously 1+ may be required.

    I'll work on a fix.

    Until a fix is available, here's a bit of a hack...

    Just copy/paste the contents of the Override.js file into the end (or beginning ?) of the Ext.ux.DataDrop.js file. Then you'll have just one file and can set the .Path of the <ext:GenericPlugin>.

    This should solve the problem without having to add the <ext:ResoucePlaceHolder>.

    Hope this helps.
    Geoffrey McGill
    Founder & CEO
  5. #5
    Im not sure if that's your best approach actually...Overrides are meant to be a shared thing, not directly related to a specific plugin. If overrides were included with all plugin code then it could result in overriding some method that another plugin needs a certain way. ie: overriding and override.

    Is there no feature in Ext.NET to handle including Overrides?
  6. #6
    Quote Originally Posted by VinylFox View Post
    Im not sure if that's your best approach actually...Overrides are meant to be a shared thing, not directly related to a specific plugin.
    yes, true. Although *in this case* the Override.js appears to be required by the user only when this particular Plugin is used. If Override.js is required *always* by the user, then obviously combining with Ext.ux.DataDrop.js is to be avoided.

    Concatenating the files was only suggested as a "hack" to work-around having to add an <ext:ResourcePlaceHolder>.

    If you need to include Override.js (or similar) independent of the Plugin .js, please add an <ext:ResourcePlaceHolder> into the <head> of you document and include Override.js after the placeholder.

    Hope this helps.
    Geoffrey McGill
    Founder & CEO
  7. #7
    This Override is generic, not specific to this plugin - it can be utilized by anyone needing the forward events through layers.
  8. #8

    Don't work.

    I can't get this to work.
    I have tried the suggestions you came up with.
    There is a big diffrence of how Coolite create it's Ext.JS components compared to the example code.

    From my dubugging sessions I can see this:
    - The mouse cursor doesn't change to "drop" state when I try to drag from Excel over my Coolite example as it does in the Ext.JS example.
    - The object that should contain the drag data is empty.

    One question that I have. Is there a better way of doing this with native Coolite code? Is it possible to use the DragZone component to accept items from outside the browser?

    //Moltas
  9. #9
    Hi,

    I don't think that plugins works under IE (I tested pure ExtJS sample from plugin repository and it doesn't work with ExtJS 3.1.1 and 3.3.0). Under another browsers the drag and drop performs but it adds only one row to the grid with file name only. It is plugin issue (not toolkit)

    Here is the sample how to attach that plugin to the grid (all questions are releated with that plugin functionality you should forward to the author)

    Here is the sample
    <%@ 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)
            {
                var store = this.GridPanel1.GetStore();
    
                store.DataSource = this.Data;
                store.DataBind();
            }
        }
    
        private object[] Data
        {
            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.40, "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" }
                };
            }
        }
    </script>
    
    
    <!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 runat="server">
        <title>Drag Drop Sample</title>
        
        <style type="text/css">
            /* style rows on mouseover */
            .x-grid3-row-over .x-grid3-cell-inner {
                font-weight: bold;
            }
        </style>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
        
        <script src="Override.js" type="text/javascript"></script>
        <script src="Ext.ux.DataDrop.js" type="text/javascript"></script>    
        
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
        
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
                    
            <ext:GridPanel 
                ID="GridPanel1"
                runat="server" 
                StripeRows="true"
                Title="Array Grid" 
                TrackMouseOver="true"
                Width="600" 
                Height="350"
                AutoExpandColumn="company">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company" DataIndex="company" />
                        <ext:Column Header="Price" DataIndex="price">                  
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column ColumnID="Change" Header="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" SingleSelect="true" />
                </SelectionModel>
                
                <CustomConfig>
                    <ext:ConfigItem Name="plugins" Value="[Ext.ux.grid.DataDrop]" Mode="Raw" />
                </CustomConfig>
            </ext:GridPanel>         
           
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Sep 14, 2010 at 5:39 PM.
    Vladimir Shcheglov
    Sr. Developer
  10. #10
    Quote Originally Posted by vladimir View Post
    ...I don't think that plugins works under IE (I tested pure ExtJS sample from plugin repository and it doesn't work with ExtJS 3.1.1 and 3.3.0). Under another browsers the drag and drop performs but it adds only one row to the grid with file name only. It is plugin issue (not toolkit)...
    Tested with 3.2.1 and it works just fine. Your doing something wrong.

    Are you trying to drag the file into the grid?

    See the demo page and READ the description. It says nothing about dragging files into the grid.

    http://www.vinylfox.com/lib/latest/e...-datadrop.html
    Last edited by VinylFox; Sep 14, 2010 at 7:20 PM.
Page 1 of 3 123 LastLast

Similar Threads

  1. Replies: 5
    Last Post: Dec 26, 2011, 5:39 AM
  2. [CLOSED] Editable Grid Plugin
    By rnachman in forum 1.x Premium Help
    Replies: 1
    Last Post: Oct 28, 2011, 6:29 AM
  3. Replies: 3
    Last Post: Sep 22, 2011, 4:45 PM
  4. [CLOSED] RowExpander Plugin for Grid
    By craig2005 in forum 1.x Premium Help
    Replies: 16
    Last Post: Jul 14, 2011, 2:48 PM
  5. DataDrop plugin
    By threewonders in forum 1.x Help
    Replies: 1
    Last Post: Apr 04, 2011, 4:14 PM

Tags for this Thread

Posting Permissions