[Data Grid] SendDirtyRowsButton - How to Re-enable it after save?

Hi,


The data grid is a very useful component for bulk edit. However, somehow, in the sample app, in "demo" page, the button "Send Changed" will be automatically disabled after the first click to save changes. The action is "SendDirtyRowsButton", refer to doc: /DataGridSample/GridComponents.aspx


It is not user friendly and caused confusion for the end users. My question is how to re-enabled it after the click (to save changes). I want the workflow is: edit multiple records --> save changes --> edit more records --> save changes --> repeat a few times.

Any suggestion?


Regards,

George Qiao

Looks like the sample app on forge hosted app is fine. But deployed to my personal and PaaS development environment are not working. The send removed button and send changes button behave TBW same,  once clicked,  it is disabled and wont activated any more 

Hi George,


i just tested this on my personal environment, and have same observations as you.  

I had a look at the javascript in my personal environment and compared with the javascript on the hosted example, and there are differences, so I'm assuming that this is a known problem and they are working on it.


in my personal environment, near end of succesfull send of changed :

            _thisButton.style.cssText = "pointer-events: none";             _thisButton.classList.add('wj-disabled');


at same location in the script of the hosted example :

            _thisButton.style.cssText = "";


so I think it's a matter of patience, for the next release of the datagrid :-)

Dorine


Oh, btw George,

I notice you posted this in the 'development questions and troubleshooting' forum.  this post fits better in the 'forge discussions' forum, and might get more attention of the component's developers if you post it there.

Dorine Boudry wrote:

Hi George,


i just tested this on my personal environment, and have same observations as you.  

I had a look at the javascript in my personal environment and compared with the javascript on the hosted example, and there are differences, so I'm assuming that this is a known problem and they are working on it.


in my personal environment, near end of succesfull send of changed :

            _thisButton.style.cssText = "pointer-events: none";             _thisButton.classList.add('wj-disabled');


at same location in the script of the hosted example :

            _thisButton.style.cssText = "";


so I think it's a matter of patience, for the next release of the datagrid :-)

Dorine



Thanks for checking this issue. I really need it functioning in one my of my urgent project. I hope this can be fixed as soon as possible. Do you think roll back to earlier version of the data grid might work?

Hi George,

I don't know about earlier versions, you'd have to ask the development team of the Data Grid component.

I have created a little work-around, see attached oml, where I create an alternative button, and after the onclick, which does same as original, I execute some extra javascript to make button enabled again.  This might be good enough for demo or beta version of your app, I wouldn't go with this for production, this is just quick fix, not tested through.

Dorine

Thans very much. It seems working for me.


How do I get the value "wt44_OutSystemsUIWeb_wt13_block_wtContent_wtMainContent_DataGridComponent_wtGrid_block"

"
GridOS.dirtyItemsFeature.sendJsonDirtyElements(
    this, 
    '/DataGridExample/rest/Orders/SaveOrders',
    'POST',
    false,
    'wt44_OutSystemsUIWeb_wt13_block_wtContent_wtMainContent_DataGridComponent_wtGrid_block',
    'SampleGridFunctions.confirmMessage(""Are you sure?"")',
    '',
    true,
    true); 
" 


Regards,

George

Hi Dorine Boudry,

In fact, I tried to construct a onclick event js to pass current username into the savelist api so that I can capture who is updating the records. However, i get the bellow error. still trying...




SyntaxEditor Code Snippet

"
GridOS.dirtyItemsFeature.sendJsonDirtyElements(
    this, 
    '" + "/DQaaS/rest/STIBO_Products/SaveList"+"?username="+GetUser(GetUserId()).User.Username +"',
    'POST',
    false,
    'wt44_OutSystemsUIWeb_wt13_block_wtContent_wtMainContent_DataGridComponent_wtGrid_block',
    'SampleGridFunctions.confirmMessage(""Are you sure?"")',
    '',
    true,
    true); 
" 

Hi George,


sorry, oversight on my part, the onclick of your alternative button should be

so use   '" + Grid.Id  + "' instead of hardcoded id


"
GridOS.dirtyItemsFeature.sendJsonDirtyElements(
    this, 
    '/DataGridExample/rest/Orders/SaveOrders',
    'POST',
    false,
    '"+ Grid.Id +"',
    'SampleGridFunctions.confirmMessage(""Are you sure?"")',
    '',
    true,
    true); 
" 

George Qiao wrote:

Hi Dorine Boudry,

In fact, I tried to construct a onclick event js to pass current username into the savelist api so that I can capture who is updating the records. However, i get the bellow error. still trying...



