serenitytypescript

How To Create A Slider Dialog In Serenity (Part 3)

serenity, serenity-dialog, slider

Problems

I suggest first reading and

Slider dialog that I implemented basically is a panel dialog, for some reasons, Serenity will hide parent panel of your dialog when it opens new panel dialog.

For example, if you open panel dialog when you click on a button on grid, it will hide your grid.

And because it added some classes ( .panel-hidden ) to hide your “previous screen” so it was very hard and complex to handle that behavior on slider.

It will look silly so I don’t want the slider dialog hide your previous screen.

One more problem with old code (part 2) is, when you transform your dialog (generic or panel) by slider dialog (by click on edit-link) and hit F5 to refresh your page, the gridview will be shrinked, it will be reset to full height after you close slider dialog.

With those problems, I decided re-implement slider dialog using generic dialog (jquery dialog) instead panel.

By the way, some people want to add next/previous buttons into dialog to avoid switching from grid to form
So I also add a bit code to handle it, it’s not too neat but at least it works.

Demo


Mp4 link

Code

The code I show bellow will be used to replace old code from part 1 and part 2
so make sure that you revert old code if you added it before.

/Content/site/site.less

1
2
3
4
5
6
7
8
.slider-full-height-width {
    width: calc(~'100% - 10px') !important;
    height: 100% !important;
    display: block !important;
    padding: 10px !important;
    box-shadow: none !important;
    border: none !important;
}

Here I add class .slider-full-height-width and removed .slider-dialog-force-show-target class in previous posts.

Next is the main character:

/Modules/Common/Helpers/MySlilerReveal.ts

How to use

This code will tranform current your dialog by slider dialog, just need to update your editItem method of class Serenity.EntityGrid<>

If you want to enable next/previous buttons I said above, just add 2 more line codes (line 26-27):

Okay, how about to open slider dialog by Id, it is very simple:

Done !

Let me know if you have any problem, contact me here !

Share