JQWidgets – Sibeesh Passion

Implement radio button selection in JQWidgets JQXGrid using checkbox

SibeeshVenu — Wed, 29 Jun 2016 05:22:53 +0000

In this post we will see how we can implement radio button selection feature to jQWidgets jQXGrid. As of now in JQXGrid, we don’t have this functionality yet, but still we can do it our self by using check box selection which is already available. We will load the grid with sample data and implement the radio button selection. If you are new to JQX Grid, you can see some tips here. I hope you will like this.

Download Source Code

You can always download the source code from here: Radio button selection in JQXGrid

Background

I am using JQXGrid in one of my project, where I wanted to implement the radio button selection, when I talked with JQXGrid development team, I was said that the functionality is not yet available. But they have given an option as selectionmode: ‘checkbox’ with the help of that property we can implement the requirement. As you know, to load a jQWidget JQX Grid, there you need the following things as mandatory.

datafields

columns

localdata or server side data

Using the code

First of all, load the needed references. You can download the needed files from here.

[html]

[/html]

Now, we are going to set our data source, this time we will use a XML file as data source.

[xml]

Orders
http://services.odata.org/Northwind/Northwind.svc/Orders
2011-12-01T11:55:06Z

http://services.odata.org/Northwind/Northwind.svc/Orders(10248)

2011-12-01T11:55:06Z

10248
VINET
5
1996-07-04T00:00:00
1996-08-01T00:00:00
1996-07-16T00:00:00
3
32.3800
Vins et alcools Chevalier
59 rue de l’Abbaye
Reims

51100
France

http://services.odata.org/Northwind/Northwind.svc/Orders(10249)

2011-12-01T11:55:06Z

10249
TOMSP
6
1996-07-05T00:00:00
1996-08-16T00:00:00
1996-07-10T00:00:00
1
11.6100
Toms Spezialitäten
Luisenstr. 48
Münster

44087
Germany

[/xml]

You can get the full data from the file orders.xml from the solution attached.

Now create a div element where we can bind the grid.

[html]

[/html]

Now we will define our grid as follows.

