Add DevExpress Report Dynamically

Here is the way by which we can add report dynamically to some other report. There is one report which is already there but in some case where we want to add some other report to the main report dynamically or conditionally, we can do so by below way.

(1) Main Report which is already there with some implementation but can also have any other report added to this report dynamically
mainReport mymainReport = new mainReport();

(2) Declare a subreport which is already there but need to add to above main report
XRSubreport otherReport = new XRSubreport();

(3) subrepor which need to add
subReport subReporDetail = new subReport();
... here we can perform some data manipulation for subReport and finally assign it to subreport
otherReport.ReportSource = subReporDetail;

(4) Declare a DetailReportBand and DetailBand 
DetailReportBand detailReportBand = new DetailReportBand();
DetailBand subDetailBand = new DetailBand();

(5) Assign subdetailband height and add otherReport to it
subDetailBaind.HeightF = 0;
subDetailBaind.Controls.Add(otherReport);

(6) Add subDetailBand to detailReportBand
detailReportBand.Bands.Add(subDetailBand);

(7) Finally add detailReportBand to main report which will add this report dynamically
mymainReport.Bands.Add(detailReportBand);

This way we can add report dynamically. In step - (3), If there are many reports already created and conditionally we have to load any report then in this step we can check and add required report dynamically.

Working with DevExpress Reporting

Here is some links by which you can bind your devexpress report with datasource.

(A) Devexpress Reporting: Below are link for what is devexpress reporting and its general information.
(1) Devexpress Reporting

(2) General Information


(B) Bind Report: Below are links by which we can bind report with dynamic data from database.
(1) Bind a Report to a Data Source Schema

(2) Bind a Report to a Stored Procedure

(3) Bind a Report to an MDB Database (Runtime Sample)


(C) To load report below are the steps
(1) Register your assembly to page
<%@ Register Assembly="Your DevExpress.XtraReports Assembly" Namespace="DevExpress.XtraReports.Web" TagPrefix="dx" %>

(2) Define your ReportToolbar and ReportViewer


(3) Assign your report from code
myReport rpt1 = myReport();
rtDashboard.ReportViewer = rvDashboard;
rvDashboard.Report = rptESR;

This way you will get your report loaded to the page.

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.

Excel Operations Using Excel Interop Assembly

Here is code to read excel file which will read file and converts its cell to specific format like date format or number format or so and then save new version of file to take effect of the new file converted with provided format and leave original file as it is.

For the excel file to read, it is 2010pia which is installed to read excel file and in reference there will be version with 15.0 for excel is used to read excel file. The link to download is below

Download Microsoft Office 2010: Primary Interop Assemblies Redistributable

Below code to read excel file using office interop excel assembly and perform changes in cell and save that file
Microsoft.Office.Interop.Excel.Application objexcel = new Microsoft.Office.Interop.Excel.Application();

objexcel.DisplayAlerts = false;

Microsoft.Office.Interop.Excel.Workbook workbook = objexcel.Workbooks.Open("your file path", Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing, Type.Missing);

Microsoft.Office.Interop.Excel.Worksheet sheet = (Microsoft.Office.Interop.Excel.Worksheet)workbook.Sheets.get_Item(1);

rangeoutput = sheet.UsedRange;

int lastRow = sheet.Cells.SpecialCells(Microsoft.Office.Interop.Excel.XlCellType.xlCellTypeLastCell, Type.Missing).Row;

int lastColumn = sheet.Cells.SpecialCells(Microsoft.Office.Interop.Excel.XlCellType.xlCellTypeLastCell, Type.Missing).Column;

Microsoft.Office.Interop.Excel.Range oRange = (Microsoft.Office.Interop.Excel.Range)sheet.get_Range((Microsoft.Office.Interop.Excel.Range)sheet.Cells[1, 1], (Microsoft.Office.Interop.Excel.Range)sheet.Cells[lastRow, lastColumn]);

oRange.EntireColumn.AutoFit();

for (int i = 0; i < oRange.Columns.Count; i++)
{
    dt.Columns.Add("a" + i.ToString());
}

object[,] cellValues = (object[,])oRange.Value2;

object[] values = new object[lastColumn];

//Loop through the all rows of the excel file and operate to change the type of the cell
for (int i = 1; i <= lastRow; i++)
{
    //Loop through the columns and get the each cell value from rows
    for (int j = 0; j < dt.Columns.Count; j++)
    {
        //This implementation for selecting columns names from excel file
        if (i == 1)
        {
    //If you know the column name then from here set for the entire column format
            sheet.get_Range("B1").EntireColumn.NumberFormat = "dd/MM/yyyy";
        }
        else
        {
    //if entire column format is not get set then go with this else part where if you know the cell index then go with it
            if (j == 13)
            {
//for me it was date operation to perform and i checked statically with 13 which when comes picks the value for cell and convert it
                string str = Convert.ToString(cellValues[i, j + 2]);
                DateFormat numFormat = strColumns.Where(x => x.ColumnIndex == j + 2).FirstOrDefault();
                if (!string.IsNullOrWhiteSpace(str))
                {
                    double dblResult = 0;
                    bool blnIsDbl = double.TryParse(str, out dblResult);
                    if (blnIsDbl)
                    {
(rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).NumberFormat = numFormat.ColumnFormat;
                        double d = double.Parse(str);
                        DateTime conv = DateTime.FromOADate(d);
                        values[j] = conv.ToShortDateString();// cellValues[i, j + 1];
                        string strNewValue = conv.ToString(numFormat.ColumnFormat);
                        (rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).Value = strNewValue;
                        (rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).Value2 = strNewValue;
                    }
                    else
                    {
                        //if cell value are correct then fine but if it is wrong then here in else part checking its value then if it is wrong then keep it as it is
                        try
                        {
                            DateTime dt1;
                            bool IsValidDate = DateTime.TryParseExact(str, numFormat.ColumnFormat, null, DateTimeStyles.None, out dt1);
                            if (IsValidDate)
                            {
                                string strNewValue = dt1.ToString(numFormat.ColumnFormat);
                                (rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).Value = strNewValue;
                                (rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).Value2 = strNewValue;
                            }
                            else
                            {
                                (rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).Value = str;
                                (rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).Value2 = str;
                                intInvalidRows.Add(i);
                            }
                        }
                        catch (Exception Exc)
                        {
                            Exc.Message.ToString();
                            (rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).Value = str;
                            (rangeoutput.Cells[i, j + 2] as Microsoft.Office.Interop.Excel.Range).Value2 = str;
                        }
                    }
                }
            }
        }
    }
}

