Drag the data from excel then drop the data in Ext.net grid panel

Page 1 of 2 12 LastLast
  1. #1

    Drag the data from excel then drop the data in Ext.net grid panel

    Hi guys,

    I used below code for Drag the data from excel then drop the data in Ext.net grid panel functionality, it is working in old version of ext.net that is ext.net version 1.0 but i tried same code in new version i.e Ext.Net Version 2.2 ,Please suggest me to solve this issue.
    Please find below code

    Version 1.0 Code
    ################################################## ################

    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
    <script src="Scripts/jt.js" type="text/javascript"></script>
    <script src="Scripts/Ext.ux.DataDrop.js" type="text/javascript"></script>


    <SelectionModel>
    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
    </SelectionModel>
    <CustomConfig>
    <ext:ConfigItem Name="plugins" Value="Ext.ux.grid.DataDrop" Mode="Raw" />
    </CustomConfig>



    Version 2.2 Code
    ################################################## ############################

    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

    <script src="Scripts/jt.js" type="text/javascript"></script>
    <script src="Scripts/Ext.ux.DataDrop.js" type="text/javascript"></script>



    <SelectionModel>
    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" >

    </ext:CheckboxSelectionModel>

    </SelectionModel>
    <CustomConfig>
    <ext:ConfigItem Name="plugins" Value="Ext.ux.grid.DataDrop" Mode="Raw" />
    </CustomConfig>

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

    </Plugins>


    So finally i got this error

    ItemTag validation (_tkn_22): Reference token (CellEditing1_ClientInit) was not found.


    Thanks
  2. #2
    Do not add plugins via CustomConfig,
    Use GenericPlugin in Plugins section
    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.grid.DataDrop" Singleton="true" />
    Also, please ensure that your plugin is compatible with ExtJS 4.2.0
  3. #3
    Quote Originally Posted by Vladimir View Post
    Do not add plugins via CustomConfig,
    Use GenericPlugin in Plugins section
    <ext:GenericPlugin runat="server" InstanceName="Ext.ux.grid.DataDrop" Singleton="true" />
    Also, please ensure that your plugin is compatible with ExtJS 4.2.0
    Its not working please give me any solution.
  4. #4
    What do you mean "Its not working"? Please provide more details
  5. #5
    Quote Originally Posted by Vladimir View Post
    What do you mean "Its not working"? Please provide more details

    I used version 1.1 code it is working ,find the code in below

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Drag.aspx.cs" Inherits="Drag" %>

    %@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Xml" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">



    private bool cancel;
    private string message;
    private string insertedValue;

    protected void Store1_AfterRecordInserted(object sender, AfterRecordInsertedEventArgs e)
    {
    //The deleted and updated records confirms automatic (depending AffectedRows field)
    //But you can override this in AfterRecordUpdated and AfterRecordDeleted event
    //For insert we should set new id for refresh on client
    //If we don't set new id then old id will be used
    //if (!string.IsNullOrEmpty(insertedValue))
    //{
    // e.Keys.Add("ID", insertedValue);
    // insertedValue = "";
    //}

    if (e.Confirmation.Confirm && !string.IsNullOrEmpty(insertedValue))
    {
    e.Confirmation.ConfirmRecord(insertedValue);
    insertedValue = "";
    }
    }


    protected void SqlDataSource1_Inserted(object sender, SqlDataSourceStatusEventArgs e)
    {
    //use e.AffectedRows for ensure success action. The store read this value and set predefined Confirm depend on e.AffectedRows
    //The Confirm can be granted or denied in OnRecord....ed event
    //insertedValue = e.Command.Parameters["@newId"].Value != null
    // ? e.Command.Parameters["@newId"].Value.ToString()
    // : "";


    if (e.Command.Parameters["@newId"].Value != null)
    {

    insertedValue = e.Command.Parameters["@newId"].Value.ToString();
    }

    else
    {

    insertedValue = "s";
    }


    }

    protected void Store1_AfterDirectEvent(object sender, AfterDirectEventArgs e)
    {
    if (e.Response.Success)
    {
    // set to .Success to false if we want to return a failure
    e.Response.Success = !cancel;
    e.Response.Message = message;
    if (this.cancel)
    {
    GridPanel1.AddScript("alert({0});", JSON.Serialize(this.message));
    }
    }
    }



    protected void Store1_BeforeDirectEvent(object sender, BeforeDirectEventArgs e)
    {
    string emulError = e.Parameters["EmulateError"];
    try
    {
    if (emulError == "1")
    {
    throw new Exception("Emulating error");
    }
    }
    catch (Exception ex)
    {
    }
    }


    protected void Store1_RefershData(object sender, StoreRefreshDataEventArgs e)
    {
    this.Store1.DataBind();
    }
    protected void btnSave_Click(object sender, EventArgs e)
    {
    GridPanel1.Reload();

    }
    </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></title>

    <style type="text/css">
    .x-grid3-td-fullName .x-grid3-cell-inner
    {
    font-family: tahoma, verdana;
    display: block;
    font-weight: normal;
    font-style: normal;
    color: #385F95;
    white-space: normal;
    }
    .x-grid3-row-body p
    {
    margin: 5px 5px 10px 5px !important;
    width: 99%;
    color: Gray;
    }

    /* style rows on mouseover */
    .x-grid3-row-over .x-grid3-cell-inner {
    font-weight: bold;
    }
    </style>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

    <script src="Scripts/jt.js" type="text/javascript"></script>
    <script src="Scripts/Ext.ux.DataDrop.js" type="text/javascript"></script>

    <script type="text/javascript">


    var deleteRows = function (grid) {
    Ext.Msg.confirm('Delete Rows', 'Are you sure?', function (btn) {
    if (btn == 'yes') {
    grid.deleteSelected();

    grid.save();
    }

    //return focus
    grid.view.focusEl.focus();
    })
    }

    function copyToClipboardCrossbrowser(s) {
    s = document.getElementById(s).value;

    if (window.clipboardData && clipboardData.setData) {
    clipboardData.setData("Text", s);
    }
    }

    </script>

    </head>
    <body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TFA_DBConnectionString %>"
    SelectCommand="select * from Users"
    InsertCommand="insert into Users (User_Name, Entitlement_Id,Group_ID) values (@User_Name,@Entitlement_Id,@Group_ID)

    SELECT @newId = @@Identity;" DeleteCommand="delete from Users where (User_Name_ID=@User_Name_ID)"
    UpdateCommand="update Users set User_Name=@User_Name, Entitlement_Id = @Entitlement_Id,Group_ID=@Group_ID
    where User_Name_ID=@User_Name_ID " OnInserted="SqlDataSource1_Inserted">
    <DeleteParameters>
    <asp:Parameter Name="User_Name" Type="Int32" />
    <asp:Parameter Name="User_Name_ID" Type="Int32" />
    </DeleteParameters>
    <UpdateParameters>
    <asp:Parameter Name="User_Name" Type="String" />
    <asp:Parameter Name="Entitlement_Id" Type="String" />
    <asp:Parameter Name="Group_ID" Type="String" />
    <asp:Parameter Name="User_Name_ID" Type="Int32" />
    </UpdateParameters>
    <InsertParameters>
    <asp:Parameter Name="User_Name" Type="String" />
    <asp:Parameter Name="Group_ID" Type="String" />
    <asp:Parameter Name="Entitlement_Id" Type="String" />
    <asp:Parameter Direction="Output" Name="newId" Type="Int32" />
    </InsertParameters>
    </asp:SqlDataSource>
    <ext:Store ID="Store1" runat="server" DataSourceID="SqlDataSource1" ShowWarningOnFailure="false"
    OnAfterDirectEvent="Store1_AfterDirectEvent" UseIdConfirmation="true" OnAfterRecordInserted="Store1_AfterRecordInserted"
    OnRefreshData="Store1_RefershData">
    <Reader>

    <ext:JsonReader IDProperty="User_Name_ID">

    <Fields>
    <ext:RecordField Name="User_Name"></ext:RecordField>
    <ext:RecordField Name="Group_ID" />
    <ext:RecordField Name="Entitlement_Id" />
    </Fields>
    </ext:JsonReader>
    </Reader>
    <SortInfo Field="User_Name" Direction="ASC" />
    <Listeners>
    <LoadException Handler="Ext.Msg.alert('USER_INFO - Load failed', e.message || e);" />
    <CommitFailed Handler="Ext.Msg.alert('USER_INFO - Commit failed', 'Reason: ' + msg);" />
    <SaveException Handler="Ext.Msg.alert('USER_INFO - Save failed', e.message || e);" />
    <CommitDone Handler="Ext.Msg.alert('USER_INFO - Commit', 'The data successfully saved');" />
    </Listeners>
    </ext:Store>

    <ext:Panel ID="Panel2" runat="server" Height="300" Header="false" Layout="Fit">
    <Items>
    <ext:GridPanel ID="GridPanel1" runat="server" Title="Account_master" AutoExpandColumn="User_Name" TrackMouseOver="true" StripeRows="true"
    StoreID="Store1" Border="false" Width="600" Height="350" Icon="Lorry" BodyStyle="color:Black;">
    <%--<ResizableConfig Handles="East" />--%>
    <%--<Store>
    <ext:Store ID="Store2" runat="server">
    </ext:Store>
    </Store>--%>
    <ColumnModel ID="ColumnModel1" runat="server">
    <Columns>
    <ext:Column ColumnID="User_Name" DataIndex="User_Name" Header="User_Name" Width="290" Editable="true">
    <Editor>

    <ext:TextField ID="TextField1" runat="server" />
    </Editor>
    </ext:Column>
    <ext:Column DataIndex="Group_ID" Header="Group_ID" Width="300">
    <Editor>
    <ext:TextField ID="TextField2" runat="server" />

    </Editor>
    </ext:Column>
    <ext:Column DataIndex="Entitlement_Id" Header="Entitlement_Id" Width="300">
    <Editor>
    <ext:TextField ID="TextField3" runat="server" />

    </Editor>
    </ext:Column>
    </Columns>
    </ColumnModel> <CustomConfig>
    <ext:ConfigItem Name="plugins" Value="Ext.ux.grid.DataDrop" Mode="Raw" />
    </CustomConfig>
    <Plugins>
    <ext:GridFilters ID="filter" runat="server">
    <Filters>
    <ext:StringFilter DataIndex="User_Name">
    </ext:StringFilter>
    <ext:StringFilter DataIndex="Group_ID">
    </ext:StringFilter>
    <ext:StringFilter DataIndex="Entitlement_Id">
    </ext:StringFilter>
    </Filters>
    </ext:GridFilters>
    </Plugins>
    <SelectionModel>
    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" />
    <%-- <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />--%>

    </SelectionModel>


    </ext:GridPanel>
    </Items>
    <Buttons>
    <ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
    <Listeners>
    <Click Handler="#{GridPanel1}.save();" />
    </Listeners>
    </ext:Button>
    <ext:Button ID="btnDelete" runat="server" Text="Delete selected records" Icon="Delete">
    <Listeners>
    <Click Handler="deleteRows(#{GridPanel1});" />
    </Listeners>
    <DirectEvents>
    <Click OnEvent="btnSave_Click" />
    </DirectEvents>
    </ext:Button>
    <ext:Button ID="btnInsert" runat="server" Text="Insert" Icon="Add">
    <Listeners>
    <Click Handler="#{GridPanel1}.insertRecord(0, {});#{GridPanel1}.getView().focusRow(0);#{GridPane l1}.startEditing(0, 0);" />
    </Listeners>
    </ext:Button>
    <ext:Button ID="btnRefresh" runat="server" Text="Refresh" Icon="ArrowRefresh">
    <Listeners>
    <Click Handler="#{GridPanel1}.reload();" />
    </Listeners>
    </ext:Button>
    <%--<ext:Button ID="sss" runat="server" Icon="Add" Text="Save dragged data">

    <DirectEvents>
    <Click OnEvent="test_Click" >
    <ExtraParams>
    <ext:Parameter Name="data" Value="#{GridPanel1}.getRowsValues()" Mode="Raw" Encode="true" />
    <ext:Parameter Name="format" Value="pdf" Mode="Value" />
    </ExtraParams>
    </Click>
    </DirectEvents>
    </ext:Button>--%>
    </Buttons>
    </ext:Panel>
    <br />
    <asp:Label runat="server" ID="contentlable" align="justify" color="#7D1B7E" Style="font-family: Palatino Linotype, sans-serif;
    font-size: 18px;" ForeColor="Black"></asp:Label>
    <asp:Label runat="server" ID="ThanaThandana" align="justify" color="#7D1B7E" Style="font-family: Palatino Linotype, sans-serif;
    font-size: 18px;" ForeColor="Red">aa</asp:Label>
    </form>
    </body>
    </html>





    Version 2.2 code is below its not working



    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="drag and drop.aspx.cs" Inherits="drag_and_drop" %>


    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Import Namespace="System.Collections.ObjectModel" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Text.RegularExpressions" %>
    <script runat="server">
    private bool cancel;
    private string message;
    private int? insertedValue;

    protected void Store1_BeforeRecordInserted(object sender, BeforeRecordInsertedEventArgs e)
    {
    object region = e.NewValues["Region"];

    if (region == null || region.ToString() != "Alabama (AL)")
    {
    e.Cancel = true;
    this.cancel = true;
    this.message = "The Region must be 'AL'";
    }
    }

    protected void Store1_AfterRecordInserted(object sender, AfterRecordInsertedEventArgs e)
    {
    if (insertedValue.HasValue)
    {
    e.Keys.Add("ID", insertedValue.Value);
    insertedValue = null;
    }
    //if (e.Confirmation.Confirm && !string.IsNullOrEmpty(insertedValue))
    //{
    // e.Confirmation.ConfirmRecord(insertedValue);
    // insertedValue = "";
    //}
    }

    protected void SqlDataSource1_Inserted(object sender, SqlDataSourceStatusEventArgs e)
    {
    //use e.AffectedRows for ensure success action. The store read this value and set predefined Confirm depend on e.AffectedRows
    //The Confirm can be granted or denied in OnRecord....ed event
    if (e.AffectedRows > 0 && e.Command.Parameters["@newId"].Value != null)
    {
    insertedValue = (int)e.Command.Parameters["@newId"].Value;
    }
    else
    {
    insertedValue = null;
    }
    }

    protected void Store1_AfterDirectEvent(object sender, AfterDirectEventArgs e)
    {
    if (e.Response.Success)
    {
    // set to .Success to false if we want to return a failure
    e.Response.Success = !cancel;
    e.Response.Message = message;
    }
    }

    protected void Store1_BeforeDirectEvent(object sender, BeforeDirectEventArgs e)
    {
    string emulError = e.Parameters["EmulateError"];

    if (emulError == "1")
    {
    throw new Exception("Emulating error");
    }
    }

    protected void Store1_RefershData(object sender, StoreReadDataEventArgs e)
    {
    this.Store1.DataBind();
    }
    protected void btnSave_Click(object sender, EventArgs e)
    {
    GridPanel1.Reload();
    }


    protected void Store1_Submit(object sender, StoreSubmitDataEventArgs e)
    {
    string format = this.FormatType.Value.ToString();

    XmlNode xml = e.Xml;

    this.Response.Clear();








    //this.Response.End();
    this.Response.ContentType = "application/vnd.ms-excel";
    this.Response.AddHeader("Content-Disposition", "attachment; filename=Files.xls");
    System.Xml.Xsl.XslCompiledTransform xtExcel = new System.Xml.Xsl.XslCompiledTransform();
    xtExcel.Load(Server.MapPath("Excel.xsl"));
    xtExcel.Transform(xml, null, Response.OutputStream);
    this.Response.End();

    }
    </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 id="Head1" runat="server">
    <title></title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

    <script src="Scripts/jt.js" type="text/javascript"></script>
    <script src="Scripts/Ext.ux.DataDrop.js" type="text/javascript"></script>
    <style type="text/css">
    .x-grid3-td-fullName .x-grid3-cell-inner
    {
    font-family: tahoma, verdana;
    display: block;
    font-weight: normal;
    font-style: normal;
    color: #385F95;
    white-space: normal;
    }
    .x-grid3-row-body p
    {
    margin: 5px 5px 10px 5px !important;
    width: 99%;
    color: Gray;
    }
    </style>
    <script type="text/javascript">
    var deleteRows = function (grid) {
    if (grid.getSelectionModel().getCount() < 1) {
    Ext.Msg.alert('Message', 'Please select records need tobe deleted');

    return false;
    }

    else {
    Ext.Msg.confirm('Delete Rows', 'Are you sure?', function (btn) {
    if (btn == 'yes') {
    grid.deleteSelected();

    grid.save();
    }

    //return focus
    grid.view.focusEl.focus();
    })
    }
    }


    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="CompanyX"/>
    <ext:Hidden ID="FormatType" runat="server" />

    <asp:SqlDataSource
    ID="SqlDataSource1"
    runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString1 %>"

    selectcommand="SELECT ID, [Code],[Description] FROM [Code]"
    InsertCommand="INSERT INTO Code
    (Code,
    Description)




    VALUES
    (@Code,
    @Description);




    SELECT @newId = @@Identity;"
    DeleteCommand="DELETE FROM Code WHERE (ID =@ID)"
    UpdateCommand="UPDATE Code SET Code = @Code, Description = @Description where (ID=@ID)"
    OnInserted="SqlDataSource1_Inserted">
    <DeleteParameters>
    <asp:Parameter Name="ID" Type="Int32" />

    </DeleteParameters>
    <UpdateParameters>
    <asp:Parameter Name="Code" Type="String" />
    <asp:Parameter Name="Description" Type="String" />


    </UpdateParameters>
    <InsertParameters>
    <asp:Parameter Name="Code" Type="String" />
    <asp:Parameter Name="Description" Type="String" />
    <asp:Parameter Direction="Output" Name="newId" Type="Int32" />
    </InsertParameters>




    </asp:SqlDataSource>

    <ext:Store

    ID="Store1"
    runat="server"
    DataSourceID="SqlDataSource1"
    ShowWarningOnFailure="false"
    OnAfterDirectEvent="Store1_AfterDirectEvent"

    UseIdConfirmation="true"
    OnSubmitData="Store1_Submit" RemoteSort="true"
    OnAfterRecordInserted="Store1_AfterRecordInserted"
    OnRefreshData="Store1_RefershData">

    <Model>
    <ext:Model ID="Model1" IDProperty ="ID" runat="server">
    <Fields>
    <ext:ModelField Name="Code" />
    <ext:ModelField Name="Description" />
    <ext:ModelField Name="ID" />
    </Fields>
    </ext:Model>
    </Model>

    <Listeners>

    <Exception Handler="Ext.Msg.alert('Operation failed','The Combination was already existed');" />
    <Write Handler="Ext.Msg.alert('Currency - Commit', 'The data successfully saved');" />
    </Listeners>
    </ext:Store>

    <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
    <Items>


    <ext:Panel ID="Panel2" runat="server" Height="450" Header="false" Layout="Fit">
    <Items>
    <ext:GridPanel
    ID="GridPanel1"
    runat="server"
    Title="Currency"

    StoreID="Store1"
    Border="false"
    Width="1150"
    Height="350"
    BodyStyle="color:Black;">

    <TopBar>
    <ext:Toolbar ID="Toolbar1" runat="server">
    <Items>
    <ext:ToolbarFill ID="ToolbarFill1" runat="server" />


    <ext:Button ID="Button3" runat="server" Text="To Excel" Icon="PageExcel">
    <Listeners>
    <Click Handler="submitValue(#{GridPanel1}, #{FormatType}, 'xls');" />
    </Listeners>
    </ext:Button>


    </Items>
    </ext:Toolbar>
    </TopBar>
    <ColumnModel ID="ColumnModel1" runat="server">




    <Columns>

    <ext:Column ID="Column1" DataIndex="Code" Header="Code" Width="100" runat="server" StyleSpec="font-weight: bold;">
    <Editor>
    <ext:TextField ID="txt1" runat="server"></ext:TextField>
    </Editor>
    </ext:Column>




    <ext:Column ID="Column2"
    ColumnID="Description"
    DataIndex="Description"
    Header="Description" Width="100" runat="server" StyleSpec="font-weight: bold;" >

    <Editor>
    <ext:ComboBox ID="ComboBox2" runat="server"
    DisplayField="Description"
    ValueField="Description"
    EmptyText="Select a Description" TypeAhead="true" Mode="Local" Editable="true" ForceSelection="false" HideTrigger="false" TriggerAction="All">
    <Store>
    <ext:Store ID="Store3" runat="server">
    <Model>
    <ext:Model runat="server" ID="Model3">
    <Fields>
    <ext:ModelField Name="Description" />
    </Fields>
    </ext:Model>
    </Model>
    </ext:Store>
    </Store>
    </ext:ComboBox>
    </Editor>
    </ext:Column>



    <ext:Column ID="Column3" DataIndex="ID" Text="ID" runat="server" width="" Hidden="true" StyleSpec="font-weight: bold;"/>
    </Columns>
    </ColumnModel>


    <Features>
    <ext:GridFilters ID="filter" runat="server" Local="true">
    <Filters>
    <ext:StringFilter DataIndex="Code"></ext:StringFilter>
    <ext:StringFilter DataIndex="Description"></ext:StringFilter>

    </Filters>
    </ext:GridFilters>
    </Features>


    <SelectionModel>
    <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi" >

    </ext:CheckboxSelectionModel>

    </SelectionModel>



    <Plugins>


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


    </ext:CellEditing>

    <ext:GenericPlugin ID="GenericPlugin1" runat="server" InstanceName="Ext.ux.grid.DataDrop" Singleton="true" />



    </Plugins>


    <BottomBar>
    <ext:PagingToolbar ID="PagingToolbar1" runat="server" StyleSpec="color:Black" HideRefresh="true">
    <Items>
    <ext:Label ID="Label2" runat="server" Text="Page size:" StyleSpec="color:Black" />
    <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
    <ext:ComboBox ID="ComboBox4" runat="server" Width="80">
    <Items>
    <ext:ListItem Text="20" />
    <ext:ListItem Text="40" />
    <ext:ListItem Text="60" />
    <ext:ListItem Text="100" />
    <ext:ListItem Text="200" />
    <ext:ListItem Text="500" />
    </Items>
    <SelectedItems>
    <ext:ListItem Text="20" />
    </SelectedItems>



    <Listeners>
    <Select Handler="#{GridPanel1}.store.pageSize = parseInt(this.getValue(), 10); #{GridPanel1}.store.load();" />

    </Listeners>
    </ext:ComboBox>
    </Items>
    <Plugins>
    <ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />

    </Plugins>
    </ext:PagingToolbar>

    </BottomBar>



    </ext:GridPanel> <ext:Label ID="Label1" runat="server" />
    </Items>

    <Buttons>

    <ext:Button ID="btnSave" runat="server" Text="Save" Icon="Disk">
    <Listeners>
    <Click Handler="#{Store1}.sync();" />

    </Listeners>

    </ext:Button>
    <ext:Button ID="btnDelete" runat="server" Text="Delete selected records" Icon="Delete">


    <DirectEvents>
    <Click OnEvent="delete_click"><ExtraParams> <ext:Parameter Name="Values" Value="Ext.encode(#{GridPanel1}.getRowsValues({sel ectedOnly:true}))" Mode="Raw" /></ExtraParams>
    </Click></DirectEvents>


    </ext:Button>
    <ext:Button ID="btnInsert" runat="server" Text="Insert" Icon="Add">
    <Listeners>
    <Click Handler="#{Store1}.insert(0, {});#{GridPanel1}.editingPlugin.startEditByPositio n({row:0, column:0});" />
    <%-- <Click Handler="#{GridPanel1}.insertRecord(0, {});#{GridPanel1}.getView().focusRow(0);#{GridPane l1}.startEditing(0, 0);" />--%>
    </Listeners>
    </ext:Button>
    <ext:Button ID="btnRefresh" runat="server" Text="Refresh" Icon="ArrowRefresh">

    <DirectEvents>
    <Click OnEvent="Datareload" />
    </DirectEvents>
    </ext:Button>

    </Buttons>
    </ext:Panel>

    </Items>
    </ext:Viewport>
    </form>
    </body>
    </html>
  6. #6
    " its not working" means nothing for us. Do you have any errors?
    Also, as I said, is plugin compatible with ExtJS 4.2.0 because plugins for ExtJS 3.x (Ext.Net 1.x) doesn't work in ExtJS 4.2.0 (Ext.Net 2.2.0). Javascript code of plugin must be updated for ExtJS 4.2.0
  7. #7
    Quote Originally Posted by Vladimir View Post
    " its not working" means nothing for us. Do you have any errors?
    Also, as I said, is plugin compatible with ExtJS 4.2.0 because plugins for ExtJS 3.x (Ext.Net 1.x) doesn't work in ExtJS 4.2.0 (Ext.Net 2.2.0). Javascript code of plugin must be updated for ExtJS 4.2.0
    I updated ExtJS.ux.DataDrop js files for latest version and i use this below example but not the drag the data


    <%@ 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 = new object[]
    {
    new object[] { "3m Co", 71.72, 0.02, 0.03, "2010-09-01" },
    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "2010-09-01" },
    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "2010-09-01" },
    };
    }
    }
    </script>

    <!DOCTYPE html>

    <html>
    <head id="Head1" runat="server">
    <title>Ext.NET v2 Example</title>

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

    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 + "%");
    };
    </script>
    </head>
    <body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />

    <ext:GridPanel
    ID="GridPanel1"
    runat="server"
    Title="Array Grid"
    Width="600"
    Height="350">
    <Store>
    <ext:Store ID="Store1" runat="server">
    <Model>
    <ext:Model ID="Model1" runat="server">
    <Fields>
    <ext:ModelField Name="company" Type="String" />
    <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="yyyy-MM-dd" />
    </Fields>
    </ext:Model>
    </Model>
    </ext:Store>
    </Store>
    <ColumnModel ID="ColumnModel1" runat="server">
    <Columns>
    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
    <Renderer Format="UsMoney" />
    </ext:Column>
    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
    <Renderer Fn="change" />
    </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" />
    </Columns>
    </ColumnModel>
    <SelectionModel
    <Plugins>
    <ext:GenericPlugin ID="GenericPlugin1"
    runat="server"
    InstanceName="Ext.ux.grid.DataDrop"
    Singleton="true"
    Path="Scripts/MouseEventForwarding.js,Scripts/DataDrop.js"
    />
    </Plugins>
    </ext:GridPanel>
    </form>
    </body>
    </html>
  8. #8
    Please post ux code (DataDrop.js) here
  9. #9
    Quote Originally Posted by Vladimir View Post
    Please post ux code (DataDrop.js) here

    Find the DataDrop.js file code show in below



    Ext.ns('Ext.ux.grid');
    /**
    * @author Shea Frederick - http://www.vinylfox.com
    * @class Ext.ux.grid.DataDrop
    * @extends Ext.AbstractPlugin
    *
    * <p>A plugin that allows data to be dragged into a grid from spreadsheet applications (tabular data).</p>
    * <p>Requires the Override.js file which adds mouse event forwarding capability to ExtJS</p>
    * <p>Sample Usage</p>
    * <pre><code>
    {
    xtype: 'grid',
    ...,
    plugins: [{ptype:'datadrop'}],
    ...
    }
    * </code></pre>
    *
    * @alias plugin.datadrop
    * @ptype datadrop
    */
    Ext.define('Ext.ux.grid.DataDrop', {
    extend: 'Ext.util.Observable',
    alias: 'plugin.datadrop',
    lineEndRE: /\r\n|\r|\n/,
    sepRe: /\s*\t\s*/,
    /**
    * @cfg addBulk {boolean} set true to add all records at once, isntead of individually.
    */
    addBulk: false,
    /**
    * @cfg highlightNewRows {boolean} set true to highlight rows upon insertion.
    */
    highlightNewRows: false,

    init: function (cmp) {
    this.cmp = cmp;
    this.view = this.cmp.view;
    this.store = this.cmp.store;
    this.cmp.addEvents({
    /**
    * @event beforedatadrop
    * Fires when data is dropped into the grid but has not yet been processed into records. Can return
    * false to cancel processing.
    * @param {Ext.ux.grid.DataDrop} this
    * @param {String} nv the raw data that has been dropped onto the grid.
    */
    'beforedatadrop': true,
    /**
    * @event datadrop
    * Fires when the data has been processed and turned into rows but before they have been turned into
    * records and inserted into the store. Can return false to cancel insertion into the store. This
    * event is only fired if the data dropped was successfully turned into rows and columns.
    * @param {Ext.ux.grid.DataDrop} this
    * @param {Array} rows the rows of data as an array of objects (not Records yet).
    */
    'datadrop': true,
    /**
    * @event afterdatadrop
    * Fires after the data has been processed and inserted into the store.
    * @param {Ext.ux.grid.DataDrop} this
    * @param {Array} recs an array of the records of data that were inserted into the store.
    */
    'afterdatadrop': true
    });
    this.changeValueTask = {
    run: this.dataDropped,
    interval: 100,
    scope: this
    };
    this.view.on('viewready', this.onViewRender, this, { defer: 200 });
    },

    onViewRender: function () {
    var v = this.view;
    if (v.el) {
    this.id = Ext.id();
    this.textEl = this.createTextEl(v);
    this.textEl.setOpacity(0.001);
    this.textEl.suspendEvents = false;
    this.textEl.forwardMouseEvents();
    this.textEl.on({
    mouseover: function () {
    Ext.TaskManager.start(this.changeValueTask);
    },
    mouseout: function () {
    Ext.TaskManager.stop(this.changeValueTask);
    },
    scroll: function (ev) {
    this.view.el.scrollTo('top', ev.target.scrollTop, false);
    },
    scope: this
    });

    this.view.el.on('scroll', function (ev) {
    this.textEl.scrollTo('top', ev.target.scrollTop, false);
    }, this);

    this.resizeDropArea();

    Ext.getBody().on('paste', function () {
    this.dataDropped();
    }, this);
    }
    },

    // create the text element that is used to capture items dragged in from excel.
    createTextEl: function (v) {
    var textEl = Ext.DomHelper.insertAfter(v.el, {
    tag: 'textarea',
    id: this.id + '-textel',
    html: this.getTextFiller(),
    style: {
    'font-size': '17px',
    border: '0px none',
    overflow: 'scroll',
    //color: '#fff',
    position: 'absolute',
    top: '0px',
    left: '0px',
    //'background-color': '#fff',
    margin: 0,
    cursor: 'default'
    }
    }, true);
    textEl.focus(100);
    return textEl;
    },

    // returns enough pipes to fill up the text area so the scroll event will fire within it and we can transfer that event to the grid scroll.
    getTextFiller: function () {
    var filler = '', fillLen = this.store.getCount(), i = 0;
    for (; i < fillLen; i++) {
    filler = filler + '|\n';
    }
    return filler;
    },

    // on GridPanel resize, keep text el height correct to cover grid view area.
    resizeDropArea: function () {
    if (this.textEl) {
    var v = this.view,
    sc = v.el,
    scs = sc.getSize(),
    s = {
    width: scs.width - 18,
    height: scs.height
    };
    this.textEl.setSize(s);
    }
    },

    // on change of data in textarea, create a Record from the tab-delimited contents.
    dataDropped: function () {
    var nv = this.textEl.getValue().replace(/\|\n/g, '');
    this.textEl.show();
    this.textEl.blur();
    if (nv !== '') {
    nv = nv.replace(/\|/g, '');
    if (this.fireEvent('beforedatadrop', this, nv)) {
    var store = this.store, Record = store.model;
    this.textEl.dom.value = '';
    this.textEl.update('');
    var rows = nv.split(this.lineEndRE), columns = this.view.getGridColumns(), fields = Record.prototype.fields, recs = [], cols = [];
    Ext.each(columns, function (col) {
    if (!col.hidden) {
    cols.push(col);
    }
    });
    if (cols.length && rows.length && this.fireEvent('datadrop', this, rows) !== false) {
    for (var i = 0; i < rows.length; i++) {
    var vals = rows[i].split(this.sepRe), data = {};
    if (vals.length == 1) {
    vals
    } else {
    if (vals.join('').replace(' ', '') !== '') {
    for (var k = 0; k < vals.length; k++) {
    var fldName = cols[k].dataIndex;
    var fld = fields.map[fldName];
    data[fldName] = fld ? fld.convert(vals[k]) : vals[k];
    }
    var newRec = new Record(data);
    recs.push(newRec);
    if (!this.addBulk) {
    store.add(newRec);
    if (this.highlightNewRows) {
    var idx = store.indexOf(newRec);
    this.view.focusRow(idx);
    Ext.get(this.view.getNode(idx)).highlight();
    }
    }
    }
    }
    }
    if (this.addBulk && recs && recs.length) {
    store.add(recs);
    if (this.highlightNewRows) {
    for (var i = 0; i < recs.length; i++) {
    var idx = store.indexOf(recs[i]);
    this.view.focusRow(idx);
    Ext.get(this.view.getNode(idx)).highlight();
    }
    }
    }
    this.fireEvent('afterdatadrop', this, recs);
    this.resizeDropArea();
    }
    this.textEl.update(this.getTextFiller());
    } else {
    this.textEl.dom.value = '';
    }
    }
    }
    });
  10. #10
    Your version of plugin is not Singleton, try to remove Singleton="true"
Page 1 of 2 12 LastLast

Similar Threads

  1. Export grid panel data to excel
    By sumesh in forum 1.x Help
    Replies: 1
    Last Post: Sep 23, 2013, 9:07 AM
  2. Replies: 0
    Last Post: Apr 02, 2013, 5:25 AM
  3. Replies: 0
    Last Post: Jan 08, 2013, 5:18 AM
  4. Replies: 1
    Last Post: May 28, 2012, 5:17 AM
  5. Export grid panel data to excel
    By sumesh in forum 1.x Help
    Replies: 0
    Last Post: May 19, 2012, 6:01 AM

Posting Permissions