[CLOSED] designing grid panel with custom locked functionality and overriding the row expander

  1. #1

    [CLOSED] designing grid panel with custom locked functionality and overriding the row expander

    Hi Team,

    I am trying to achieve a grid panel with locked columns and need to call the row expander plugin using the grid button.

    First of all I have number of columns in my grid panel.I need to have two columns to be locked and positioned at both end of the grid panel.One of the columns is action column which should be on the right hand side of the grid and another one situated on the left hand side. I also need to have the functionality which allows me to show fixed number of columns in between the locked columns.Then i need some functionality to scroll the columns horizontally.
    I also have grid button which on clicked expands the row which allows me to edit the contains of the column as in row expander column.
    Thank You
    Last edited by Daniil; May 07, 2013 at 3:49 AM. Reason: [CLOSED]
  2. #2
    Hi Pawan,

    A bad news that a locking GridPanel doesn't support separating of locked columns. They have to go together.

    You can place two GridPanels one by one.

    The first one will contain the first locked column and all the rest unlocked ones.

    The second one will contain an action column.

    Sure, it will require extra work to get in sync vertical scrolling of both the GridPanels.

    Regarding a RowExpander.

    To expand a row, please use:
    grid.getRowExpander().expandRow(rowIndex); // or a record itself
    To collapse a row, please use:
    grid.getRowExpander().collapseRow(rowIndex); // or a record itself
  3. #3
    hi Daniil,

    i tried using the row expander with my grid button but it says "undefined".

    Is this the method of row expander plugin or the method of the grid panel itself

    Would you please explain in detail about using the row expander.
    thank you
  4. #4
    Quote Originally Posted by pawangyanwali View Post
    Is this the method of row expander plugin or the method of the grid panel itself
    Do you mean the expandRow/collapseRow methods?

    Well, according to my code snippets these methods are a RowExpander's ones.

    Please provide a test case to reproduce a JavaScript error.
  5. #5
    Quote Originally Posted by Daniil View Post
    Do you mean the expandRow/collapseRow methods?

    Well, according to my code snippets these methods are a RowExpander's ones.

    Please provide a test case to reproduce a JavaScript error.
    .cshtml

    @using System.Diagnostics
    @using Core.Framework.Common.Enumerations
    @using Core.Framework.Model.DesktopModel.SearchModel
    
    @{
         var model = Model as ModelSearchCorePermission;
         bool canSave;
         bool canAdd;
         bool canDelete;
        bool canEdit;
        bool.TryParse(model.CanExecute, out canSave);
        bool.TryParse(model.CanAdd, out canAdd);
        bool.TryParse(model.CanDelete, out canDelete);
        bool.TryParse(model.CanEdit, out canEdit);
    }
    @(    Html.X().Panel()
              .Layout(LayoutType.Fit)
              .AutoDoLayout(true)
              .Items(
                  (Html.X().Panel()
    
                       .Layout(LayoutType.Fit)
    
                       .Items(item => item.Add(
    
    
                           Html.X().GridPanel().ID("gridResult")
                           
                           .TopBar(Html.X().Toolbar()
    
                           .Items(tbItem =>
                                      {
    
    
                                          tbItem.Add(Html.X().Button().Icon(Icon.Disk).Disabled(!canSave).DirectEvents(de =>
                                                                                                        {
                                                                                                            de.Click.Url = Url.Action("SaveAcRatingScale", "AcRatingScale");
                                                                                                            de.Click.ExtraParams.Add(new Parameter("data", "#{ratingScaleStore}.getChangedData({skipIdForNewRecords : false})", ParameterMode.Raw, true));
                                                                                                            de.Click.Success = "SaveDataSuccess(response,result,this,type,action,#{ratingScaleStore});";
    
                                                                                                        }).Text((Compensation.UI.Controllers.Base.BaseController.GetLabelText("LBL_SYC_BUTTON_TEXT"))));
    
                                          tbItem.Add(Html.X().Button().Icon(Icon.Add).Disabled(!canAdd).DirectEvents(de =>
                                                                                                       {
                                                                                                           de.Click.Url = Url.Action("AcRatingScaleResult", "AcRatingScale");
                                                                                                           de.Click.ExtraParams.Add(new Parameter("containerId", "ctlSearchViewPort", ParameterMode.Value));
    
                                                                                                       }).Text(Compensation.UI.Controllers.Base.BaseController.GetLabelText(Core.Framework.Common.Constants.ResourceLabelConstants.LBL_ADD_NEW_RECORD_TEXT)));
    
    
    
                                      })
                           )
    
                .Border(false)
                .Store(Html.X().Store()
                .PageSize(new Compensation.UI.Controllers.Base.GlobalSettingsController().GetPageData(Core.Framework.Common.Constants.GlobalSettingsConstantKeys.RESULT_PER_PAGE))
                .ID("ratingScaleStore")
                    .AutoLoad(false)
                     .Proxy(Html.X().AjaxProxy()
    
                            .Url(Url.Action("SearchResult", "Search"))
                            .ExtraParams(p => p.Add(new Parameter("searchType", SearchType.RatingScale.ToString())))
                             .ExtraParams(p => p.Add(new Parameter("controlType", ControlType.Grid.ToString())))
                            .Reader(Html.X().JsonReader().Root("data"))
    
                        )
                    .RemoteSort(true)
                    
                    .RemotePaging(true)
                    .Model(Html.X().Model().IDProperty("id").Name("AcRatingScale")
                        .Fields(
                            new ModelField("RatingScaleId", ModelFieldType.String),
                            new ModelField("Title", ModelFieldType.String),
                            new ModelField("Description", ModelFieldType.String),
                            new ModelField("DomainId", ModelFieldType.String),
                            new ModelField("LastUpdateDateTime", ModelFieldType.Date, "MM/dd/yyyy"),
                            new ModelField("LastUpdateUser", ModelFieldType.String)
                        )
                    )
                )
                .ColumnModel(
                            Html.X().Column().Text("Rating Scale Id").DataIndex("RatingScaleId").Draggable(false).Width(200),
    
                              Html.X().Column().Text("Title").DataIndex("Title").Draggable(false),
                                Html.X().Column().Text("Description").DataIndex("Description").Draggable(false),
                           ///row command for rating Points
                               Html.X().CommandColumn().Text("RatingPoints").Draggable(false)
                               .Commands(
                                            Html.X().GridCommand().CommandName("Search").Icon(Icon.SportFootball).ToolTip(tt => tt.Text = "Search Rating Points"),
                                            Html.X().GridCommand().CommandName("edit").Icon(Icon.BasketEdit).ToolTip(tt => tt.Text = "Edit Rating Scale")
    
    
                                        )
                                      .Listeners(l => l.Command.Handler = "Ext.Msg.alert(command, record.data.RatingScaleId)"),
    
                              Html.X().Column().Text("DomainID").DataIndex("DomainId").Draggable(false),
                                Html.X().Column().Text("Last Update User").DataIndex("LastUpdateUser").Draggable(false),
                              Html.X().Column().Text("Last Update Time").DataIndex("LastUpdateDateTime").Draggable(false),
    
    
    
    
                            Html.X().CommandColumn().SetDocked(Dock.Left).Text("Action").Draggable(true).Region(Region.West).Commands(
                                                                                  Html.X().GridCommand()
                                                                                   .CommandName("Edit")
                                                                                   
                                                                                   .Icon(Icon.BugEdit)
                                                                                   .StandOut(true)
                                                                                 
                                                                                   ///When clicked the row needs to expand
                                                                                   .ToolTip(tt => tt.Text = "Edit Rating Scale"),
                                                                                 //  Html.X().CommandSeparator(),
                                                                                Html.X().GridCommand()
                                                                                   .CommandName("Delete")
                                                                                    .StandOut(true)
                                                                                   .Icon(Icon.Delete)
                                                                                   .ToolTip(tt => tt.Text = "Delete Rating Scale"),
                                                                                   
                                                                                  //      Html.X().CommandSeparator(),
                                                                                   Html.X().GridCommand().CommandName("reject").Icon(Icon.ArrowUndo)
    
                                                                              )
                                                                              .Listeners(ls=>ls.Command.Handler="OnGridCommandClick(command,record,#{gridResult});")
                                                                                  
    
                                                                               .PrepareToolbar("toolbar.items.get(2).setVisible(record.dirty);")
                                                                               
                              
                                  
                                                                            
                                   )
    
    
    
                                   
    
    
    
    
                .View(Html.X().GridView().StripeRows(true).TrackOver(true))
    
                .BottomBar(
                    Html.X().PagingToolbar()
                        .DisplayInfo(true)
                        .DisplayMsg(Compensation.UI.Controllers.Base.BaseController.GetLabelText(Core.Framework.Common.Constants.ResourceLabelConstants.LBL_PAGING_MESSAGE_TEXT))
                        .EmptyMsg(Compensation.UI.Controllers.Base.BaseController.GetLabelText(Core.Framework.Common.Constants.ResourceLabelConstants.LBL_PAGING_EMPTY_MESSAGE_TEXT))
                )
            )
    
                                          ))
                  ))


    The JavaScript


    var OnGridCommandClick = function (command, record,grid) {
        debugger;
        if (command == 'Edit') {
           grid.getRowExpander().expandRow(0);
    
           
        }
        else if(command=='Delete')
        {
            alert("delete");
                 deleteRecord(grid);     
          
    
    
        }
       else if (command == 'reject')
        {
            //alert("reject");
            record.reject();
        }
    }
  6. #6
    Quote Originally Posted by Daniil View Post
    Do you mean the expandRow/collapseRow methods?

    Well, according to my code snippets these methods are a RowExpander's ones.

    Please provide a test case to reproduce a JavaScript error.
    Hi Daniil

    I got it working now.
    Thank you
  7. #7
    I can't see where you define a RowExpander for the GridPanel.

Similar Threads

  1. Designing the grid panel with fixed columns and
    By shunilkarki in forum 2.x Help
    Replies: 1
    Last Post: Apr 28, 2013, 6:34 AM
  2. custom row expander in grid panel
    By shunilkarki in forum 2.x Help
    Replies: 0
    Last Post: Apr 28, 2013, 6:32 AM
  3. Replies: 6
    Last Post: Apr 23, 2013, 2:20 PM
  4. Replies: 18
    Last Post: Mar 13, 2013, 10:40 AM
  5. Replies: 11
    Last Post: May 16, 2012, 6:34 PM

Tags for this Thread

Posting Permissions