[Sibeesh VenuParticipant]

Hi Dimitar,
Thank you so much for the reply. In fact that is all I wanted to do. setting enablecolumnsvirtualization to false did the trick. Thanks much for your help.

[Sibeesh VenuParticipant]

Hi Dimitar,
I have tried the same as you suggested, but we have done so many things as the continuation of the colour coding method we had implemented. Now I am not in a situation to do any big changes since app is already moved to production. I believe you can understand my situation. Is there any other way something tricky like Salim Hamza suggested? I just need to make sure that all the columns are rendered instead of few columns when there is horizontal scroll. If yes please share me that, billion thanks in advance.

[Sibeesh VenuParticipant]

Hi Dimitar,
Thank you so much for the reply. I will try as you suggested.

[Sibeesh VenuParticipant]

Hi Salim Hamza,
Thanks much for the reply. I will give a try as you suggested. But in my case I can not predict the number of columns, it can be any value.

[Sibeesh VenuParticipant]

Hi Dimitar,
Thanks for the reply. That’s simple. Actually I have an HTML table as data source, so I am looping through all the headers and assign the values to a variable called dataColumns and datafields and at last I will just parse that variable and assign it to the grid. So In this case I am unable to use the normal colour coding techniques. Any help is appreciated.

[Sibeesh VenuParticipant]

Hi Dimitar,
Thanks much for your reply. Yes I do agree that this is not a recommended way, but I had no other option this. As I said my columns are dynamic, I am unable to call the cellsrender function as we have in that given example.

columns: [
                  { text: 'First Name', dataField: 'firstname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 100 },
                  { text: 'Last Name', dataField: 'lastname', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 100 },
                  { text: 'Product', dataField: 'productname', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 180 },
                  { text: 'Quantity', dataField: 'quantity', renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 80 },
                  { text: 'Unit Price', dataField: 'price', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 90},
                  { text: 'Total', dataField: 'total', renderer: columnrenderer, cellsrenderer: cellsrenderer,  width: 90}
                ]

So is there anyway we can apply the colour coding after the grid loads? If yes, please show me how can we do that? Thanks in advance.

[Sibeesh VenuParticipant]

Hi Dimitar,
Thanks for your reply. Everything is dynamic in my Grid, like columns, rows. So what we do is, looping through each columns and rows and assign colour codes to some cell values. Since I am creating the column header dynamically I am not able to use the existing colour coding techniques in your site. Since there will be only few cell when grid loads, I can only loop through those cell, hence the colour coding is not get applied to the all cell values. Please assist me to do this. Thanks in advance.

[Sibeesh VenuParticipant]

But I am facing an another issue now. My call to set the variable is getting fired after the normal filter function fired.

$(document).on('click', '#filterclearbuttonjqxgrid', function () {
    isFilterSortGrid = true;
});

How can we make the click event to be fired first? Any help is much appreciated. Thanks in advance

[Sibeesh VenuParticipant]

I have solved it myself.

I created a variable and initiated it in the document ready as follows.

var isFilterSortGrid = false;
Change sort filter functions in source object as follows.

sort: function () {
                      if (isFilterSortGrid) {
                          $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                      }
                  },
filter: function () {
                      if (isFilterSortGrid) {
                          $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                      }
                  }

And finally in filter and clear button click I made that variable true again.

$(document).on('click', '#filterbuttonjqxgrid', function () {
  isFilterSortGrid = true;
});

$(document).on('click', '#filterclearbuttonjqxgrid', function () {
 isFilterSortGrid = true;
});

I am applying the filter and sorting as normal, so that the filter selection will be there.

[Sibeesh VenuParticipant]

Hi Peter Stoev,
What is the event name which gets called automatically once after sort and filter? If there is such an event, I can call updatebounddata there right? And Is there any common updatebounddata function. Something as $(openFrom + "#jqxgrid").jqxGrid('updatebounddata')?

[Sibeesh VenuParticipant]

Hi Peter,
Thanks for the reply. Do you mean like below?

$(openFrom + "#jqxgrid").jqxGrid('updatebounddata', '');
$(openFrom + "#jqxgrid").jqxGrid('updatebounddata', '');

[Sibeesh VenuParticipant]

Hi Peter,
Thanks for your reply. So is there anyway we can call updatebounddata only once with all the filters and sort. Please suggest me an idea. Thanks in advance

[Sibeesh VenuParticipant]

Hi Peter,
Thanks for your reply. So is there any alternative for $(openFrom + "#jqxgrid").jqxGrid('applyfilters');?

[Sibeesh VenuParticipant]

Hi Peter,
Here my requirement is not local filtering and sorting. My need is to just show the selection of those filtered and sorted data, since I have already applied filtered and sorted data to the grid. So that I can reduce the DB hit. As I said above, when user tries to filter or sort after grid is loaded, everything should work as in server side demo.

[Sibeesh VenuParticipant]

Sorry I forgot to mention. I have already used update bound data.

$(openFrom + "#jqxgrid").jqxGrid('updatebounddata', 'sort');
$(openFrom + "#jqxgrid").jqxGrid('updatebounddata', 'filter');

[Author]

Posts