Grid edit by default

[Master]

When I open my report I want Grid edit to be the same size as my report and also I want the report to be in Grid edit mode by default. Any ideas?

[MayMusic]

You can try the code below in the header of Configure Result Pages Fields screen:

 

<style>
.cbGridCtnr > .BodyCtnr > .Table{
width: 100%;
}
.cbGridCtnr > .HeadCtnr > .Table {
    width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

function openGridAutomatically(delay)
{
	setTimeout(
		function()
		{
			var gridEditButton = $("[data-cb-name='GridEditButton']")[1];
			if (gridEditButton)
				f_dispatchEvent(gridEditButton, "click");
		}, delay ? delay : 500);
}
function f_dispatchEvent(v_element, v_type){
 if(v_element.dispatchEvent) {
  //var v_e = new Event(v_type);
  var v_e = document.createEvent('MouseEvents');
  v_e.initEvent(v_type, true, true);
  v_element.dispatchEvent(v_e); //new Event(v_type, {"bubbles":true, "cancelable":true})
 } else if(v_element.fireEvent){
  v_element.fireEvent('on' + v_type);
 }
};
openGridAutomatically();
</script>

width: 100%; should be changed to the width you have for your for your report page.

[telepet]

Is there a way to adjust individual column widths when in Grid Edit mode?  Or, better yet, have Grid Edit mode columns automatically adjust to the width of the content?

[MayMusic]

You can try to change the style to:

<style>
.cbGridCtnr > .BodyCtnr > .Table{
width: auto;
}
.cbGridCtnr > .HeadCtnr > .Table {
    width: auto;
}
</style>

 

 

[jasonkaeb]

@MayMusic I have a scenario where I would like my reports page to default to grid edit, similar to what you are describing here. I have tried the code you gave me in the header of my results page but it does not seem to work. Do you know if this Javascript code that you provided here from 2016 should still work as is?

[Alison]

Hi @jasonkaeb,

You should add Header and Footer elements on the Configure Result Pages Fields screen and put the styles into the header and scripts into the footer. Also, you should check Grid Edit option on the "Search and Report Wizard - Results Page Editing Options" screen.

[jasonkaeb]

@Alison Thank you for your quick reply. I was doing that wrong, so thanks for pointing that out. It still does not seem to be working for me. Can you see something I have wrong below? 

I have added the following as a header: 

<style>
.cbGridCtnr > .BodyCtnr > .Table{
width: 100%;
}
.cbGridCtnr > .HeadCtnr > .Table {
    width: 100%;
}
</style>

-------------------------------------

And the following in the footer: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
function openGridAutomatically(delay)
{
    setTimeout(
        function()
        {
            var gridEditButton = $("[data-cb-name='GridEditButton']")[1];
            if (gridEditButton)
                f_dispatchEvent(gridEditButton, "click");
        }, delay ? delay : 500);
}
function f_dispatchEvent(v_element, v_type){
 if(v_element.dispatchEvent) {
  //var v_e = new Event(v_type);
  var v_e = document.createEvent('MouseEvents');
  v_e.initEvent(v_type, true, true);
  v_element.dispatchEvent(v_e); //new Event(v_type, {"bubbles":true, "cancelable":true})
 } else if(v_element.fireEvent){
  v_element.fireEvent('on' + v_type);
 }
};
openGridAutomatically();
</script>

------------------------------

I did notice on my page that the following script is showing in plain text on my page, which means this is not working correctly: 

< script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

[Alison]

@jasonkaeb, have you switched to the Source mode or disable HTML editor on the Advanced tab?

[jasonkaeb]

@Alison Yes, I have done that. 

[Alison]

@jasonkaeb,  there might be something with the encoding in this line <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Please copy the code below and paste it to the footer:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

function openGridAutomatically(delay)
{
	setTimeout(
		function()
		{
			var gridEditButton = $("[data-cb-name='GridEditButton']")[1];
			if (gridEditButton)
				f_dispatchEvent(gridEditButton, "click");
		}, delay ? delay : 500);
}
function f_dispatchEvent(v_element, v_type){
 if(v_element.dispatchEvent) {
  //var v_e = new Event(v_type);
  var v_e = document.createEvent('MouseEvents');
  v_e.initEvent(v_type, true, true);
  v_element.dispatchEvent(v_e); //new Event(v_type, {"bubbles":true, "cancelable":true})
 } else if(v_element.fireEvent){
  v_element.fireEvent('on' + v_type);
 }
};
openGridAutomatically();
</script>

 

[jasonkaeb]

@Alison Thanks for your reply. I did copy the code exactly as you have it and pasted it in the footer. The report opens correctly, but still does not open with the gred edit open. I still have the following code in the header: 

<style>
.cbGridCtnr > .BodyCtnr > .Table{
width: 100%;
}
.cbGridCtnr > .HeadCtnr > .Table {
    width: 100%;
}
</style>

[Alison]

@jasonkaeb It works perfectly on my end. Could you provide me with the link to the page, please?

 

[jasonkaeb]

@Alison Since you said it worked for you I tried a couple more things on my end. I figured out that my issue was that I had Enable sticky header row enabled. Once I disabled this it worked perfectly. Thanks so much for your help! 

[Alison]

@jasonkaeb You are welcome! I was glad to help you.

[MayMusic]

Then my code is not working with freezed header right?

[jasonkaeb]

@MayMusic Yes, that is correct. 

[gsgriffin]

It will work with freezed header with this line changed:

var gridEditButton = $("[data-cb-name='GridEditButton']")[2];

Freezing the headers creates an extra table just for the header.  Just need to select the correct link to execute. ;)

 