[js]
$("#jqxgrid").jqxGrid(
{
width: 850,
height: 450,
source: dataAdapter,
sortable: true,
selectionmode: ‘checkbox’,
altrows: true,
ready: function () {
$(‘#columntablejqxgrid .jqx-checkbox-default’).hide();
},
columns: [
{ text: ‘Ship Name’, datafield: ‘ShipName’, width: 250 },
{ text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 100, cellsformat: ‘yyyy-MM-dd’ },
{ text: ‘Freight’, datafield: ‘Freight’, width: 150, cellsformat: ‘F2’, cellsalign: ‘right’ },
{ text: ‘Ship City’, datafield: ‘ShipCity’, width: 150 },
{ text: ‘Ship Country’, datafield: ‘ShipCountry’ }
]
});
[/js]

As you can see we have applied dataAdapter as the source, below is the definition for your data adapter.

[js]
var dataAdapter = new $.jqx.dataAdapter(source);
[/js]

Now we will create the source object as follows.

[js]
var source =
{
datatype: "xml",
datafields: [
{ name: ‘ShippedDate’, map: ‘m\\:properties>d\\:ShippedDate’, type: ‘date’ },
{ name: ‘Freight’, map: ‘m\\:properties>d\\:Freight’, type: ‘float’ },
{ name: ‘ShipName’, map: ‘m\\:properties>d\\:ShipName’, type: ‘string’ },
{ name: ‘ShipAddress’, map: ‘m\\:properties>d\\:ShipAddress’, type: ‘string’ },
{ name: ‘ShipCity’, map: ‘m\\:properties>d\\:ShipCity’, type: ‘string’ },
{ name: ‘ShipCountry’, map: ‘m\\:properties>d\\:ShipCountry’, type: ‘string’ }
],
root: "entry",
record: "content",
id: ‘m\\:properties>d\\:OrderID’,
url: url
};
[/js]

As the grid definition is over,it is time to run our application and check whether the grid is loading fine or not.

Grid with check box selection

what do you see? You are able to do multiple selection right? But what do we needed? A radio button selection, isn’t it? So we are suppose to able to select only one row right?. This is why, we haven’t done the needed implementation yet. Let us add some script then.

[js]
$(‘#jqxgrid’).on(‘rowselect’, function (event) {
// event arguments.
var args = event.args;
// row’s bound index.
var rowBoundIndex = args.rowindex;
var selectedIndexes = $(‘#jqxgrid’).jqxGrid(‘selectedrowindexes’);
for (var i = 0; i < selectedIndexes.length; i++) {
if (rowBoundIndex !== selectedIndexes[i]) {
$(‘#jqxgrid’).jqxGrid(‘unselectrow’, selectedIndexes[i]);
}
}
});
[/js]

We are just deleting the other row selection in the event rowselect. Now run your application again, I am sure you will be able to select only one row at a time.

Grid with radio button selection

Now we can see the complete code.

Complete code

[html]

[/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

Dynamically Apply Colour Coding in Grid With Dynamic Headers And Data

SibeeshVenu — Tue, 16 Feb 2016 07:33:54 +0000

In this post we will see how we can apply colour coding dynamically to jQWidgets jQXGrid. Normally a grid control can be used when you need to formulate the data either in row wise or column wise. Here in this pose we will discuss how to differentiate some rows of the grid from the other by applying some conditions over the values dynamically. We are taking an HTML table as the data source and in the client side we will be looping through each columns and rows. If you are new to JQX Grid, you can see some tips here. I hope you will like this.

Background

If you are aware of the header column names and the data (Static data), you can apply the colour coding in a simple way as shown in this link. There we are using a property called cellclassname to fire an external function which returns the coloured HTML in return.

But in my case, the situation was different. The data source (HTML table here) was dynamic, hence I could not predict the header names and the data. As you know, to load a jQWidget JQX Grid, there you need the following things as mandatory.

datafields

columns

localdata or server side data

So to create/format the above mentioned properties, I am using an another way which we will discuss in this post.

Using the code

First of all, load the needed references. You can download the needed files from here.

[html]

[/html]

Now, we will create the HTML data. To make the processes easy, here I am going to paste a static HTML table(This table was dynamic for me).

[html]

Firstname	Lastname	Debits
Eve	Jackson	94
Clara	Oswald	17
Benedict	Mason	33
Eve	Jackson	94
Clara	Oswald	17
Benedict	Mason	33
Eve	Jackson	94
Clara	Oswald	17
Benedict	Mason	33
Eve	Jackson	94
Clara	Oswald	17
Benedict	Mason	33

[/html]

Then it is time to say where do you need to bind the grid.

[html]

[/html]

Now we will define our grid as follows.

[js]
$("#jqxgrid").jqxGrid(
{
width: 850,
autoheight: true,
source: dataAdapter,
columns: columnsArray,
pageable: true,
sortable: true,
filterable: true
});
[/js]

As you can see we have applied dataAdapter as the source, below is the definition for your data adapter.

[js]
var dataAdapter = new $.jqx.dataAdapter(source);
[/js]

Now we will create the source object as follows.

[js]
var source =
{
datatype: "json",
datafields: dataFieldsArray,
localdata: data
};
[/js]

As the grid definition is over, we can create our data, datafields, columns. Shall we? As I said earlier, our data source is a HTML table. We are looping through the trs to create the data and ths to create the datafields and columns.

[js]
// select rows.
var rows = $("#initialTable tbody tr");
// select columns.
var columns = $("#initialTable thead th");
var data = [];
var dataFieldsArray = [];
var columnsArray = [];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var datarow = {};
for (var j = 0; j < columns.length; j++) {
// get column’s title.
var columnName = $.trim($(columns[j]).text());
// select cell.
var cell = $(row).find(‘td:eq(‘ + j + ‘)’);
var type = ‘string’;
var format = ”;
var cellsalign = ‘left’;
if (!isNaN(cell.text())) {
type = ‘number’;
format = ‘d’;
cellsalign = ‘right’;
}
datarow[columnName] = $.trim(cell.text());
if (i === 0) {
dataFieldsArray.push({ name: columnName, type: type });
columnsArray.push({ name: columnName, dataField: columnName, cellsrenderer: cellsrenderer, cellsformat: format, cellsalign: cellsalign });
}
}
data[data.length] = datarow;
}
[/js]

Have you noticed that when we push the the items to the columnsArray we are calling the function cellsrenderer. This cellsrenderer function returns the HTML with coloured data as we expected.

[js]
var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
if (parseFloat(rowdata.Debits) < 30) {
return ‘’ + value + ‘’;
} else {
return ‘’ + value + ‘’;
}
};
[/js]

Here in this function we will get the needed things like row, columnfield, value, defaulthtml, columnproperties, rowdata as parameters and we checks for the condition rowdata.Debits<30, if it is true we will apply the colour #ff0000 or #00ff00.

Once the formatting is done, we are pushing the items to the arrays. Now we can see the complete code.

Complete code

[html]

Firstname	Lastname	Debits
Eve	Jackson	94
Clara	Oswald	17
Benedict	Mason	33
Eve	Jackson	94
Clara	Oswald	17
Benedict	Mason	33
Eve	Jackson	94
Clara	Oswald	17
Benedict	Mason	33
Eve	Jackson	94
Clara	Oswald	17
Benedict	Mason	33

Dynamically apply colour coding in Grid

[/html]

Output

Dynamically apply colour coding in Grid

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?

Kindest Regards
Sibeesh Venu

a href Columns In Grid

SibeeshVenu — Wed, 11 Nov 2015 14:18:54 +0000

In this post we will how we can customize a column in jQWidget jQX Grid. We will make one of the columns values to a hreaf tag. First we will load the grid from the a custom json data and then we will use cellsrenderer function to format the columns values. I hope you will like this.

Background

We all works in grid controls. Sometimes you may need to customize the grid and its column values. Here I am giving you custom demo of the same. In this article we are going to customize the grid column contents to a href tags.

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]