//Saves the changed excel file and then closes the file along with current workbook
objexcel.DisplayAlerts = false;

objexcel.ActiveWorkbook.SaveAs(Filename: "file path to save", FileFormat: Microsoft.Office.Interop.Excel.XlFileFormat.xlWorkbookDefault, CreateBackup: false);

objexcel.ActiveWorkbook.Close(SaveChanges: false);

objexcel.DisplayAlerts = true;

objexcel.Quit();

There are multiple operations has been performed here like opening file/changing file content/assigning cell format/save file using Excel Interop Assembly.

Error: Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046} failed due to the following error: 80070005 Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED)).

While working with Excel Interop Assembly for reading an excel file, I come up with error "Error: Retrieving the COM class factory for component with CLSID {00024500-0000-0000-C000-000000000046} failed due to the following error: 80070005 Access is denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED))". Found below error resolution for the error and performing steps in below links resolve my problem.

(1) System.UnauthorizedAccessException: Retrieving the COM class factory for Word Interop fails with error 80070005

(2) Access Denied. (Exception from HRESULT: 0x80070005 (E_ACCESSDENIED)) - Powered by Kayako Help Desk Software

Performing steps provided in above links resolve my problem. 

Step to reproduce this error: While reading an excel file using Interop assembly, on below line of code

Microsoft.Office.Interop.Excel.Application excelApp = new Microsoft.Office.Interop.Excel.Application();

It throws above error right from this line of code.

Working with Knockout Mapping

To work with properties of an object we have to first declare it with its property which can be observable. To work with this, we have to fetch some of the values from service and assign those manually. To overcome this situation we can use Knockout Mapping. If we assign incoming data mapping by knockout mapper it will create observable for each properties which act just like what we have created manually.

To work with knockout mapping, we have to include knockout mapper along with knockout.js 
http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js

To create new variable use "var MyData = ko.mapping.fromJS(serviceData)"
In above statement, "serviceData" is data from service which will be mapped with "ko.observable" to "MyData".

Knockout Mapping

Working with VueJS

Vue.js is a lightning fast framework that lets you build web apps in a simple way.

Links
Vue.js

Introduction

Getting Started

How to create new project with dependencies

Difference: VUE vs Angular
- Both are component driven
- It is lighter than angular so performance wise it is better
- Easy to learn
- We can divide into component which are re-usable with plug n play kind

Vue extension: "vue-devtools" is chrome extension used to get our vue instances in chrome console environment
Add Dev Tools

Working with Git Commands using Terminal

Here are few commands I came across while working with Source Tree with Git.

To work with git commands in Source Tree. Navigate to Top Menu --> Actions --> Open In Terminal.

(1) To stash newly added files
- git stash -u (create stash with default name selection)
- git stash save -u 'Name of the stash' (create stash with name specified)

(2) To stash changes including untracked files (files which are newly added)
- git stash --include-untracked

(3) To unstash selected(or one or multiple file from bunch of) files
- git checkout stash@{0} -- full path
- git checkout stash@{0} -- full path > full path

(4) Create Patch
- To create patch for changes not commited
git diff > patchname.patch
- To apply patch
git apply patchname.patch

(5) To Reset Source Tree
git reset

(6) To remove index of git
rm .git/index
del .git/index

Working with template in Angular 2

Here is the way by which we can work with template and assign template dynamically as well.

(1) First import statement
import { Component, ViewChild, TemplateRef } from '@angular/core';
notice here we have included ViewChild & TemplateRef as well and it is used for the same purpose to bind it with template

(2) Declare your component
@Component({
    ....// Place your component stuff here
})

(3) Declare your class
- first, declare your class then add below line of code for template
@ViewChild('template1') template1: TemplateRef;
@ViewChild('template2') template2: TemplateRef;

- add below function also
getTemplate(templatename) {
        return templatename == "template1" ? this.template1 : this.template2;
    }

- over here i am assuming there is an array of items you have and you are iterating by each item to bind that item data with template

(4) Now, at your html area
<table>
    <thead>        
        <th></th>
    </thead>
    <tbody>
        <tr *ngFor="let item of arrayitem; let i = index">
            <ng-template [ngTemplateOutlet]="getTemplate('template1')" 
            [ngOutletContext]="{ $implicit: item, index: i }"></ng-template>
        </tr>
    </tbody>
</table>
<ng-template #template1 let-item>
    //template1 html
</ng-template>
<ng-template #template2 let-item>
    //template2 html
</ng-template>

- ng-template - in ng-template, we are getting template to be used by calling method "getTemplate" and passing parameter "template1" to "ngTemplateOutlet" property. In this iteration it will get "template1" template and bind html in it with specified item

(5) currently, i have passed "template1" in "getTemplate" method to get template, but we can make it variable and based on assigned value to that variable appropriate template can be bind runtime.