[CLOSED] performing editing the grid inside row expander plugin

  1. #1

    [CLOSED] performing editing the grid inside row expander plugin

    I have a problem editing and saving the data of grid panel inside the row expander plugin.

    I have used a row expander plugin which reside a form panel and a grid showing various data. I need to save the changes made in the grid panel but i have difficulty passing the changed data to the controller i have created.


    the code for row expander
    Plugins(Html.X().RowExpander()
                                                .ID("ratingRowExpander")
                                                .SingleExpand(false)
                                                .Component(
                                                Html.X().FormPanel()
                    .ID("RatingScaleMainForm")
                    .Icon(Icon.User)
                    .Frame(true)
                    .BodyPadding(10)
                    .Items(
                    Html.X().Container()
                    .Layout(LayoutType.HBox)
                    .MarginSpec("0 0 10")
                    .Items(Html.X().FieldSet().Flex(1).Title("FormPanel").Layout(LayoutType.Anchor).DefaultAnchor("100%")
                    .Items(
                                        Html.X().TextField().Name("Id").FieldLabel("Id").ReadOnly(true),
                                        Html.X().TextField().FieldLabel(Title")).Name("Title"),
                                        
                     Html.X().FieldSet().Title("grid panel").Layout(LayoutType.Fit).Height(300).DefaultAnchor("100%").AutoScroll(true)
                     .Items(
                    
                      Html.X().GridPanel()
                       .ID("gridResult1")
                       .Border(true)
                       .Height(300)
                       .AutoScroll(true)
                       .Store(Html.X().Store()
                       .ID("ratingScaleDefinitionStore")
                       .Proxy(Html.X().AjaxProxy()
                                            .Url(Url.Action("GetGridpanelData, "AcData"))
                                            .Reader(Html.X().JsonReader().Root("data"))
                                            )
                       .Parameters(parameterStore => {
                           parameterStore.Add(Html.X().StoreParameter().Name("Id").Mode(ParameterMode.Value).Value("Ext.getCmp('gridResult').getSelectionModel().getSelection()[0].data.Id"));
                                                        })
                                            
                       .RemoteSort(true)
                       .RemotePaging(true)
                       .Model(Html.X().Model().IDProperty("id").Name("grid")
                       .Fields(
                                new ModelField("name", ModelFieldType.String),
                                new ModelField("Title", ModelFieldType.String),
                             
                            )
                         
                            ))
                            .ColumnModel(
                                   Html.X().CommandColumn().Width(30).Flex(1).Draggable(false).Commands(Html.X().GridCommand().CommandName("deleteRow").Icon(Icon.BulletMinus).StandOut(true)).Listeners(l => l.Command.Handler = "deleteRow();"),
                                   Html.X().Column().Text("Name").DataIndex("name").Flex(2).Editor(Html.X().TextField().AllowBlank(false)),
                                   Html.X().Column().Text("Title").DataIndex("Title").Flex(3).Editor(Html.X().TextField().AllowBlank(false)),
                                   Html.X().Column().Text(Compensation.UI.Controllers.Base.BaseController.GetLabelText("LBL_DESCRIPTION_TEXT")).DataIndex("Description").Flex(4).Editor(Html.X().TextField().AllowBlank(false))
                                 ).Plugins(Html.X().CellEditing())
                                 
                                 
                                 
    
                     )
                                                        )
                                                            .Buttons(
                                                                          Html.X().Button().Text("Save").Icon(Icon.DatabaseSave).Handler(@"var grid = this.up('grid'), form = this.up('form');
                                                                                                                         grid.getRowExpander().collapseRow(grid.store.indexOf(form.record)); form.getForm().updateRecord(form.record);
                                                                  Ext.getCmp('gridResult').getRowExpander().componentsCache[0].cmp.items.items[1].items.items[0].store.save();"),
    
    
    
    
                                                                  Html.X().Button().Text("Cancel").Icon(Icon.Cancel).Handler(@"var grid = this.up('grid'), form = this.up('form');
                                                                                                                     grid.getRowExpander().collapseRow(grid.store.indexOf(form.record));")
                                                                )
                                                        .Listeners(l => { l.AfterRender.Handler = "this.getForm().loadRecord(this.record);"; })


    when the row is expanded proxy is called to build the grid panel

    When i click save it need to save the changes made in the form panel as well as grid panel and the row is collapsed


    This button calls the controller to save data to database
    
    Html.X().Button().Icon(Icon.Disk).Disabled(!canSave).DirectEvents(de =>
                                                                   {
                                                                       de.Click.Url = Url.Action("SaveData", "AcData");
                                                                       de.Click.ExtraParams.Add(new Parameter("data", "#{ratingScaleStore}.getChangedData({skipIdForNewRecords : false})", ParameterMode.Raw, true));
                                                                       de.Click.ExtraParams.Add(new Parameter("data1", "Ext.getCmp('gridResult').getRowExpander().componentsCache[0].cmp.items.items[1].items.items[0].store.getUpdatedRecords()", ParameterMode.Raw, true));
                                                                       de.Click.Success = "SaveDataSuccess(response,result,this,type,action,#{ratingScaleStore});";
                                                                   }).Text("save all data")
                                                                   );



    the controller
    
    
    
     public virtual ActionResult SaveData(string data,string data1)
            {
                try
                {
                  ///no data
    
    //perform task
                    
                    }
    Last edited by Daniil; May 16, 2013 at 3:40 AM. Reason: [CLOSED]
  2. #2
    Hi Pawan,

    i have difficulty passing the changed data to the controller i have created
    Reading the post I have not got what exactly the difficulty you are facing. Please elaborate.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Pawan,



    Reading the post I have not got what exactly the difficulty you are facing. Please elaborate.


    Hi Danill,

    The following code is called when i save the data. It is supposed to pass the updated value to the controller as extra params.

    
    Html.X().Button().Icon(Icon.Disk).Disabled(!canSave).DirectEvents(de =>
                                                                   {
                                                                       de.Click.Url = Url.Action("SaveData", "AcData");
                                                                       de.Click.ExtraParams.Add(new Parameter("data", "#{ratingScaleStore}.getChangedData({skipIdForNewRecords : false})", ParameterMode.Raw, true));
                                                                       de.Click.ExtraParams.Add(new Parameter("data1", "Ext.getCmp('gridResult').getRowExpander().componentsCache[0].cmp.items.items[1].items.items[0].store.getUpdatedRecords()", ParameterMode.Raw, true));
                                                                       de.Click.Success = "SaveDataSuccess(response,result,this,type,action,#{ratingScaleStore});";
                                                                   }).Text("save all data")
                                                                   );
    This code takes the changed data of the form panel and pass it to the controller and it works fine

    
    de.Click.ExtraParams.Add(new Parameter("data",  "#{ratingScaleStore}.getChangedData({skipIdForNewRecords : false})",  ParameterMode.Raw, true));

    This code should take the changed data from grid panel and pass it to the controller but it doesnot
    
    de.Click.ExtraParams.Add(new Parameter("data1",  "Ext.getCmp('gridResult').getRowExpander().componentsCache[0].cmp.items.items[1].items.items[0].store.getUpdatedRecords()",  ParameterMode.Raw, true));

    Now can you explain the procedure to get the changed data of grid panel to perform the activity i need
    Last edited by pawangyanwali; May 10, 2013 at 3:39 AM.
  4. #4
    Please try:
    de.Click.ExtraParams.Add(new Parameter("data1",  "this.up('formpanel').down('gridpanel').getStore().getChangedData()",  ParameterMode.Raw, true));
  5. #5

    'down' did not work

    Unhandled exception at line 6, column 561 in script block

    0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'down': object is null or undefined
  6. #6
    It must be "form" instead of "formpanel". Please try again.
    de.Click.ExtraParams.Add(new Parameter("data1", "this.up('form').down('gridpanel').getStore().getChangedData()",   ParameterMode.Raw, true));
  7. #7

    Same error

    Tried the latest option that you provided but still same error ;

    Unable to get value of the property 'down': object is null or undefined
  8. #8

    Question about Store

    I can get the gridview inside gridview's row expander like this in javascript:
    Ext.getCmp('gridResult').getRowExpander().componentsCache[0].cmp.items.items[1].items.items[0].getStore()
    But this one generates error in 'cmp' when I pass this as a parameter.


    In the above view containing Gridview inside Main Gridview's row expander though I have passed different storeId to each of them, why they are returning the same storeId?

    Ext.getCmp('gridResult').getRowExpander().getCmp('gridResult1').store.storeId
    and
    Ext.getCmp('gridResult').store.storeId
    Last edited by pawangyanwali; May 11, 2013 at 6:41 AM.
  9. #9
    I ran out of ideas and can't suggest anything without a test case. Please provide a runnable test case. We will be happy to investigate.

Similar Threads

  1. [CLOSED] grid panel inside row expander
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: May 08, 2013, 11:47 AM
  2. Replies: 6
    Last Post: Oct 15, 2012, 6:20 AM
  3. Row Expander Plugin with Gridpanels
    By NishaLijo in forum 1.x Help
    Replies: 0
    Last Post: Aug 19, 2010, 12:07 PM
  4. [CLOSED] Double click on grid inside row expander.
    By gokcemutlu in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 14, 2010, 9:45 AM
  5. Replies: 0
    Last Post: Oct 07, 2008, 9:56 AM

Tags for this Thread

Posting Permissions