Href Columns In Grid – Sibeesh Passion

Href Columns In Grid – Sibeesh Passion

[/html]

Add the needed references

[html]

[/html]

Here comes the main part.

Grid Settings or Grid Initialization

[js]

[/js]

Sample data

Following is the contents of CustomData.txt

[js]
[{"LinkName":"Sibeesh Passion","Link":"http://www.sibeeshpassion.com"},{"LinkName":"C-Sharp Corner","Link":"http://www.c-sharpcorner.com"},{"LinkName":"Facebook","Link":"http://www.fb.com"},{"LinkName":"Google","Link":"http://www.google.com"}]
[/js]

As you can find out in the above code we are using cellsrenderer property to call the function columntohref which does the formatting. We are formatting the data as below ,

[js]
$.jqx.dataFormat.formatlink(value, format)
[/js]

Shall we check our output now?

Output

Column values to a href

Complete Code

[html]

Href Columns In Grid – Sibeesh Passion

Href Columns In Grid – 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?

Kindest Regards
Sibeesh Venu

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?

Kindest Regards
Sibeesh Venu

Change Themes Dynamically In Grid

SibeeshVenu — Wed, 28 Oct 2015 13:40:51 +0000

In this post we will see how we can Change Themes Dynamically In Grid . I recently came across a situation to change the grid’s theme dynamically, when ever user select any theme. 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/

Download the Source Code

Please download the source code from here: Change Themes Dynamically

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 Themes Dynamically In Grid – Sibeesh Passion

Change Themes Dynamically In Grid – Sibeesh Passion

