How do I make a dialog moveable and constrained like a window control?

[Francis]

I want the dialog control to be moveable and constrained just like the window control so I can see some values hidden behind in a grid.

[Alexander]

Hello Francis,

Thank you for the provided information.

Currently, the Dialog does not expose a draggable feature as its main purpose is to act as a quick confirmation popup that is displayed statically. Having this in mind, the Dialog is a subset of the Window component with the most notable difference being, that the Window can be dragged and resized. Therefore, for your scenario specifically, I would recommend using the Window component instead.

In addition to this, there has been already a feature request logged regarding this topic that was discussed more in detail.

Regards,
Alexander
Progress Telerik

[Francis]

Thanks, Alexander.

I found a post relating to Grid Popup edit and have successfully implemented using the Window. Earlier I had difficulty in implementing with Window and template code but I was able to use Dialog.

During the switch to Grid Popup with Window, my experience had been little confusing with getting the right documentation. I had to go all over the place to find an implementation or explanation of the various configuration, events, and methods.  For instance, I am still not clear or haven't found the differences amongst the use of $(<selector>).data("kendo<COMPONENT>") vs $(<selector>).get<COMPONENT>() vs $(<selector>).kendo<COMPONENT>(). When to use? Are they functionally same? My understanding is as follows (please confirm):

$(<selector>).data("kendo<COMPONENT>") is to retrieve a kendo component already defined as such via the kendo tag helper or via the aspnet fluent methods.

$(<selector>).get<COMPONENT>() is similar to above?

$(<selector>).kendo<COMPONENT>() is to convert a HTML tag into a kendo component or initialization?

There is no easy way to customize the Title and Action button of the Grid's Popup edit. It's content is rendered using the template provided by the developer, but the Title shows "Edit" for both the Create and Edit operation. I had to "hack" to get the classes and the depths to traverse in order to reach the right node to change the value to "Add" in case of Create.  I needed the Actions button rows to be at the top of the body of the popup as well as the default bottom location. I needed to center them as well. I spent one whole day trying to find the right css classes to apply, css classes to select the node etc.

Similarly, with Grid's paging toolbar had to resort to some jquery script to duplicate it to place above grid header location (found snippet in the forum).  Couldn't we have a method within the Pageable to say: TopPagingControls(true), BottomPagingControls(true), and TopAndBottomPagingControls(true)? Or PagingControlLocations("top"|"bottom"|"both")?

 

 

[Alexander]

Hi Francis,

I am sorry to hear that you are experiencing difficulties navigating through our documentation. We are constantly trying to improve the documentation to be as comprehensible as possible, so any further feedback would be greatly appreciated and we will consider your notes and recommendations when working on the documentation's improvement.

In regards to your questions about how a widget's reference:

Indeed, both the .data("kendo<WidgetName>") and the .getKendo<WidgetName> methods work practically the same way when it comes to obtaining a widget's reference. It comes down to syntactical preference between choosing one of the two methods. The .kendo<WidgetName>() method on the other side creates a widget within the desired DOM element.

In regards to your questions about the Grid's Popup editor:

In general, the Telerik UI Grid for ASP.NET Core provides a .Window() configuration option that can be configured within the Editable API configuration which exposes different options when it comes down to configuring the Popup Window of the Grid. For example:

.Editable(editable=>editable
  .Mode(GridEditMode.PopUp)
  .Window(window=>window
      .Title("Title custom") //adds a custom title of the window
      .Height(300) //adds a fixed height of the window
      .Width(500) //adds a fixed width of the window
      .Actions(a=>a.Close()) //adds a close action button to the window
   )
  .TemplateName("CustomPopupEditor")
)

Additionally, the Edit button for the Create and Edit operations are same due to the fact that the same template is used for both the create and edit popup. You can review our Use Different Popup Editors for Create and Update Operations knowledge base article that gives an alternative approach and example on how to achieve this.

Furthermore, for the customization of the CustomPopup template, I may recommend using the common classes provided by Kendo which aim to give more flexibility when customizing the look and feel of our components. More of which you can find in our Components Rendering Overview article

In regards to your last question

The Telerik UI for ASP.NET Core exposes a built-in configuration for the position of the Grid pager. It can be configured through the .Position() configuration option. For example:

.Pageable(pageable=>pageable.Position(GridPagerPosition.Top))

In addition, you can review the Duplicate Pager knowledge base article that demonstrates how the Grid pagers can be configured to be displayed both top and bottom.

With that said, if you have questions that are not primarily related to the main topic of the case, I would encourage you to open a new ticket thread instead.