Reload Gridq

[MBered]

I am trying to reload the grid with new values by clearing out existing values. But not able to get this working. For example: Based on drop-down value i am loading the data in grid. if the value in drop-down changes i want to get the appropriate data and load.

Thanks Mber

[hkalbertl]

Hi MBered,

Can you provide some sample code to demonstrate your problem? I guess appendGrid should work fine in your case by register onChange event on your drop-down with load method.

[MBered]

@hkalbertl Thanks, In On-change event with Load seems to be working.... But how do i load multiple records dynamically into grid?

for (var i = 0; i < SummaryList.length; i++) { $('#tblAppendGrid').appendGrid('load', [ { 'JobCode': SummaryList[i].JobCode,
'Budget': 0 , 'AvailableToWork': jobCodeSummaryList[i].Aval
} ],i); }

[MBered]

How do i highlight the row that i am currently editing. This i need as i have many rows and columns so getting confused which row i am working on ?

Thanks

[hkalbertl]

For your first question about load method, have you try to put your array of data directly? For example:

// The load method accept array of data and it will replace all existing row data
// So, you should not use with for-loop. Just load your data array directly.
$('#tblAppendGrid').appendGrid('load', SummaryList);

For the second question about highlight, you may achieve it by CSS. For example:

/* Highlight the background when mouse over */
#tblAppendGrid tbody tr:hover td {
  background: yellow !important;
}
/* Highlight the input/select element when focused */
#tblAppendGrid tbody tr td input:focus,
#tblAppendGrid tbody tr td select:focus {
  background: yellow !important;
}

Hope it can help :)

[MBered]

Awesome. Thanks for the css. It worked.

The load is working fine for the first time of change event but its not working after that.

Also is there an option to export the appendgrid to csv ?

Thanks.

[hkalbertl]

Still have problem on loading data?? May be you can take a look on this jsfiddle example on loading data by drop-down list selection.

For exporting CSV, you may make use of getAllValue. Here is an article described how to export JSON array to CSV.

[MBered]

Hey Albert.

Both of them worked. Thank you so much. I would like to rate the help that you provided. Is there a way i can provide feedback.

Thanks Mahi

On Tue, Sep 12, 2017 at 4:55 AM, Albert L. notifications@github.com wrote:

Still have problem on loading data?? May be you can take a look on this jsfiddle example https://jsfiddle.net/hkalbertl/r6ueL0qt/ on loading data by drop-down list selection.

For exporting CSV, you may make use of getAllValue https://appendgrid.apphb.com/Documentation#link-getAllValue. Here is an article https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side described how to export JSON array to CSV.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-328788274, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_lMWU5SefoNtuRUPq07bsHsCyFbgks5shkcCgaJpZM4PLFNg .

[hkalbertl]

Good to hear you solved the problem! I don't know where to rate a Github project but you may "Star" appendGrid if you like it :)

[MBered]

Sure, i will do that.

how do i format the values in the grid.

• Format Columns to “.00” Decimals and for the % columns (.00%)

On Thu, Sep 14, 2017 at 2:30 AM, Albert L. notifications@github.com wrote:

Good to hear you solved the problem! I don't know where to rate a Github project but you may "Star" appendGrid if you like it :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-329386654, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_sd9BSYbwuvtIXWz3MZ0Dhd2F_2Bks5siMgRgaJpZM4PLFNg .

[hkalbertl]

There is no build-in function for appendGrid to format grid data. But you may use jQuery UI spinner (which is { type: 'ui-spinner' } in appendGrid) that have number formatting options.

[MBered]

Thank you i will try that.

One more thing. the export to CSV is working in Firefox but its not working in IE 11. its failing with error message on the console: Object doesn't support property or method 'values'. please help.

