Add new Row to GridPanel Clear all componentcolmn data and store date

  1. #1

    Add new Row to GridPanel Clear all componentcolmn data and store date

    Hi All,

    I have the below code, when I am trying to insert a new row using Add button, it works well for first row but any new insert it clear all gird !!.
    Please help me, I cannot find any solution for this issue !

    @model IEnumerable<WebApplication1.Models.lib_MainData>
    
    @* @Html.RenderPartial(partial_name,model,data_view) *@
    
    @{
        var pname = "";
    
        switch ((int)ViewData["SourceTypeID"]) { 
            case 1:
                pname = "_MainDataBooks";
                break;
            case 2:
                pname = "_MainDataTheses";
                break;
            case 3:
                pname = "_MainDataConference_Publication";
                break;
            case 4:
                pname = "_MainDataManuscripts";
                break;
            case 5:
                pname = "_MainDataPeriodicals_and_Serials";
                break;
            case 6:
                pname = "_MainDataMaps";
                break;
            case 7:
                pname = "_MainDataImages";
                break;
            case 8:
                pname = "_MainDataMusic_Scores";
                break;
            case 9:
                pname = "_MainDataPatent_Document";
                break;
            case 10:
                pname = "_MainDataSound_Recording";
                break;
            case 11:
                pname = "_MainDataVideo_Recording";
                break;
            case 12:
                pname = "_MainDataMicroforms";
                break;
            case 13:
                pname = "_MainDataSlides_Transparencies";
                break;
            case 14:
                pname = "_MainDataObjects_and_Realia";
                break;
            case 15:
                pname = "_MainDataKits";
                break;
            case 16:
                pname = "_MainDataComputer_Files";
                break;
            case 17:
                pname = "_MainDataAnother";
                break;
            default:
                pname = "_MainDataBooks";
                break;
        }
    }
    
    @(Html.X().Window()
    .ID("MainData")
    .Title("Set Main Data")
    .Width(550)
    .Layout(LayoutType.Form)
    .Icon(Icon.ApplicationAdd)
    .Modal(true)
    
    .Items(
        Html.X().FormPanel()
        .ID("form1")
        .JsonSubmit(true)
        .Url("/Cataloging/SaveMainData")//save route to the same controller and SaveMain action !!
        .Items(
            Html.X().TextField()
            .Disabled(true)
            .EmptyText("Library Name")
            .FieldLabel("Library Name")
            .Text(ViewData["Library"] + "")
            .Name("LibraryName")
            ,
            Html.X().TextField()
            .Disabled(true)
            .EmptyText("Source Type Name")
            .FieldLabel("Source Type")
            .Text(ViewData["TypeNameEn"] + "")
            .Name("Source Type Name")
            ,
            Html.X().TextField()
            .Disabled(true)
            .EmptyText("Date")
            .FieldLabel("Date")
            .Text(ViewData["Date"] + "")
            .Name("Date")
            ,
            Html.X().TextField()
            .Disabled(true)
            .EmptyText("Time")
            .FieldLabel("Time")
            .Text(ViewData["Time"] + "")
            .Name("Time")
            ,
            Html.X().Hidden()
            .Text(ViewData["SourceTypeID"] + "")
            .Name("SourceTypeID")
            ,
            Html.X().FieldSet()
            .Width(515)
            .Title("Main Data")
            .Defaults(d =>
            {
                d.Add(new Parameter("LabelWidth", "115"));
            })
            .ItemsFromPartial(pname, Model, ViewData)//end of set
    
                                ,//grid inside the form, we need to use its values to add it as well.
            Html.X().GridPanel()
                .ID("MainDataDetail")
        .Title("Main Data Detail")
        .Width(515)
        .Height(200)
        .Store(
            Html.X().Store()
            .ID("GridStore")
            .Model(Html.X().Model()
                //.IDProperty("MainDataDetailID")
                .Fields(
                    new ModelField("CatalogingSourceID", ModelFieldType.Int) { Mapping = "CatalogingSourceID" },
                    new ModelField("CatalogingSource", ModelFieldType.String) { Mapping = "CatalogingSource" }
                )
            )
                .Listeners(l => {
                    l.Add.Fn = "function(store, records, index, eOpts){console.log(store);console.log(records);console.log(index);console.log(eOpts);}";
                })
            //.DataSource(ViewData["lib_MainDataDetail"])
            //.DataBind()
        )
        .ColumnModel(
            Html.X().ComponentColumn()
            .Editor(true)
            .DataIndex("CatalogingSourceID")
            .Flex(1)
            .Text("Cataloging Source")
            .Component(Html.X().ComboBox()
                .DisplayField("CatalogingSourceNameEN")
                .ValueField("CatalogingSourceID")
                .Store(Html.X().Store()
                    .Model(Html.X().Model()
                        .IDProperty("CatalogingSourceID")
                        .Fields(
                            new ModelField("CatalogingSourceID", ModelFieldType.String) { Mapping = "CatalogingSourceID" },
                            new ModelField("CatalogingSourceNameEN", ModelFieldType.String) { Mapping = "CatalogingSourceNameEN" }
                        )
                    )
                .DataSource(ViewData["CatalogingSources"])
                .DataBind()
                )
            ),
            Html.X().ComponentColumn()
            .DataIndex("CatalogingSource")
            .Editor(true)
            .Flex(1)
            .Text("Cataloging Source Description")
            .Component(Html.X().TextField())//,
    
       /*     Html.X().ComponentColumn()
            .Width(25)
            .PinAllColumns(false)
            .AutoWidthComponent(false)
            .OverOnly(true)
            .Component(
                Html.X().Button()
                .ToolTip("Pin Editor")
                .Icon(Icon.Pencil)
                .AllowDepress(true)
                .EnableToggle(true)
                .Listeners(l => {
                    l.Toggle.Fn = "function (btn, pressed) {"+            
                    "var columnConfig = btn.column,"+
                    "column = columnConfig.column;"+
    
                "if (pressed) {"+
                    "column.pinOverComponent();"+
                    "column.showComponent(columnConfig.record, true);"+
                "} else {"+
                    "column.unpinOverComponent();"+
                    "column.hideComponent(true);"+
                "}}";
                })
            )*/
    )
        .TopBar(
                        Html.X().Toolbar()
                            .Items(
                                Html.X().Button()
                                    .Text("Add")
                                    .Icon(Icon.Add)
                                    .Handler("App.MainDataDetail.store.add({CatalogingSourceID:1,CatalogingSource:''});")
                            )
    
                            )
    
        .Plugins(
            Html.X().CellEditing().ClicksToEdit(1)
        )
        //.SelectionModel(Html.X().CellSelectionModel())
    
    
        )//end of fieldset items
    
    )
        .Buttons(
                Html.X().Button()
                .ID("SaveMain")
                .FormBind(true)
                .Text("Save")
    
            .Handler(
                    "if(App.form1.form.isValid()) {" +
            //"var fdata = Ext.util.JSON.encode(App.form1.form.getValues(false));"+
                    "var gall=App.MainDataDetail.store.getModifiedRecords();" +
                    "var galldata=[];" +
                    "for(i=0;i<gall.length;i++){galldata[i]=gall[i].data;}" +//modified
            //"var gdata = Ext.util.JSON.encode(galldata);" +
                    "App.form1.form.submit({" +
                    "   params : { gdata : galldata, fdata : App.form1.form.getValues(false) }," +//it cbecome json on they fly !!!!
                      "  waitMsg:'Saving...'" +
                    "});    " +
                "}else{" +
               "     Ext.MessageBox.alert('Errors', 'Please fix the errors noted.');" +
                "}"
            )
    
            //.Handler("App.form1.form.submit({ waitMsg : 'Saving...'});")//save all for and grid, how to applay for grid as well ?
            )
    
    )
  2. #2
    Hello, @mrmalaa! Welcome to the Ext.NET forums!..

    By any chance, does one of these fixes your issue?
    GridPanel button postback loses grid data
    gridpanel lost data after postback

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabricio,

    Many thanks for your fast response and efforts. I think in my case I don't have post back function as in the attached examples the issue was in post back from server. But I am not interacting with server at all, just front end.

    Please can you try to see it in more details. Appreciate your kind support
  4. #4
    @mrmalaa,

    Can you provide a stub for the lib_MainData model you are using, so I can run your code here?
    Last edited by fabricio.murta; Mar 01, 2015 at 6:02 PM. Reason: will make the edit an post
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello Fabricio,

    Thanks for your kind replay, please review the below details:

    //------------------------------------------------------------------------------
    // <auto-generated>
    //     This code was generated from a template.
    //
    //     Manual changes to this file may cause unexpected behavior in your application.
    //     Manual changes to this file will be overwritten if the code is regenerated.
    // </auto-generated>
    //------------------------------------------------------------------------------
    
    namespace WebApplication1.Models
    {
        using System;
        using System.Collections.Generic;
        
        public partial class lib_MainData
        {
            public int MainDataID { get; set; }
            public int TypeID { get; set; }
            public int LibraryID { get; set; }
            public string Serial { get; set; }
            public Nullable<System.DateTime> CreationDate { get; set; }
            public Nullable<System.DateTime> LastUpdateDate { get; set; }
            public string ModifiedByUser { get; set; }
            public Nullable<int> LanguageID { get; set; }
            public string DepositNo { get; set; }
            public Nullable<int> ClassificationTypeID { get; set; }
            public string ISBN { get; set; }
            public Nullable<int> CatalogType { get; set; }
            public Nullable<int> CurrentFrequency { get; set; }
            public Nullable<int> FormerFrequency { get; set; }
            public string SequentialDesignation { get; set; }
            public Nullable<int> GeographicalArea { get; set; }
            public Nullable<int> Relief { get; set; }
            public Nullable<int> Projection { get; set; }
            public Nullable<int> ScaleType { get; set; }
            public Nullable<int> CategoryOfScale { get; set; }
            public string Scale { get; set; }
            public string StatementPresentation { get; set; }
            public string Coordinates { get; set; }
            public string Zone { get; set; }
            public string Equinox { get; set; }
            public Nullable<int> MaterialID { get; set; }
            public string PublisherNo { get; set; }
            public Nullable<int> CompositionForm { get; set; }
            public Nullable<System.DateTime> ApplicationDate { get; set; }
            public string PatentNo { get; set; }
            public Nullable<int> DocumentStatus { get; set; }
            public Nullable<int> CountryOfOrigin { get; set; }
            public Nullable<int> TheseID { get; set; }
        }
    }
  6. #6
    You need Lib_MainDataDetail as well, please find below:

    //------------------------------------------------------------------------------
    // <auto-generated>
    //     This code was generated from a template.
    //
    //     Manual changes to this file may cause unexpected behavior in your application.
    //     Manual changes to this file will be overwritten if the code is regenerated.
    // </auto-generated>
    //------------------------------------------------------------------------------
    
    namespace WebApplication1.Models
    {
        using System;
        using System.Collections.Generic;
        
        public partial class lib_MainDataDetail
        {
            public int MainDataDetailID { get; set; }
            public int MainDataID { get; set; }
            public Nullable<int> CatalogingSourceID { get; set; }
            public string CatalogingSource { get; set; }
        }
    }
  7. #7
    While you were providing the model's stub I've been playing around with this example: Marking Records

    While I couldn't trigger your error (of clearing the grid) while adding entries, I could get some odd behavior like items not showing up if I was not scrolled down to the bottom of the grid and used the add() method.

    For that I have two approaches I could do to avoid the issue:
    1) Reconfigure the grid after each add (will maintain scroll position, added item might get lost).
    App.GridPanel1.store.add({});
    App.GridPanel1.reconfigure();
    2) Focus last row and then add the item. Will scroll down and show added entry.
    App.GridPanel1.getView().focusRow(App.GridPanel1.store.count()-1);
    App.GridPanel1.store.add({});
    3) Focus first row and insert the item at the top. Will scroll up and show added entry.
    App.GridPanel1.getView().focusRow(0);
    App.GridPanel1.store.insert(0, {});
    If you allow users to sort your grid by at least one column though, I'd rather go with option (1). The row, may be appended to the end or inserted to the start, if the grid has local sorting enabled, the row will appear on the sorted location. In order to focus it (and scroll to its positioned place), you would have to search the store for its location or model and then focus it by its index on the sorted store.

    I hope these additional bits helps. The code I provided here was tested using the example I pointed above.
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Thanks for your efforts, I have tried your suggestion but no news. I think your example is working because it is not using componentcolumn. Also in my code I have js error while I am trying to edit the combobox/textfield : Uncaught TypeError: Cannot use 'in' operator to search for 'xclass' in true
  9. #9
    Hello, @mrmalaa!

    Your sample is plenty of things that I believe that are irrelevant for the specific problem and I am having hard times trying to make it run here.

    Maybe we do better if we start from a fresh simpler sample?..

    How far is this from your actual case? Can you run this sample on your side without problems?

    Model:
            public class c55531_testData
            {
                public static IEnumerable<object> GetData()
                {
                    return new object[] {
                        new object[] { 1, "Text 1" },
                        new object[] { 2, "Text 2" }
                    };
                }
            }
    Controller:
            public ActionResult c55531_compColCbStore()
            {
                return View(Models.customModel.c55531_testData.GetData());
            }
    View: c53331_compColCbStore.cshtml
    @model System.Collections.IEnumerable
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <script type="text/javascript">
            var cnt = 3;
            var addIt = function () {
                if (cnt > 9) console.log("Combo might/will break!");
                App.Store1.add({ ComboField: cnt, TextField: "Js-side #" + cnt });
                cnt++;
            }
        </script>
    </head>
    <body>
        <div>
        <h1>ComponentColumn as Editor</h1>
            @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)
        @(Html.X().GridPanel()
            .Title("ComponentColumn Editor")
            .Width(600)
            .Height(300)
            .Store(Html.X().Store().ID("Store1")
                .Model(Html.X().Model()
                    .Fields(
                        new ModelField("ComboField", ModelFieldType.Int),
                        new ModelField("TextField", ModelFieldType.String)
                    )
                )
                .DataSource(Model)
            )
            .ColumnModel(
                Html.X().ComponentColumn()
                    .Editor(true)
                    .DataIndex("ComboField")
                    .Flex(1)
                    .Text("ComboBox")
                    .Component(Html.X().ComboBox()
                        /* Commented out: that's something that works -- a fixed comboBox entry list
                         .Items(
                            new ListItem("Item 1", 1),
                            new ListItem("Item 2", 2),
                            new ListItem("Item 3", 3),
                            new ListItem("Item 4", 4),
                            new ListItem("Item 5", 5),
                            new ListItem("Item 6", 6),
                            new ListItem("Item 7", 7),
                            new ListItem("Item 8", 8),
                            new ListItem("Item 9", 9)
                        )*/
                        .Store(Html.X().Store()
                            .Model(Html.X().Model()
                                .IDProperty("ComboField")
                                .Fields(
                                    new ModelField("ComboField", ModelFieldType.Int),
                                    new ModelField("TextField", ModelFieldType.String)
                                )
                            )
                        )
                    ),
    
                Html.X().ComponentColumn()
                    .Editor(true)
                    .DataIndex("TextField")
                    .Flex(1)
                    .Text("Text")
                    .Component(Html.X().TextField())
            )
            .TopBar(
                Html.X().Toolbar().Items(
                    Html.X().Button().Text("Add").Icon(Icon.Add).Handler("addIt()")
                )
            )
        )
    }
        </div>
    </body>
    </html>
    I believe you will have to change something as I couldn't guess how you are exactly feeding the individual store entries for your individual combos.

    No matter what, in this example the 'Add' button is working fine. So I guess the trouble is about how the store of the individual combos is being built.
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Hello AMfabricio,

    Thanks for your effort, I have used Handsontable grid and it provide what exactly I need. As it work like excel as well.

    Thanks again and hope to have your support in further development.

    Regards,
    Mohammad Alaa

Similar Threads

  1. Replies: 2
    Last Post: Oct 15, 2013, 1:45 PM
  2. Replies: 5
    Last Post: May 17, 2011, 9:10 AM
  3. [CLOSED] Clear Filter Data in GridPanel
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 11, 2011, 12:51 PM
  4. Replies: 1
    Last Post: Apr 19, 2010, 2:44 PM
  5. Replies: 0
    Last Post: Jul 07, 2009, 4:34 AM

Tags for this Thread

Posting Permissions