jqxGrid Basics

Here are some workarounds for jqxGrid.

(A) For columns to customize below are some of the customized workaround
(1) To set customized header of column
renderer: columnrenderer

var columnrenderer = function (value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }

(2) To set customized cell value for items
cellsrenderer: cellsrenderer

var cellsrenderer = function (row, column, value) {
                return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
            }

(3) To give class to cell row
cellclassname: "verticalAlign"

.verticalAlign{
      vertical-align: middle;
   }

(4) To have column of type of checkbox,
columntype: "checkbox"
- in this case, the field associated with column must be a boolean
- there are many column types there like dropdownlist etc.

(5) To have filter type of boolean
filtertype: "bool"

(6) For boolean checkbox to filter
threestatecheckbox: true

(7) To make header text alignment
align: 'center'

(8) To format cell value
cellsformat: "dd/MM/yyyy"

(9) type: 'number' with  
cellsformat: ‘p’
- to view column data in percentage
cellsformat: 'c'
- to view column data in $ sign

(10) To get any cell value
$("#grid").jqxGrid('getcellvalue', rowIndex, 'columnName');

(11) To set any cell value
$("#grid").jqxGrid('setcellvalue', rowIndex, "columnName", value);


(B) Grid Properties
(1) Set row height property of the grid
rowsheight: 30

(2) Set row height to auto height
autorowheight:true & autoheight:true

(3) Set grid column height
columnsheight:50

(4) To resize columns
columnsresize: true

(5) To enable paging for the grid
pageable:true

(6) To enable filter functionality
filterable: true

(7) To enable separate filter row
showfilterrow: false

(8) To enable sort functionality
sortable: true

(9) To enable groupable functionality
groupable: true

(10) To enable separate group row
showgroupsheader: true

(11) columns reordering for grid when there are multiple columns
columnsreorder:true

(12) To edit single cell
selectionmode:'singlecell'

(13) When to edit 
editmode:'dblclick'

(C) Dynamic
(1) set column property dynamically
$("#jqxgrid").jqxGrid('setcolumnproperty', 'columnName', 'width', 300);

(2) show/hide grid column
$("#jqxgrid").jqxGrid('hidecolumn', "columnName");

(3) cell endedit mode
$("#grid").jqxGrid('endcelledit', 'value', 'columnName', false);

(4) set cell value
$("#grid").jqxGrid('setcellvalue', row, "columnName", 'valueToReplace');


(D) Methods
(1) bindingcomplete method will be get called when grid refreshes after loading for first time
$("#jqxgrid").on('bindingcomplete', function (event) {
    alert('bind');
});

(2) cellvaluechanging: this will be an event we can get when grid is having editable cell value and to perform any functionality we can write it out this metho
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
            if (newvalue != oldvalue) {
                // perform any operation here when value get changed from old to new
            }
        }

Have came across to these many properties, methods, events but there are some more that need to investigate and once its done will add those as well.

jqxGrid APIs

Here are some commands & events that are used for jqxGrid processing. Below are the list of commands that may useful.

(1) $('#jqxGrid').jqxGrid('showrowdetails', 2);
- shows details grid of index 2

(2) $('#jqxGrid').jqxGrid('hiderowdetails', 2);
- hides details grid of index 2

(3) $('#jqxGrid').jqxGrid('expandallgroups');
- expand all groups of grid

(4) $('#jqxGrid').jqxGrid('refreshdata');
- refreshes grid data

(5) $("#jqxGrid").trigger("reloadGrid")
- triggers reload event of jqxgrid

(6) $('#jqxGrid').jqxGrid('destroy');
- destroys grid

(7) $('#jqxGrid').jqxGrid('getrows')
- gets rows of jqxgrid

(8) $('#jqxGrid').jqxGrid('clearselection');
- clears selection of any row in grid

(9) $('#jqxGrid').jqxGrid('updatebounddata', 'cells');
- updates bound data of cell

(10) $("#jqxGrid").jqxGrid('cleargriddata');
- clears grid data

(11) $("#jqxGrid").jqxGrid('updatebounddata');
- update bound data

(12) $("#jqxGrid").jqxGrid('refresh');
- refreshes grid

(13) $('#jqxGrid').jqxGrid('getrowdetails', index);
- gets row details of specified "index"

(14) $("#jqxGrid").jqxGrid('getrowdata', $("#jqxGrid").jqxGrid('getselectedrowindex'));
- gets rowdata of the selected row

(15) $('#jqxGrid').jqxGrid('getselectedrowindex');
- gets row index of he selected row

(16) $("#jqxGrid").jqxGrid('setcellvalue', currRow, colName, newVal);
- sets cell value for the specified row and column with new value

