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

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

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

Bind Json Data to JQWidget JQX Grid

SibeeshVenu — Thu, 18 Jun 2015 09:12:56 +0000

Introduction

Hi All, How are you today? Today we will learn how we can bind a Json data to JQWidget, JQX Grid. I hope you will like it.

Downloads

Download the source files here: BindJSONToGrid.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 what else we need? Yes, we need to create a div where we can render our grid.

[html]

Bind Json Data to JQwidgets JQX grid – Sibeesh Passion

[/html]

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

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

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

How to disable enter key in JQWidget JQX editable grid

SibeeshVenu — Fri, 05 Jun 2015 07:41:42 +0000

Introduction

Hi All, I hope you are fine. In this article you will learn how we can disable enter key in JQWidget JQX editable grid. I hope you will like it.

Background

Morning I was working in a grid control which editable, and I selected a row to edit and started editing. I found some issues when I just pressed enter key. So for the time being I thought of disabling enter key while editing. So I thought of sharing those informations with you.

If you are new to JQWidget JQX Grid, please read here: http://sibeeshpassion.com/category/jqwidgets/

Using the code

I hope you know the basics of JQWidget JQX grid. So normally we can create a grid as follows.
[js]
$("#jqxgrid").jqxGrid(
{
width: ‘800px’,
source: dataAdapter,
filterable: true,
sortable: true,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columnsreorder: true,
pagesize: 50,
pagesizeoptions: [‘5′, ’10’, ’15’, ’20’, ’30’, ’40’, ’50’],
filtermode: ‘excel’,
columns: [
{ text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘left’, datafield: ‘SupplierName’, width: 110 ,"pinned":true},
{ text: ‘Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
]
});
[/js]

To make this enter key disable you need to include the following settings to the grid.

[js]
handlekeyboardnavigation: function (event) {
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
if (key == 13) {
return true;
}
},
[/js]

cool, so now our grid implementation will look like this.

[js]
$("#jqxgrid").jqxGrid(
{
width: ‘800px’,
source: dataAdapter,
handlekeyboardnavigation: function (event) {
var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
if (key == 13) {
return true;
}
},
filterable: true,
sortable: true,
pageable: true,
autorowheight: true,
altrows: true,
columnsresize: true,
columnsreorder: true,
pagesize: 50,
pagesizeoptions: [‘5′, ’10’, ’15’, ’20’, ’30’, ’40’, ’50’],
filtermode: ‘excel’,
columns: [
{ text: ‘Supplier Name’, cellsalign: ‘center’, align: ‘left’, datafield: ‘SupplierName’, width: 110 ,"pinned":true},
{ text: ‘Name’, cellsalign: ‘center’, align: ‘center’, datafield: ‘ProductName’, width: 120 },
]
});
[/js]

Conclusion

I hope you enjoyed reading and found this useful. Please share me your valuable feedback. For me it matters a lot.
Kindest Regards
Sibeesh Venu