jQWidget – Sibeesh Passion

Load Data To Grid On Sroll

SibeeshVenu — Mon, 02 Nov 2015 06:09:36 +0000

In this post we will discuss about how we can load data to a grid on scroll event. As you all know Grid is a main control in every dashboard. Every company uses a grid control for showing reports or any kind of data. Hence it is widely used, it is important that the grid must be loaded faster. So the performance of the grid control matters a lot. Isn’t it? Here in this post we are going to do a task which will increase the performance of the grid since we are going to load the data as per user request (on scrolling down). Sounds cool?. Normally what we do is, we will load all the data to the grid in a head shot, the problem in this manner is, it will take ages to load the full data to grid. Hence the user will close your application and the won’t return back. That is sad thing right? So we will concentrate on the performance part now. I hope you will like this.

Background

I am working in a dashboard application. So for me performance was the main criteria to take care. We have used server side paging to improve the performance. This I will share in my next article. Now we will try to load a client side data on demand. Let us say when ever user scroll down. Sounds fine? Ok let us start then.

Using the code

To show this demo, I am using jQWidget jQX Grid control. If you are new to jQX Grid, you can find out some introduction here: jQWidget JQX Grid

Now we are going to load the grid first. I hope you have already checked how to load the grid. Please see the below code.

Create an HTML page

[html]

Load Data To Grid On Scroll – Sibeesh Passion

Load Data To Grid On Scroll – Sibeesh Passion

[/html]

Add the needed references

[html]

[/html]

Here comes the main part.

Grid Settings or Grid Initialization

[js]

[/js]

As you can find out in the above code we are generating the data dynamically using a function declaration generatedata.

Have you noticed that in the grid settings we have given virtualmode: true. This is very important. This property is meant to be used for handling the dynamic data in grid.

And another property you must be aware of is rendergridrows: rendergridrows. This means, we are rendering the grid data on demand. Like when user change the pager or scroll. So we are going to call our generatedata function in the rendergridrows. We are passing the start index and end index to the function, so that the dynamic data won’t be repeated.

[js]
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}
[/js]

Once the data is ready, we will pass it to the source object and source object to dataAdapter and finally dataAdapter to grid.

Shall we check our output now?

Output

Load Data On Scroll

Complete Code

[html]

Load Data To Grid On Scroll – Sibeesh Passion

Load Data To Grid On Scroll – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

Change Header Names Dynamically In JQwidgets JQX grid

SibeeshVenu — Wed, 28 Oct 2015 11:15:33 +0000

In this post we will see how we can Change Header Names Dynamically In JQwidgets JQX grid. I recently came across a situation to change the grid’s header columns text should be changed dynamically, when ever user change a text box content. So I have done this requirement by using some in-built functionalities of jQWidget JQX grid. Here I am going to share you that. I hope you will like it.

To load a grid from a JSON, you can follows the steps as discussed in this article: Load jQWidget JQX Grid From JSON

Background

If you are new to JQWidget JQX Grid, Please find out here: http://sibeeshpassion.com/category/jqwidgets/

Using the code

I hope you have implemented your grid as shown in that article. Now I guess your page will be looking like this.

[html]

Change Header Names Dynamically In JQwidgets JQX grid – Sibeesh Passion

Change Header Names Dynamically In JQwidgets JQX grid – Sibeesh Passion

[/html]

Now let us make sure that grid is working fine. Please run your project.

Change Header Names Dynamically In JQwidgets JQX grid

Cool, so grid is loaded. Now need to add a select control in which we are going to load the grid header names so that user can select which one’s header must be changed, and a text box where a user can enter the text to be changed for the selected header. Is that fine?

[html]

[/html]

