Add new and edit custom responsive template

[Jordan]

My grid only shows a few columns of my model.   My model is much larger than what I show on the grid.

I wanted to have a toolbar "Add new contact"  on the grid. 

In the grid rows I was going to have an "Edit Contact" button.

Both of these would pop up the same editor template.   The editor template needs to be responsive and not in a small window..   Planning for a UI four column row on deskstop but stacked on mobile.

I cannot seem to find the right example for doing this.

Help please!

Thanks

[Stoyan]

Hi Jordan,

Could you please share the configuration of your Grid and the behavior you observe on your side to allow me to investigate the questions you have?

Ideally reproduce the experienced behavior in the attached sample project as this will accelerate my research and the possible solutions I can propose.

Thank you for your cooperation in advance.

Regards,
Stoyan
Progress Telerik

[Jordan]

Hi Stoyan,

How can we add a responsive class to the window?  I see in your ZIP file you added 90% but how about allowing us to add a class where we can use media queries.  

 .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PopUpEditor").Window(window=>window.Width("90%")))

 

I did find a way to inject a class into the window by 3.sender.element[0[.classList.add('classname') which works for controlling width of the window but the window is no longer centered since we have widened the window and the TOP and LEFT are not adjusted.

 

That is overall what I am trying to figure out the best way.  Some of our pop forms are large and some are small.   We need to control the Width and have everything thing working well.

 

Thanks

 

[Stoyan]

Hi Jordan,

You can center the Window by getting its client-side instance and use its center method.

e.sender.center();

I hope this suggestion is helpful.