$("#export").click(function(){ var data = $('#tblAppendGrid').appendGrid('getAllValue'); var csvContent = data.map(function(d){ return JSON.stringify(Object.values(d)); }) .join('\n') .replace(/(^[)|(]$)/mg, '');

// The download function takes a CSV string, the filename and mimeType as parameters // Scroll/look down at the bottom of this snippet to see how download is called var download = function(content, fileName, mimeType) { var a = document.createElement('a'); mimeType = mimeType || 'application/octet-stream';

if (navigator.msSaveBlob) { // IE10 navigator.msSaveBlob(new Blob([content], { type: mimeType }), fileName); } else if (URL && 'download' in a) { //html5 A[download] a.href = URL.createObjectURL(new Blob([content], { type: mimeType })); a.setAttribute('download', fileName); document.body.appendChild(a); a.click(); document.body.removeChild(a); } else { location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported } }

download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8'); });

On Tue, Sep 19, 2017 at 4:23 AM, Albert L. notifications@github.com wrote:

There is no build-in function for appendGrid to format grid data. But you may use jQuery UI spinner http://api.jqueryui.com/spinner/ (which is { type: 'ui-spinner' } in appendGrid) that have number formatting options.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-330466384, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_rh8pCSiXPrY9irgEfQJT2r3g9Hoks5sj3n3gaJpZM4PLFNg .

[hkalbertl]

It should be the problem on Object.values function which is not supported in IE. I guess you can use a loop to replace that function. For example:

var csvContent = data.map(function(d){
  var objValues = [];
  for (var key in d) {
    objValues.push(d[key]);
  }
  return JSON.stringify(objValues);
})

I am afraid it is the compatibility issue on export CSV which is a bit sidetracked from appendGrid. I am more than willing to help if you have questions/issues focused on appendGrid. Good luck!

[MBered]

Hi Albert.

I figured out the export to CSV. Again thanks for all the input.

In appendgrid i want to add footer which shows summary(sum) of each column of all data. How i can achieve this ?

Thanks Mahi

On Wed, Sep 20, 2017 at 12:29 AM, Albert L. notifications@github.com wrote:

It should be the problem on Object.values function which is not supported in IE https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/values. I guess you can use a loop to replace that function. For example:

var csvContent = data.map(function(d){ var objValues = []; for (var key in d) { objValues.push(d[key]); } return JSON.stringify(objValues); })

I am afraid it is the compatibility issue on export CSV which is a bit sidetracked from appendGrid. I am more than willing to help if you have questions/issues focused on appendGrid. Good luck!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-330742051, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_tHJXuFeHkhdkOPxS27pW1Z4qolPks5skJS9gaJpZM4PLFNg .

[hkalbertl]

In that case, you may need a hack. appendGrid will generate append / remove buttons in the tfoot section. You may insert an extra row to that and put your summary there. For example:

$(function(){
  // Initial the grid
  $('#tblAppendGrid').appendGrid({
    columns: [
      {
        name: 'Amount',
        onChange: function () {
          // Re-calculate the amount after value changed
          calculateTotalAmount();
        }
      }
    ],
    // Re-calculate the amount when rows added / removed
    afterRowAppended: function() {
      calculateTotalAmount();
    },
    afterRowInserted: function() {
      calculateTotalAmount();
    },
    afterRowRemoved: function() {
      calculateTotalAmount();
    }
  });
  // After initialized the grid, add extra row to tfoot
  var summaryRow = $('<tr></tr>').prependTo('#tblAppendGrid tfoot');
  var summaryCell =$('<td></td>').attr({
    'id': 'tblAppendGrid_tfoot_summary',
    'colspan': '<depends on the number of columns>'
  }).css({
    // You may put some format / style here
 });
});
function calculateTotalAmount() {
  // Logic to calculate total amount
  var total = 0, numOfRow = $('#tblAppendGrid').appendGrid('getRowCount');
  for (var i = 0; i < numOfRow ; i++) {
    // Assumed the column name is `Amount`
    var amount = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Amount', i)
    total = total + amount;
  }
  // Set the total to the footer cell
  $('#tblAppendGrid_tfoot_summary').text(total);
}

[MBered]

On click of the row it has to highlight and when u click on other row previously higlighted should go away.

On Wed, Sep 6, 2017 at 10:52 PM, Albert L. notifications@github.com wrote:

For your first question about load method, have you try to put your array of data directly? For example:

// The load method accept array of data and it will replace all existing row data// So, you should not use with for-loop. Just load your data array directly.$('#tblAppendGrid').appendGrid('load', SummaryList);

For the second question about highlight, you may achieve it by CSS. For example:

/ Highlight the background when mouse over /#tblAppendGrid tbody tr:hover td { background: yellow !important; }/ Highlight the input/select element when focused /#tblAppendGrid tbody tr td input:focus,#tblAppendGrid tbody tr td select:focus { background: yellow !important; }

Hope it can help :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-327668656, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_pRtMNtw3MesWt6CNYrpic3LyLm3ks5sf1pagaJpZM4PLFNg .

[hkalbertl]

@MBered commented on Oct 5, 2017, 12:55 PM GMT+8:

On click of the row it has to highlight and when u click on other row previously higlighted should go away.

On Wed, Sep 6, 2017 at 10:52 PM, Albert L. notifications@github.com wrote:

For your first question about load method, have you try to put your array of data directly? For example:

// The load method accept array of data and it will replace all existing row data// So, you should not use with for-loop. Just load your data array directly.$('#tblAppendGrid').appendGrid('load', SummaryList);

For the second question about highlight, you may achieve it by CSS. For example:

/ Highlight the background when mouse over /#tblAppendGrid tbody tr:hover td { background: yellow !important; }/ Highlight the input/select element when focused /#tblAppendGrid tbody tr td input:focus,#tblAppendGrid tbody tr td select:focus { background: yellow !important; }

Hope it can help :)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-327668656, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_pRtMNtw3MesWt6CNYrpic3LyLm3ks5sf1pagaJpZM4PLFNg .

Hi.

The sample code of in my previous comment would be the mouse-over/hover to highlight approach. Please take a look on the following example if you want the "click to highlight" approach:

/* Define a class of the highlight color */
tr.highlight td {
  background: yellow !important
}

$(function(){
  $('#tblAppendGrid').appendGrid(/* Init the grid normally */);
  // Add custom click event on table row
  $('#tblAppendGrid').on('click', 'tbody tr', function(){
    // Remove the highlight class on all rows
    $('#tblAppendGrid tbody tr').removeClass('highlight');
    // Add highlight class to current row
    $(this).addClass('highlight');
  });
});

[MBered]

Awesome. It worked.

I am having another issue.

1. I have 100 records to load, when the page is loading i am not sure why it initially shows three rows and after few seconds it shows all the data. i want the grid show all records instead of three initially or hide until it loads.

2. When i am trying to add new row by clicking Append row, the grid is adding new row at the end but the grid is not moving to the new row. it is staying at the current state. I want the focus move to new row.

Thanks

[MBered]

never mind i was able to figure out with. initRows: 0, maintainScroll:false

But i have new issue now. If i don't maintain scroll i am loosing the header. if i use maintainScroll:true the headers is not getting freezed. i need the header freezed ?

On Sat, Oct 7, 2017 at 11:18 PM, SharePoint Training < sptraining2015@gmail.com> wrote:

Awesome. It worked.

I am having another issue.

1. I have 100 records to load, when the page is loading i am not sure why it initially shows three rows and after few seconds it shows all the data. i want the grid show all records instead of three initially or hide until it loads.

2. When i am trying to add new row by clicking Append row, the grid is adding new row at the end but the grid is not moving to the new row. it is staying at the current state. I want the focus move to new row.

Thanks

[hkalbertl]

Hi,

If you want to freeze the header, you should specify the height (in pixel) to maxBodyHeight. I believe the value of maintainScroll will not affect the froze header.

When you still have problem on freeze header after changing the maxBodyHeight, it would much easy for me to check the problem if you can provide some sample code/jsfiddle to demonstrate your problem. Thanks!

[MBered]

see maxbodyheight is freezing the header but when i click on add/append row. the focus is not going to new row. i have to scroll down to see if the new row is added or not ?

On Mon, Oct 9, 2017 at 3:35 AM, Albert L. notifications@github.com wrote:

Hi,

If you want to freeze the header, you should specify the height (in pixel) to maxBodyHeight https://appendgrid.apphb.com/Documentation#link-maxBodyHeight. I believe the value of maintainScroll will not affect the froze header.

When you still have problem on freeze header after changing the maxBodyHeight, it would much easy for me to check the problem if you can provide some sample code/jsfiddle to demonstrate your problem. Thanks!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-335083765, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_ggL3rmPI0rhxRqSnXpbrSFOty-cks5sqcyqgaJpZM4PLFNg .

[hkalbertl]

Yes. In that case, using maxBodyHeight: <your preferred height> with maintainScroll: true should do the trick. You may take a look on this demo. You are not required to scroll the table when new row added.

[MBered]

Thanks.

So in the demo, if you move your cursor to the top row and then click on the add row you will notice the focus doesn't go to new row. I want the focus to go to new row, when i click on new row.

Thanks Mahi

On Mon, Oct 9, 2017 at 11:01 PM, Albert L. notifications@github.com wrote:

Yes. In that case, using maxBodyHeight: with maintainScroll: true should do the trick. You may take a look on this demo https://appendgrid.apphb.com/Demo/FixHeader. You are not required to scroll the table when new row added.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-335346029, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_hEY7zn3aQu-822jq3xu-cm7swtuks5sqt4fgaJpZM4PLFNg .

[hkalbertl]

So in the demo, if you move your cursor to the top row and then click on the add row you will notice the focus doesn't go to new row. I want the focus to go to new row, when i click on new row.

The current behavior is the focus remain on the insert/append button that you clicked. In that case you may take a look on the afterRowInserted and afterRowAppended events. The addedRowIndex parameter is an array of index of new row. You may add you code to focus row manually in above event functions by using this row index.

[MBered]

Thanks. That helped.

When the record are more than 100 append grid is showing only 100 rows ?

Thanks

On Wed, Oct 11, 2017 at 12:48 AM, Albert L. notifications@github.com wrote:

So in the demo, if you move your cursor to the top row and then click on the add row you will notice the focus doesn't go to new row. I want the focus to go to new row, when i click on new row.

The current behavior is the focus remain on the insert/append button that you clicked. In that case you may take a look on the afterRowInserted https://appendgrid.apphb.com/Documentation#link-afterRowInserted and afterRowAppended https://appendgrid.apphb.com/Documentation#link-afterRowAppended events. The addedRowIndex parameter is an array of index of new row. You may add you code to focus row manually in above event functions by using this row index.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/hkalbertl/jquery.appendGrid/issues/112#issuecomment-335681348, or mute the thread https://github.com/notifications/unsubscribe-auth/AeHl_mBFZJvjo8ES7lAjnvSHdgxCwkAVks5srEiVgaJpZM4PLFNg .

[hkalbertl]

I believe appendGrid will show all records unless you have specified the maxRowsAllowed. You can check the Large Data Set demo which able to load 500 records.