PDA

View Full Version : [CLOSED] designing grid panel with custom locked functionality and overriding the row expander



pawangyanwali
Apr 29, 2013, 5:01 AM
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

Daniil
Apr 29, 2013, 9:18 AM
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

pawangyanwali
Apr 29, 2013, 11:14 AM
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

Daniil
Apr 29, 2013, 12:57 PM
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.

pawangyanwali
Apr 30, 2013, 3:53 AM
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).Disab led(!canSave).DirectEvents(de =>
{
de.Click.Url = Url.Action("SaveAcRatingScale", "AcRatingScale");
de.Click.ExtraParams.Add(new Parameter("data", "#{ratingScaleStore}.getChangedData({skipIdForNewRe cords : false})", ParameterMode.Raw, true));
de.Click.Success = "SaveDataSuccess(response,result,this,type,action,# {ratingScaleStore});";

}).Text((Compensation.UI.Controllers.Base.BaseCont roller.GetLabelText("LBL_SYC_BUTTON_TEXT"))));

tbItem.Add(Html.X().Button().Icon(Icon.Add).Disabl ed(!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.BaseContr oller.GetLabelText(Core.Framework.Common.Constants .ResourceLabelConstants.LBL_ADD_NEW_RECORD_TEXT))) ;



})
)

.Border(false)
.Store(Html.X().Store()
.PageSize(new Compensation.UI.Controllers.Base.GlobalSettingsCon troller().GetPageData(Core.Framework.Common.Consta nts.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).TrackOv er(true))

.BottomBar(
Html.X().PagingToolbar()
.DisplayInfo(true)
.DisplayMsg(Compensation.UI.Controllers.Base.BaseC ontroller.GetLabelText(Core.Framework.Common.Const ants.ResourceLabelConstants.LBL_PAGING_MESSAGE_TEX T))
.EmptyMsg(Compensation.UI.Controllers.Base.BaseCon troller.GetLabelText(Core.Framework.Common.Constan ts.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();
}
}

pawangyanwali
Apr 30, 2013, 6:06 AM
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

Daniil
Apr 30, 2013, 6:10 AM
I can't see where you define a RowExpander for the GridPanel.