(17) var position = $.jqx.position(event.args);
var cell = $("#jqxGrid").jqxGrid('getcellatposition', position.left,
position.top);
- gets cell position in grid

(18) $("#jqxGrid").jqxGrid('addrow', parseInt(newID + 1), row);
- adds new row to grid

(19) $("#jqxGrid").on("cellvaluechanged", function (event) {});
- cell value changed event

(20) $('#jqxGrid').jqxGrid('getrows').splice(1, 0, newrowdata);
- adds new row at position 1

(21) $("#jqxGrid").jqxGrid('autoresizecolumns');
- sets all column to auto resize

(22) $("#jqxGrid").jqxGrid('showcolumn', 'columnName');
- shows any column which is hidden

(23) $("#jqxGrid").jqxGrid("showcolumn", 'columnname')
- hides any column which is hidden

(24) $("#jqxGrid").jqxGrid('columns')
- fetches all column of the grid

(25) $('#jqxGrid').jqxGrid('getcolumn', 'columnname');
- gets specified column from the grid

(26) $("#jqxGrid").jqxGrid('endupdate');
- grid will have end update

(27) $('#jqxGrid').jqxGrid('getdisplayrows')
- gets display row of the grid

(28) $('#jqxGrid').on('rowselect', function (event) {});
- row select function

(29) $("#jqxGrid").on('cellendedit', function (event) {});
- cell end edit event of the grid

(30) $("#jqxGrid").jqxGrid('clearfilters');
- clears the filters of the grid

(31) $('#jqxGrid').jqxGrid('getdatainformation')
- gets data information of the grid

(32) $("#jqxGrid").jqxGrid('beginupdate');
- for the grid begin update when we want to change anything

(33) $('#jqxGrid').jqxGrid('getboundrows')
- gets bound rows in grid

(34) $('#jqxGrid').jqxGrid('selectrow', 1);
- selects row number 1 in grid

(35) $("#jqxGrid").jqxGrid('getcellvalue', row, 'columnName');
- gets cell value of any row

(36) var filtergroup = new $.jqx.filter();
var filtervalue = value to filter;
var filtercondition = 'equal';
var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
- to create filter group in grid

(37) $('#jqxGrid').jqxGrid('unselectrow', rowBoundIndex);
- used to unselect selected row

(38) $("#jqxgrid").jqxGrid('showgroupsheader', false);
- To hide the grouping panel, set the 'showgroupsheader' property to false.

(39) $("#jqxgrid").jqxGrid('addgroup', 'lastname');

- The 'addgroup', 'insertgroup', 'removegroup' and 'removegroupat' functions enable groups manipulation with the Grid API. 

These API may used for some small operations we are performing for specific purpose. Some of the commands are pretty straight forward but some of them require some more information.

For more APIs Click Here

Bind jqxGrid With Static Data

Here is code to bind jqxGrid with static data. Static data means you have locally some data available and you want to bind it without interacting with service url.

I assume that already have necessary files for jqxGrid to work/load properly.

Html:

Script: 

//Data fields are responsible for columns and its type
var datafields = [
    { name: 'Column 1', type: 'string' },
    { name: 'Column 2', type: 'string' }
];

//Column Items are columns with their look and feel 
var columnItems = [
    { text: 'Column 1', datafield: 'Column 1' },
    { text: 'Column 2', datafield: 'Column 2' }
];

//Data which holds local data that you want to bind
var data = [];

//Source contains data type and datafields along with local data
var source =
{
    datatype: "xml",
    datafields: datafields,
    localdata: data
};

//Adapter holds source which contains necessary information to load data
var adapter = new $.jqx.dataAdapter(source,
{
    loadError: function (xhr, st, err) {
        ErrorMsg("Technical error occured.");
    }
});

//jqxGrid which holds above information to bind grid and show the data
$("#jqxGrid").jqxGrid(
{
    width: '100%',
    source: adapter,
    filterable: true,
    showfilterrow: true,
    sortable: true,
    pageable: false,
    autoheight: false,
    columnsresize: true,
    columnsreorder: false,
    editable: true,
    autoshowfiltericon: true,
    selectionmode: 'none',
    columns: columnItems
});

Here in source localdata is responsible for binding local data and if case of you want to fetch data from any service then just remove "localdata: data" and add "url:serviceurl" which returns dynamic data.

Working Events of Telerik Grid View Windows Controls

Here is some events where you can do some operations while working with telerik gridview.