[MayMusic]

Thanks that worked for me as well

[Fernanda]

Hi! I tried using the code to pre-load the edit-grid opened ( it works great!). However, I'm still having trouble with styling in grid edit mode. Is there a way to wrap the text in the columns in grid edit? My text is wrapped when I exit the edit mode

[AtayBalunbalunan]

Have you tried this solution, Fernanda?

 

[IamNatoyThatLovesYou]

Hello Everyone,

Just to add to the information, you can also check this solution. 

 

[pmcfarlain]

On 8/15/2016 at 12:08 PM, MayMusic said:

You can try the code below in the header of Configure Result Pages Fields screen:

 

<style>
.cbGridCtnr > .BodyCtnr > .Table{
width: 100%;
}
.cbGridCtnr > .HeadCtnr > .Table {
    width: 100%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>

function openGridAutomatically(delay)
{
	setTimeout(
		function()
		{
			var gridEditButton = $("[data-cb-name='GridEditButton']")[1];
			if (gridEditButton)
				f_dispatchEvent(gridEditButton, "click");
		}, delay ? delay : 500);
}
function f_dispatchEvent(v_element, v_type){
 if(v_element.dispatchEvent) {
  //var v_e = new Event(v_type);
  var v_e = document.createEvent('MouseEvents');
  v_e.initEvent(v_type, true, true);
  v_element.dispatchEvent(v_e); //new Event(v_type, {"bubbles":true, "cancelable":true})
 } else if(v_element.fireEvent){
  v_element.fireEvent('on' + v_type);
 }
};
openGridAutomatically();
</script>

width: 100%; should be changed to the width you have for your for your report page.

When I insert this code, it defaults to grid edit but when I try to exit grid edit it won't let me. How can I fix this?

[TellMeWhy]

1 hour ago, pmcfarlain said:

When I insert this code, it defaults to grid edit but when I try to exit grid edit it won't let me. How can I fix this?

Try this one, this will only run once, when the DataPage is loaded, after that, it will not run anymore unless you refresh

 

<script>

document.addEventListener("DataPageReady", function(e){

var gridEditButton = document.querySelector("a[data-cb-name='GridEditButton']");
   
gridEditButton.click();

});

</script>

This is much simpler method than the one above. That's to force Grid Edit. You don't need the other script for this, just the style, maybe

[pmcfarlain]

On 6/17/2021 at 2:24 PM, TellMeWhy said:

Try this one, this will only run once, when the DataPage is loaded, after that, it will not run anymore unless you refresh

 

<script>

document.addEventListener("DataPageReady", function(e){

var gridEditButton = document.querySelector("a[data-cb-name='GridEditButton']");
   
gridEditButton.click();

});

</script>

This is much simpler method than the one above. That's to force Grid Edit. You don't need the other script for this, just the style, maybe

That works perfectly. Thank you!

[oliverk]

This is a really useful thread.

I have a follow up question. I have used code given, and it switches to the Grid Edit automatically, as expected.

However, the user sees the regular tabular report first, before it switches to grid edit. Is there a way to set it so that they don't see this?

Then is it also possible to stop them switching away from the grid edit view?

Thanks!

Oliver