That's a warning, not an error, it has to do with protecting your website from code injection, don't know about that, but there's plenty of information about this on forum, I think.  

You could proceed with this warning being there.


As far as what you are trying to do, it doesn't look right to me, it's a POST, not a GET, so i don't think you can just append the username like that.  you'd have to look at your SaveList api, and add the username as one of the inputs into it, or something like that, I think


Hi Dorine,

Thanks for the help. Unfortunately, the JavaScript trick can only work for small changes. If I make changes for many rows, the button is failed to activate. Anyway, for now, I have to use "Submit" instead of "Ajax Submit" to trigger a full page refresh to re-enable the button. 


For the onclick javascript event, I use the below and work fine:

"
GridOS.dirtyItemsFeature.sendJsonDirtyElements(
    this, 
    '" + GetOwnerURLPath()+"/rest/STIBO_Products/SaveList"+"?username="+EncodeJavaScript(GetUser(GetUserId()).User.Username) +"',
    'POST',
    false,
    '" + Grid.Id + "',
    'SampleGridFunctions.confirmMessage(""Are you sure?"")',
    '',
    true,
    true); 

this.classList.remove('wj-disabled');
this.style.cssText = '';
" 



Hope the fix will be released as soon as possible.


Regards,

George


George Qiao wrote:

Hi Dorine,

Thanks for the help. Unfortunately, the JavaScript trick can only work for small changes. If I make changes for many rows, the button is failed to activate. Anyway, for now, I have to use "Submit" instead of "Ajax Submit" to trigger a full page refresh to re-enable the button. 


For the onclick javascript event, I use the below and work fine:

"
GridOS.dirtyItemsFeature.sendJsonDirtyElements(
    this, 
    '" + GetOwnerURLPath()+"/rest/STIBO_Products/SaveList"+"?username="+EncodeJavaScript(GetUser(GetUserId()).User.Username) +"',
    'POST',
    false,
    '" + Grid.Id + "',
    'SampleGridFunctions.confirmMessage(""Are you sure?"")',
    '',
    true,
    true); 

this.classList.remove('wj-disabled');
this.style.cssText = '';
" 



Hope the fix will be released as soon as possible.


Regards,

George


Hi George and Dorne,

I am stuck at almost same place. When i use the button as submit then I am able to keep the button as enabled but with Ajax submit it gets disabled.

My issue is , I have to do the onclick of the button at every 20 seconds to save the grid data. When i use submit, the full page gets refreshed and while reloading it appears that grid is moved a bit which doesn't looks good.(data gets saved though)

Dorne was able to achieve the Ajax submit using some extra java script. Could you please point me in some correct direction.

Hi Tanuj,

see previously attached oml, the button with name 'AlternativeButton' on the screen with name 'Grid'.


button is ajax submit has an onclick extended property with this javascript code to execute the SaveOrders from the api :


"
GridOS.dirtyItemsFeature.sendJsonDirtyElements(
    this, 
    '/DataGridExample/rest/Orders/SaveOrders',
    'POST',
    false,
    'wt44_OutSystemsUIWeb_wt13_block_wtContent_wtMainContent_DataGridComponent_wtGrid_block',
    'SampleGridFunctions.confirmMessage(""Are you sure?"")',
    '',
    true,
    true); 
" 

and executes an action with the name 'AlternativeSendChanges' with a RunJavascript node with following :

"
document.getElementById('" + AlternativeButton.Id + "').classList.remove('wj-disabled');
document.getElementById('" + AlternativeButton.Id + "').style.cssText = '';
"

This works for me, even when updating multiple rows, but beware that this is only a temporary work-around, as long as there is a bug in workings of the webblock 'SendSelectedRowsButton'

Good luck,

Dorine

Hi Dorine

Thank you for the reply. I was able to achieve the above explained thing by using the JavaScript.

My actual requirement was I had to save the grid data in every 15 seconds so with the alternative button logic I was able to execute the script which saves the data after specific time interval.

My current issues is by every save I get the default popup of 'Data saved successfully' which I want to stop. Is there anyway I can override the savedirtyrows logic to stop this successful message popup to come .


Tanuj


Hi Tunaj,


other than cloning the data grid component, I don't think so.  But I haven't really used Data Grid yet, maybe there's some sort of auto save functionality available?  Anybody ?

I wouldn't go down the road of cloning, maybe put in a request with the developers of the component to have autosave functionality, or alternatively to have a setting on the grid where you can choose not to show succes feedback, only errors.

Good luck,

Dorine