(1) Cell double click :- You can do some functionality while clicking over cell of the grid item, it could be anything like opening a another form in edit mode or anything.
Private Sub grid_CellDoubleClick(sender As Object, e As EventArgs) Handles grid.CellDoubleClick
'Your code goes here        
End Sub

(2) Row Formatting :- When you want to do some operations on your grid items this event comes to you. for me, on some operation i need to show items color to red, i checked its column value and if it meets requirement make it red else reset value of the.
Private Sub rgdAvailResult_RowFormatting(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.RowFormattingEventArgs) Handles rgdAvailResult.RowFormatting
    If e.RowElement.RowInfo.Cells("column1").Value Then
       e.RowElement.ForeColor = System.Drawing.Color.Red
    Else
       e.RowElement.ResetValue(LightVisualElement.ForeColorProperty, ValueResetFlags.Local)
    End If
End Sub

(3) View Row Formatting :- for rows related general event to work with different items of the grid. For me, to show filter bar in different color format, i use this event. So, if the item is filterrow then change is color else reset value to original.
Private Sub grid_ViewRowFormatting(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.RowFormattingEventArgs)
        If TypeOf e.RowElement Is GridFilterRowElement Then
            e.RowElement.BackColor = Color.NavajoWhite
        Else
            e.RowElement.ResetValue(LightVisualElement.BackColorProperty, ValueResetFlags.Local)
        End If
    End Sub

So, these are some events which are i found for my resolution. 

Export Telerik Windows GridView Control Data to Excel File

Here is some code snippet which will generate excel file of the telerik windows grid view. I assuming that you already bind data to your telerik grid on your windows application form and performing export to excel on any event.

- Declare new save file dialog in which you will enter your file name
Dim saveFileDialog As New System.Windows.Forms.SaveFileDialog()
- Below code snippet filters your file to be saved for xls only
saveFileDialog.Filter = "Excel (*.xls)|*.xls"
If saveFileDialog.ShowDialog() <> DialogResult.OK Then
    Return
End If
- Below code snippet checks whether file name has been entered or not
If saveFileDialog.FileName.Equals([String].Empty) Then
    RadMessageBox.SetThemeName(MyBase.ThemeName)
    RadMessageBox.Show("Please enter a file name.")
    Return
End If
- Below code snippet acceps name you entered and some default entries to generate your file
Dim fileName As String = saveFileDialog.FileName
Dim excelExporter As New ExportToExcelML("GridName")
excelExporter.SummariesExportOption = SummariesOption.ExportAll
excelExporter.SheetMaxRows = ExcelMaxRows._1048576
excelExporter.RunExport(fileName)
RadMessageBox.SetThemeName(MyBase.ThemeName)
- Below code snippet asks dialog to open saved file 
Dim dr As DialogResult = RadMessageBox.Show("The data in the grid was exported successfully. Do you want to open the file?", "Export to Excel", MessageBoxButtons.YesNo, RadMessageIcon.Question)
If dr = DialogResult.Yes Then
    System.Diagnostics.Process.Start(fileName)
End If

This way you can export your telerik windows control grid view data to excel file in default format.

Add an Item to Context Menu of Telerik Windows Grid View

Here is some code to work with Context Menu of Grid View of Telerik Windows Controls for Windows Forms

How to add an item to context menu of Grid View : To add custom item to context menu of the telerik grid view follow the steps below. For this code, I assume you are using Telerik Grid View for your Windows Forms and you have performed all necessary steps to bind your grid.

- Add an event handler 
AddHandler radGridView1.ContextMenuOpening, AddressOf radGridView1_ContextMenuOpening1

- Create contet menu event
Private Sub radGridView1_ContextMenuOpening1(ByVal sender As Object, ByVal e As Telerik.WinControls.UI.ContextMenuOpeningEventArgs)
        Dim menuItemExportToSpreadsheet As RadMenuItem = New RadMenuItem()
        menuItemExportToSpreadsheet.Text = "Export to Spreadsheet"
        AddHandler menuItemExportToSpreadsheet.Click, AddressOf ExportToSpreadsheet

        Dim separator As RadMenuSeparatorItem = New RadMenuSeparatorItem()
        e.ContextMenu.Items.Add(separator)
        e.ContextMenu.Items.Add(menuItemExportToSpreadsheet)
    End Sub

- Create click event of the newly added context menu item
Private Sub ExportToSpreadsheet(ByVal sender As Object, ByVal e As System.EventArgs)
'Your code goes here
End Sub

So, after doing this, each time you are on your grid view and you are opening your context menu you will see a new item get added to your context menu named "Expor to Spreadsheet", and on click of this you can perform logic written under its handler. 

This way you can add new menu item under your Telerik Grid Context Menu.