[/html]

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

Change Themes Dynamically In Grid

Cool, so grid is loaded. Now need to add a select control in which we are going to load theme names so that user can select the theme and apply. Is that fine?

[html]

[/html]

The next thing is we need to add the CSS links to the page, here I am going to add some of the CSS references as follows.

[html]

[/html]

Have you noticed that we are calling the function applyNewCSS in the on change event of the select control. So next thins we will add that function.

[js]
function applyNewCSS() {
var css = $.trim($("#selectOptions").val());
if (css == ‘metro’) {
$("#jqxgrid").jqxGrid({ theme: ‘metro’ });
}
else if (css == ‘metrodark’) {
$("#jqxgrid").jqxGrid({ theme: ‘metrodark’ });
}
else if (css == ‘office’) {
$("#jqxgrid").jqxGrid({ theme: ‘office’ });
} else if (css == ‘orange’) {
$("#jqxgrid").jqxGrid({ theme: ‘orange’ });
} else if (css == ‘energyblue’) {
$("#jqxgrid").jqxGrid({ theme: ‘energyblue’ });
} else if (css == ‘darkblue’) {
$("#jqxgrid").jqxGrid({ theme: ‘darkblue’ });
} else if (css == ‘black’) {
$("#jqxgrid").jqxGrid({ theme: ‘black’ });
} else if (css == ‘shinyblack’) {
$("#jqxgrid").jqxGrid({ theme: ‘shinyblack’ });
} else if (css == ‘lightness’) {
$("#jqxgrid").jqxGrid({ theme: ‘lightness’ });
} else if (css == ‘ui-le-frog’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-le-frog’ });
} else if (css == ‘ui-darkness’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-darkness’ });
} else if (css == ‘ui-sunny’) {
$("#jqxgrid").jqxGrid({ theme: ‘ui-sunny’ });
}
else if (css == ‘android’) {
$("#jqxgrid").jqxGrid({ theme: ‘android’ });
}
}
[/js]

So we can add the theme to the grid as $(“#jqxgrid”).jqxGrid({ theme: ‘theme name’ });

Here we are applying the theme to the grid according to the user selection. Oops, we forgot one thing. If you apply CSS style sheet directly, the styles won’t get applied in the page contents. For that we need to disable the remaining style sheets and enable the selected one alone.

Following code will do that magic.

[js]
var i, link_tag;
for (i = 0, link_tag = document.getElementsByTagName("link") ; i < link_tag.length; i++) {
if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title) {
link_tag[i].disabled = true;
if (link_tag[i].title == css) {
link_tag[i].disabled = false;
}
}
set_cookie(‘style’, css, 30);
}
[/js]

We are finding all of the link reference and find out whose rel property has the word ‘stylesheet’. Now it is time to see how it woks.

Change Themes Dynamically In Grid

You can see that the grid themes are changing according to the user selection of theme.That’s all we have done it.

Complete Code

[html]

Change Themes Dynamically In Grid – Sibeesh Passion

Change Themes Dynamically In 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

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

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

Assign New Data Source To JQWidgets JQX Grid

SibeeshVenu — Fri, 24 Jul 2015 10:54:48 +0000

In this post, we will see how we can assign a new data source to JQWidgets JQX Grid. I hope you will like it.

Using The Code

[js]
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({ source: dataAdapter });

[/js]

Here jqxgrid is the ID of the div element in which we bind grid.
source is our new data source.

Please see other code snippets here: Code-Snippets

Kindest Regards
Sibeesh Venu

Filter parameters are always null in server side paging in JQWidget JQX Grid. Why?

SibeeshVenu — Mon, 29 Jun 2015 10:25:20 +0000

Hi All,
Hi I am working on JQX JQWidget grid. Now I am facing an issue with that. My Filter parameters are always null in server side paging. My call is getting to the controller, but the filter values are not getting. Following is my implementation of source and data adapter object.

