[CLOSED] How to add the records to grid panel dynamically?

  1. #1

    [CLOSED] How to add the records to grid panel dynamically?

    Hi,

    I want to add the records to grid panel dynamically.Any one give me the sample.
  2. #2

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi,

    Client-side:
    GridPanel1.addRecord({dataIndex1:value1, dataIndex2:value2});
    GridPanel1.insertRecord(0, {dataIndex1:value1, dataIndex2:value2});

    Server-side (during AjaxEvent only), GridPanel functions
    public virtual void AddRecord(IDictionary<string, object> values)
    public virtual void InsertRecord(int index, IDictionary<string, object> values)
    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi,

    I want to add the n number of record to grid at runtime.After clicking the button it ll be added to database.
  4. #4

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi,

    I am not sure about your last post. It was the question?
    How to add records at runtime I shown at previous post. How to save grid you can find in Examples Explorer


    Please provide more details what issues do you expirience
    Vladimir Shcheglov
    Sr. Developer
  5. #5

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi Vladsch,

    User should be able to add as many rows (records) as needed in grid (like excel).
    Is it possible... if yes, could you suggest a sample.


  6. #6

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi,

    Please see the following sample, it shows how add/insert rows to the grid (Add/Insert buttons)
    http://examples1.ext.net/#/GridPanel...reCustomLogic/
    Vladimir Shcheglov
    Sr. Developer
  7. #7

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi Vladsch,

    1)How to show empty rows in the grid.

    I am filling the grid with 9 records.I want the 10th row with empty columns.If i added something in the 10th row i need the 11th row with empty columns and so on... If grid contains no records i need the 1st row with empty columns

    I saw the sample .I want the same functionality of add button click when i click on the empty row of the grids.
  8. #8

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi,

    Just use AfterEdit event, check that row is last and new record


    <AfterEdit Handler="if(e.row == (e.grid.store.getCount()-1)){var o = e.grid.addRecordEx();o.record.firstEdit=false;}" />


    To add last empty record use Load event of store (it will add empty row when new data is binded)
    <Load Handler="var o = grid.addRecordEx();o.record.firstEdit=false;" Delay="100"/>
    Vladimir Shcheglov
    Sr. Developer
  9. #9

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi,

    See my sample I am getting the javascript error after editing the new record.Please tell me where i am doing wrong

    Design page is
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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></title>
    
        <script type="text/javascript">
            function getValues(grid) {
                var records = [],
                 values = [];
                grid.store.each(function(r) {
                    if (r.get('ChangeType') === true) {
                        records.push(r);
                    }
                });
    
                for (i = 0; i < records.length; i++) {
                    var dataR = grid.store.prepareRecord(records[i].data, records[i], {});
    
                    if (!Ext.isEmptyObj(dataR)) {
                        values.push(dataR);
                    }
                }
                return values
            }
        </script>
    
        <script type="text/javascript">
            var getFunctionName = function(value) {
                if (value != "")
                    return storFunction.getById(value).data.FunctionTitle;
                else
                    return "";
            };
            
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="scm" runat="server">
        </ext:ScriptManager>
        <ext:Store ID="storFunction" runat="server">
            <Reader>
                <ext:JsonReader ReaderID="FunctionId">
                    <Fields>
                        <ext:RecordField Name="FunctionId" Type="Int" />
                        <ext:RecordField Name="FunctionTitle" Type="String" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
            <Listeners>
                <Load Handler="var o = gpEmp.addRecordEx();o.record.firstEdit=false;" Delay="100" />
            </Listeners>
        </ext:Store>
        <ext:Store ID="storEmp" runat="server">
            <Reader>
                <ext:JsonReader ReaderID="EmployeeID">
                    <Fields>
                        <ext:RecordField Name="ID" Type="Int" />
                        <ext:RecordField Name="Time" Type="string" />
                        <ext:RecordField Name="ChangeType" Type="Int" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:ViewPort runat="server" ID="parentPanel">
            <Body>
                <ext:BorderLayout ID="BL" runat="Server">
                    <Center>
                        <ext:Panel ID="pnl" runat="Server" Border="false">
                            <Body>
                                <ext:GridPanel runat="server" ID="gpEmp" AutoHeight="False" StoreID="storEmp" Floating="true"
                                    Border="true" BodyBorder="true" Header="true" Height="400">
                                    <ColumnModel ID="ColumnModel1" runat="server">
                                        <Columns>
                                            <ext:Column DataIndex="ID" Header="Id" Width="150">
                                                <Renderer Fn="getFunctionName" />
                                                <Editor>
                                                    <ext:ComboBox ID="cbDepartments" CtCls="cntrlFont" ListClass="cntrlFont" ReadOnly="true"
                                                        runat="server" StoreID="storFunction" DisplayField="FunctionTitle" ValueField="FunctionId"
                                                        Mode="Local" AutoPostBack="False" Select&#111;nfocus="true" ForceSelection="True"
                                                        TriggerAction="All" />
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column DataIndex="Time" Header="Time">
                                                <Editor>
                                                    <ext:TimeField Editable="false" runat="server">
                                                    </ext:TimeField>
                                                </Editor>
                                            </ext:Column>
                                            <ext:CheckColumn DataIndex="ChangeType" Hidden="true" Editable="true" Header="ChangeType"
                                                Width="150">
                                            </ext:CheckColumn>
                                        </Columns>
                                    </ColumnModel>
                                    <Listeners>
                                        <AfterEdit Handler="e.record.set('ChangeType', true);if(e.row == (e.gpEmp.store.getCount()-1)){var o = e.gpEmp.addRecordEx();o.record.firstEdit=false;}" />
                                    </Listeners>
                                    <AjaxEvents>
                                    </AjaxEvents>
                                </ext:GridPanel>
                                <ext:Button ID="btnAdd" runat="server" Text="Add">
                                    <AjaxEvents>
                                        <Click OnEvent="btnAdd_Click">
                                            <EventMask ShowMask="true" MinDelay="500" Msg="Loading..." />
                                            <ExtraParams>
                                                <ext:Parameter Name="rows" Value="Ext.encode(getValues(gpEmp))" Mode="Raw" />
                                            </ExtraParams>
                                        </Click>
                                    </AjaxEvents>
                                </ext:Button>
                                <ext:TimeField ID="TimeField1" Format="H:mm" runat="server">
                                </ext:TimeField>
                            </Body>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Body>
        </ext:ViewPort>
        </form>
    </body>
    </html>
    CodeBehind is
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    using Coolite.Ext.Web;
    using System.Data;
    using System.Xml;
    public partial class SampleGrid : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
    
                FillEmpData();
                FillFunctonStor();
                TimeField1.Value = "12:33";
            }
        }
        private void FillEmpData()
        {
            DataTable dtEmp = new DataTable();
            dtEmp.Columns.Add("ID");
            dtEmp.Columns.Add("Time");
            dtEmp.Columns.Add("ChangeType");
            DataRow dr;
            for (int i = 0; i < 10; i++)
            {
                dr = dtEmp.NewRow();
                dr[0] = i.ToString();
                dr[1] = "EmpName" + i.ToString();
                dr[2] = "0";
                dtEmp.Rows.Add(dr);
            }
            storEmp.DataSource = dtEmp;
            storEmp.DataBind();
        }
        private void FillFunctonStor()
        {
            DataSet dsFunction = new DataSet();
            DataTable dt = new DataTable();
            dt.Columns.Add("FunctionId");
            dt.Columns.Add("FunctionTitle");
            DataRow dr;
            for (int i = 0; i < 10; i++)
            {
                dr = dt.NewRow();
                dr[0] = i.ToString();
                dr[1] = "E" + i.ToString();
                dt.Rows.Add(dr);
            }
            dsFunction.Tables.Add(dt);
            storFunction.DataSource = dsFunction;
            storFunction.DataBind();
        }
        protected void btnAdd_Click(object sender, AjaxEventArgs e)
        {
            //string s = e.ExtraParams["rows"];
            //string TIME = TimeField1.Value.ToString();
    
            DataTable dtEmp = new DataTable();
            dtEmp.Columns.Add("ID");
            dtEmp.Columns.Add("Time");
            dtEmp.Columns.Add("ChangeType");
            DataRow dr;
            string ID = "";
            string Time = "";
            string ChangeType = "";
            //JSON representation
            string gridJson = e.ExtraParams["rows"];
            //XML representation
            XmlNode gridXml = JSON.DeserializeXmlNode("{records:{record:" + gridJson + "}}");
            //array of Dictionaries
            Dictionary<string, string>[] grid1Data = JSON.Deserialize<Dictionary<string, string>[]>(gridJson);
            foreach (IDictionary<string, string> JColumn in grid1Data)
            {
                dr = dtEmp.NewRow();
                dr[0] = JColumn["ID"];
                dr[1]= JColumn["Time"];
                dr[2] = JColumn["ChangeType"];
                dtEmp.Rows.Add(dr);
            }
        }
    }
  10. #10

    RE: [CLOSED] How to add the records to grid panel dynamically?

    Hi,

    You have to use
    e.grid

    instead
    e.gpEmp

    because 'e.grid' is reference on current grid
    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. Replies: 0
    Last Post: Mar 27, 2012, 10:01 AM
  2. Replies: 1
    Last Post: Jan 05, 2012, 2:16 PM
  3. Sorting within Grid panel grouped records
    By ssenthil21 in forum 1.x Help
    Replies: 1
    Last Post: Jul 04, 2011, 7:42 AM
  4. [CLOSED] Trying to dynamically change grid panel columns.
    By GLD in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 29, 2011, 8:41 AM
  5. Add Records dynamically, Save problem
    By zhangsir199 in forum 1.x Help
    Replies: 12
    Last Post: Mar 28, 2011, 8:45 PM

Posting Permissions