The next thing is we need to add the options to the select control. Right? We can get the column properties of JQX grid as $(“#jqxgrid”).jqxGrid(‘columns’).records. Now we will create a ready function in the grid settings and append the values. Following is the code for that.

[js]
ready: function () {
var options = "";
var headerNames = $("#jqxgrid").jqxGrid(‘columns’).records;
for (var i = 0; i < headerNames.length; i++) {
options += "";
}
$("#selectOptions").html(options);
}
[/js]

What is next? Yeah, we need to fire the text box change event.

[js]
$("#changeName").change(function (e) {
$("#jqxgrid").jqxGrid(‘setcolumnproperty’, $(‘#selectOptions option:selected’).val(), ‘text’, $(‘#changeName’).val());
});
[/js]

In the text box change event we have written the code to change the header column text property.

Here we are using setcolumnproperty method which already available in the JQWidget library.

Now it is time to see how it woks.

Change Header Names Dynamically In JQwidgets JQX grid

You can see that the header column text has been changed from ‘Area Code’ to ‘New Area Code’.That’s all we have done it.

Complete Code

[html]

Change Header Names Dynamically In JQwidgets JQX grid – Sibeesh Passion

Change Header Names Dynamically In JQwidgets JQX grid – Sibeesh Passion

[/html]

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Did you try jQWidget yet? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

Kindest Regards
Sibeesh Venu

Order Filter Conditions In jQWidget JQX Grid

SibeeshVenu — Tue, 20 Oct 2015 09:56:57 +0000

In this post we will see how we can set the default filter condition in JQX Grid filter drop down or how we can order jqx grid jqwidget filter conditions. I recently came across a situation that the grid filter condition must be shown as ‘equal’ for any type of filter like string, numeric. So I have done this requirement by using some in-built functionalities of jQWidget JQX grid. Here I am going to share you that. I hope you will like it.

To load a grid from a JSON, you can follows the steps as discussed in this article: Load jQWidget JQX Grid From JSON

Background

If you are new to JQWidget JQX Grid, Please find out here: http://sibeeshpassion.com/category/jqwidgets/

Using the code

I hope you have implemented your grid as shown in that article. Now I guess your page will be looking like this.

[html]

Order Filter Conditions In JQX Grid – Sibeesh Passion

Order Filter Conditions In JQX Grid – Sibeesh Passion

[/html]

Now let us make sure that grid is working fine. Please run your project.

Order Filter Conditions In jQWidget JQX Grid

Cool, so grid is loaded. Now have you noticed that the filter condition shows by default is ‘Contains’ ? Now we are going to change that. You might be thinking what kind of requirement is this. But trust me. If client ask, we must do anything at any cost.

Now we are going to add three functions to the grid settings.

rendered

updatefilterconditions

updatefilterpanel

So our grid settings will be looking as follows.

[js]
$("#jqxgrid").jqxGrid(
{
source: data,
columns: [{ "text": "Area Code", "dataField": "AreaCode", "cellsalign": "left", "cellsformat": "d" }, { "text": "Revenue", "dataField": "Revenue", "cellsalign": "right", "cellsformat": "c2" }],
pageable: true,
filterable: true,
sortable: true,
rendered: function () {
var localizationobj = {};
filterstringcomparisonoperators = [‘equal’, ’empty’, ‘not empty’, ‘contains’, ‘does not contain’, ‘starts with’, ‘ends with’, ‘null’];
filternumericcomparisonoperators = [‘equal’, ‘not equal’, ‘less than’, ‘less than or equal’, ‘greater than’, ‘greater than or equal’, ‘null’, ‘not null’];
filterdatecomparisonoperators = [‘equal’, ‘not equal’, ‘less than’, ‘less than or equal’, ‘greater than’, ‘greater than or equal’, ‘null’, ‘not null’];
filterbooleancomparisonoperators = [‘equal’, ‘not equal’];

localizationobj.filterstringcomparisonoperators = filterstringcomparisonoperators;
localizationobj.filternumericcomparisonoperators = filternumericcomparisonoperators;
localizationobj.filterdatecomparisonoperators = filterdatecomparisonoperators;
localizationobj.filterbooleancomparisonoperators = filterbooleancomparisonoperators;

// apply localization.
$("#jqxgrid").jqxGrid(‘localizestrings’, localizationobj);
},
updatefilterconditions: function (type, defaultconditions) {
var stringcomparisonoperators = [‘EQUAL’, ‘EMPTY’, ‘NOT_EMPTY’, ‘CONTAINS’, ‘DOES_NOT_CONTAIN’, ‘STARTS_WITH’, ‘ENDS_WITH’, ‘NULL’];
var numericcomparisonoperators = [‘EQUAL’, ‘NOT_EQUAL’, ‘LESS_THAN’, ‘LESS_THAN_OR_EQUAL’, ‘GREATER_THAN’, ‘GREATER_THAN_OR_EQUAL’, ‘NULL’, ‘NOT_NULL’];
var datecomparisonoperators = [‘EQUAL’, ‘NOT_EQUAL’, ‘LESS_THAN’, ‘LESS_THAN_OR_EQUAL’, ‘GREATER_THAN’, ‘GREATER_THAN_OR_EQUAL’, ‘NULL’, ‘NOT_NULL’];
var booleancomparisonoperators = [‘EQUAL’, ‘NOT_EQUAL’];
switch (type) {
case ‘stringfilter’:
return stringcomparisonoperators;
case ‘numericfilter’:
return numericcomparisonoperators;
case ‘datefilter’:
return datecomparisonoperators;
case ‘booleanfilter’:
return booleancomparisonoperators;
}
},
updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
columnfilter, filtertype, filterconditions) {
var index1 = 0;
var index2 = 0;
filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
}
});
});
[/js]

Here in the updatefilterpanel we are setting the index for the filter drop down. And in updatefilterconditions and rendered functions we are applying the localization according to our requirement. Now save the changes and run your grid again, you can see the filter option ‘equal’ will be loaded as default.

Order Filter Conditions In jQWidget JQX Grid

That’s all we have done this requirement of ordering the jQWidget JQX grid filter conditions.

Conclusion

Your turn. What do you think?

Kindest Regards
Sibeesh Venu