[js]
var source =
{
datafields: DataFields,
datatype: "json",
url: ‘../Widget/GetGridData/’,
sort: function () {
$("#advancedgrid").jqxGrid(‘updatebounddata’, ‘sort’);
},
filter: function () {
$("#advancedgrid").jqxGrid(‘updatebounddata’, ‘filter’);
},
beforeprocessing: function (data) {
source.totalrecords = varDataCount;
}
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function (data) {
var length = dataAdapter.records.length;
},
loadError: function (jqXHR, status, error) {
var test = status;
console.log(test);
},
downloadComplete: function (data, status, xhr) {
debugger;
return jQuery.parseJSON(data);
},
formatData: function (data) {
$.extend(data, {
selectedColumn: selectedColumn,
selectedRow: selectedRow,
selectedMeasures: selectedMeasures,
serverName: serverName,
databaseName: databaseName,
cubeName: cubeName,
queryTemplate: QueryTemplate,
chartMode: ChartMode,
chartType: chartType
});
return data;
}
});
[/js]

Please help me. Thanks in advance.

Kindest Regards
Sibeesh Venu

Compress XML, String, Variables in Client Side and Export in HTML5 Using jQuery

SibeeshVenu — Wed, 24 Jun 2015 03:56:24 +0000

In this post, we will see how we can compress xml, string, variables in client side and export in html5. We will use JQuery for exporting this. Normally developers download Excel of any other file format from the server side. It may be the correct way to do the exporting if and only if the data is quite small. As you all know, when you develop a product or website, you may need to convince many people including in that project. You must convince your client because he/she is paying for it. 🙂 Your client will always look at whether your product is worth the money he will spend.

Download Source

Sample Data

CompressExport

Background

For the past few months I am working on the client side exporting, compression, decompression and so on.

Before going through the client-side mechanisms, you must be aware of what all the problems are in server-side exporting.

You need to upload the content to the server first. This will take time when the data is more. When it takes more than 2 minutes, no one will wait for it. They will just cancel the process and close your application. So your reputation is diminished.

Once the contents are uploaded, the server will initiate the process of downloading. Again this may take time.

The Process

The process that I will do is so simple.

You may need to look at my previous article that explains the Excel exporting mechanism in the client side.

http://sibeeshpassion.com/Export-HTML-Table-Using-JQuery/
http://sibeeshpassion.com/export-hierarchical-multi-level-html-table-with-styles-using-jquery/

Here I am listing what exactly I am going to do with my data.

1. Please find the sample excel file data here . Consider that I have data as in that document. You can see some content but there is not much. I am giving you a demo with that content. I have taken this data from the JQX Grid. For the past few months I have been working in JQX JQwidgets, the implementation I have done is for using it in my JQX grid. If you are new to JQX Grid you can check the following links.

http://sibeeshpassion.com/category/products/jqwidgets/

2. Once the data is ready we can go with the compression part. We have the XML string as our data. We are going with the client-side compression mechanism.

For the compression I have used LZW compression, please find more here.

The following is the code for the compression:
[js]
var LZW = {
compress: function (uncompressed) {
“use strict”;
// Build the dictionary.
var i,
dictionary = {},
c,
wc,
w = “”,
result = [],
dictSize = 256;
for (i = 0; i < 256; i += 1) {
dictionary[String.fromCharCode(i)] = i;
}
for (i = 0; i < uncompressed.length; i += 1) {
c = uncompressed.charAt(i);
wc = w + c;
//Do not use dictionary[wc] because javascript arrays
//will return values for array[‘pop’], array[‘push’] etc
// if (dictionary[wc]) {
if (dictionary.hasOwnProperty(wc)) {
w = wc;
} else {
result.push(dictionary[w]);
// Add wc to the dictionary.
dictionary[wc] = dictSize++;
w = String(c);
}
}
if (w !== “”) {
result.push(dictionary[w]);
}
return result;
}
}
[/js]

