JQX Grid – 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

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

Get jqwidget jqx grid column count

SibeeshVenu — Fri, 19 Jun 2015 07:05:11 +0000

This code snippet shows how you can get jqwidget jqx grid column count.
[js]
var count = $("#jqxgrid").jqxGrid(‘columns’).records.length;
[/js]

Kindest Regards
Sibeesh Venu

Show/Hide Columns in JQWidgets JQX Grid

SibeeshVenu — Fri, 19 Jun 2015 06:01:02 +0000

Introduction

Hi All, How are you today? Today we will learn how we can Show/Hide Columns in JQWidgets JQX Grid. I hope you will like it.

Downloads

Download the source files here: SHowHideColumnInGrid.rar

Background

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

Using the code

Here I am using Visual Studio 2012. We will have a txt file in which we will have the JSON data, you can use this file or you can manually load Json data from server side.

So let us start

First of all we must include the needed files for the grid.

[html]

[/html]

No we can start the grid implementation. For that create a ready function and add the codes as follows.
[js]

[/js]

Now if you note, you can find out I have give hidden:true for the grid column implementation. So we have made that column as hidden.

[js]
columns: [{ "text": "Area Code", "dataField": "AreaCode", "cellsalign": "left", "cellsformat": "d", hidden:true }, { "text": "Revenue", "dataField": "Revenue", "cellsalign": "right", "cellsformat": "c2" }],
[/js]

Now what else we need? Yes, we need to create a div where we can render our grid.

[html]

[/html]

Here I am creating a new dive which is not using for grid rendering.

[html]

[/html]

I am going to introduce a function called ready here, What this function does is, it will be fired once the grid is loaded fully. So we can use this function for the operations which must be executed after the grid rendering.

[js]
ready: function () {
// callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
$(‘#readymessage’).show();
},
[/js]

Got it?

What about our data? We have not seen our data right?

[js]
[{"AreaCode":"B697-31","Revenue":12747128.190000001},{"AreaCode":"B697-92","Revenue":7922559.1600000048},{"AreaCode":"B697-76","Revenue":7541039.540000001},{"AreaCode":"B697-46","Revenue":7076495.5800000066},{"AreaCode":"B553-131","Revenue":5738816.5099999979},{"AreaCode":"B553-193","Revenue":4608556.52},{"AreaCode":"B697-74","Revenue":3895194.1099999994},{"AreaCode":"D158-233","Revenue":3572808.989999996},{"AreaCode":"B697-78","Revenue":3512657.6999999937},{"AreaCode":"B672-31","Revenue":2955916.9800000032},{"AreaCode":"B553-46","Revenue":2806813.7100000042}]
[/js]

All set now. So shall we see the grid now?

Now we will create a list box and when a user clicks on the column name , it will be shown/hide. Sounds OK?

List Box Implementation

To load the list box we need a data right?

[js]
var listSource = [{ label: ‘Area Code’, value: ‘AreaCode’, checked: false }, { label: ‘Revenue’, value: ‘Revenue’, checked: true }];
[/js]

No we need to bind this data to list box!.

[js]
$("#jqxlistbox").jqxListBox({ source: listSource, width: 200, height: 200, checkboxes: true });
[/js]

Run the application and see the output, if everything goes fine, you will see the output as follows.

What next ? We are going to create a checkChange event of our list box now.

[js]
$("#jqxlistbox").on(‘checkChange’, function (event) {
$("#jqxgrid").jqxGrid(‘beginupdate’);
if (event.args.checked) {
$("#jqxgrid").jqxGrid(‘showcolumn’, event.args.value);
//alert(event.args.value);
}
else {
$("#jqxgrid").jqxGrid(‘hidecolumn’, event.args.value);
}
$("#jqxgrid").jqxGrid(‘endupdate’);
});
[/js]

So once user clicks, that particular column will be in hidden or show mode 🙂 . And we are passing the value from the list box which is same as the dataField property of the grid, to the grid 🙂

No we will see our complete code.

Complete Code

[html]

Show/Hide Columns in JQWidgets JQX Grid @Sibeesh Passion!. Enjoy Coding!.

[/html]

Output

Things to remember

Make sure that your data type is json in source object.

[js]
datatype: "json"
[/js]

Make sure your json is valid

Conclusion

I hope you will like this article. Please share me your valuable thoughts and comments. Your feedback is always welcomed.

Thanks in advance. Happy coding!

Kindest Regards
Sibeesh Venu