The preceding code does the compression, now we need to check the implementation. Am I right?
[js]
$(“#excelExport”).click(function () {
var exportInfo = LZW.compress($(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’));
});
[/js]

In the preceding code you can see that I am compressing the data that I have taken from the JQX Grid.

You can get the grid data as follows.
[js]
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’);
[/js]

To learn more about exporting in JQX Grid, please see here: Advanced JQX Grid With All Functionality.

You can always decompress the data as follows.
[js]
decompressedVariable = LZW.decompress(exportInfo);
[/js]

The following is the code for the decompression:
[js]
decompress: function (compressed) {
“use strict”;
// Build the dictionary.
var i,
dictionary = [],
w,
result,
k,
entry = “”,
dictSize = 256;
for (i = 0; i < 256; i += 1) {
dictionary[i] = String.fromCharCode(i);
}
w = String.fromCharCode(compressed[0]);
result = w;
for (i = 1; i < compressed.length; i += 1) {
k = compressed[i];
if (dictionary[k]) {
entry = dictionary[k];
} else {
if (k === dictSize) {
entry = w + w.charAt(0);
} else {
return null;
}
}
result += entry;
// Add w+entry[0] to the dictionary.
dictionary[dictSize++] = w + entry.charAt(0);
w = entry;
}
return result;
}
[/js]

Output Compression And Decompression:

Compress XML, String, Variables in Client Side and Export

In the preceding image you can see the length of the content before compression and after compression.

Before compression, the length is 41447. And after compression the length is 5452.

Now we know how to compress and decompress the contents :).

Cool. We have done it.

What else is pending? Yeah you are right, we need to export that content.

Exporting Using BLOB

Excel exporting is an important feature in every application. Yeah we do have an Excel exporting mechanism. 🙂
For the Excel exporting we are using a new technology called BLOB in HTML5. To work on it, you need to attach the script.

[js]

[/js]

This script does the saving of the Excel file. So it is important that we include it though. So once you have included that file we can move on to the next level.

The Implementation

The following code explains the implementation.
[js]
//This will download the excel file without compression (before compression of data)

saveMyFile($(‘#SubmitForm’), “My Excel File” + “.xls”, $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’), ‘text/xls;charset=utf-8′);

//this will download the file with compression (after compression of the data)

saveMyFile($(‘#SubmitForm’), “My Excel File” + “.xls”, exportInfo, ‘text/xls;charset=utf-8′);
[/js]

You can see that the parameters of the function saveMyFile,

Reference form.

File name.

The string to be exported. In our case, it is our XML string.

The mime type, for example: ‘text/xls;charset=utf-8′.

The export function
[js]
function saveMyFile(ref, fname, text, mime) {
var blob = new Blob([text], { type: mime });
saveAs(blob, fname);
return false;
}
[/js]

Once you pass the parameters, this function will do the remaining of what needs to be done. Sounds great, right? 🙂
Your Excel file will be exported in a fraction of a second. Great work by the Blob function. 🙂

See the file size difference

Now I hope you have two downloaded files:

Without compression

With compression

Let us see the size difference now.

Compress XML, String, Variables in Client Side and Export

Here, My Excel File.xls is without compression and My Excel File(1).xls is with compression. I hope you see the difference. 🙂

Now it is time for the complete Code.

Complete Code

[html]

This example illustrates how to customize the filtering conditions available in the columns popup menu.<br />

[/html]

Note: I have implemented the grid with a color render implementation. You can omit it and implement a simple grid if you work on the JQX Grid. Please note that you can give any string for the compression and decompression. For my convenience I selected the JQX Grid data.

Conclusion

Please download the attachment and try it. Please do not forget to give your valuable suggestions.

Point of interest

Export, Client-side Export, Compression in the client side, Decompression in the client side, Export using BLOB, Export in jQuery.

That is all for the day, will see you in another article.

Kindest Regards,

Sibeesh Venu