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 with Creating Custom Component in Angular JS

Here is the way by which we can create your own Custom Component. To create custom component you have already installed necessary stuffs and your basic application is working with default layouts. Also, you have selected your default working folder in Visual Studio Code.

(1) Under your created application, find src, under that create a folder with name of your component like "product"

(2) in product folder, add files .html & .ts like product.html & product.ts
- in product.html file, your html code will reside & in product.ts your code/logic will reside

(3) to bind any property with your newly added component build product.ts with below
import {Component} from '@angular/core';
@Component({
    selector:"product",
    templateUrl:"./product.html"
})
export class Product{
title: string = "Hello World!";
}
- for selector property, it will be reside under your default "app.component.html" file which will hold your product html data within this tag
- templateUrl, is the path of your html which will render once application get loaded

(4) for your html, you want to bind your "title" property like below

{{title}}

- {{}} is the directive used to bind/display your ts object value and it will display there

(5) Upto this step we are done with our custom component, but to render/display this to your application, it will be render with following steps
- go to "app.component.html" file, create tag with name "product"
- go to "app.module.ts", import your component with
import { ProductListComponent } from './products/product';
add class name of your component, in our case it is "Product". so add "Product" in "declarations" under @NgModule

Performing above steps will add your custom component to your application and this will show your "Hello World!". Also, the way here is manual by adding files and folders but you can also create same thing with a command for Step-(1) & Step-(2).

Angular Component

Working with TypeScript

Here is some links for TypeScirpt, what is TypeScript and why we are using it.

(1) TypeScript

(2) TypeScript : Javascript that scales

(3) TypeScript Quick Start

(4) TypeScript Documentation

(5) TypeScript downloads

(6) What is TypeScript?

(7) TypeScript - Overview

(8) Getting Started with Angular 2 using TypeScript

(9) Angular: Why TypeScript?

Working with NEW Angular

Here is some list of links to work with NEW Angular JS. Links are for the what is angular, examples, download editor+node js+visual studio code, & basics of type script.

(1) Angular

(2) Get Started

(3) Download Quick Start Example

(4) Download NodeJS

(5) Angular CLI

(6) List of Angular Modules/Library Packages

(7) Type Script Overview

(8) Visual Studio Code

(9) Bootstrap Link

(10) Mozilla Developer Events

Apply Template to Kendo Grid Dynamically

Here is some code which will show you how you can apply template for kendo grid view.

(1) For this post, i assume that you have kendo grid with datasource is already applied and you only need to apply template dynamically.

(2) while initializing kendo grid, give your name of the template like below
$('#grid').kendoGrid({
....
rowTemplate: kendo.template($("#template").html()),
....
});

your template "template" will be placed at your html view.
- so for this, whenever your page get load it will automatically bind this template for your individual item
- for this view, if you want to show only template not column title then mark "visible:false" or "hidden:true" or both in you columns so it will just hide your column title on top and show only the item template for each item.

(3) to change your template, find event wherever you want to apply another template and in that event apply below code

var _grid = $('#grid').data('kendoGrid');
_grid.options.rowTemplate = kendo.template($("#othertemplate").html());
_grid.refresh();


(4) so, wherever you want to apply another template just find grid and apply template then refresh grid will reflect your grid with new template applied on it.

Working with kendo drag n drop

Here is some code for the working with drag n drop with kendo drag n drop. This is considered that you are already have your application with kendo enabled environment.

(A) HTML - Following code is your html initialization for the drag & drop object
- Drag Object

                   

Drag Me

               

- Drop Object

                   

Drop Here

               

(B) Script - Following code is your jquery function for initialization and drag n drop handling
- Drag object Initialization and event handling
$(this).find("#dragObj").kendoDraggable({
    filter: "this:not(.disabled)",
    hint: function () {
        return "

Drop Me

";
    },
    dragstart: startfuncion,
    dragend: endfunction,
    dragcancel: cancelfunction
});

- filter : this line of statement is responsible to disable any object during drag n drop so if you have filtered anything it will be get disable on time of drag and once you drop/cancel current operation it will be again enabled.

function startfuncion(e)
{
 //you can find your current object related information which is being dragged using e.currentTarget
}

function endfunction(e)
{
 //you can write your logic after event get end
}

function cancelfunction(e)
{
 //you can find your logic for drag cancel
}

- Drop object initialization and event handling
$("#dropHere").kendoDropTarget({
    dragenter: dropenterfunction,
    dragleave: dropleavefunction,
    drop: dropfunction,
    dragcancel: dropcancelfunction
});

function dropenterfunction(e)
{
 //you can find your logic for highlighting when draggable object enters in this region
}
function dropleavefunction(e)
{
 //you can find your logic for remove highlighting when draggable object leaves this region
}
function dropfunction(e)
{
 //you can find your logic for object which is dropped to this region
}
function dropcancelfunction(e)
{
 //you can find your logic for object which is dragged but was cancelled
}

Below is link for the kendo drag n drop demo and documentation for same
(1) Demo for Drag & Drop Component in Kendo UI jQuery framework

(2) Overview of DOM element Draggable functionality | Kendo UI Docs

Working with Export to PDF in Kendo Grid

Here is some link to work with export to PDF in kendo grid

(A) PDF Export Demo: Export to PDF demo and documentation link 
(1) Grid / Export to PDF

(2) Walkthrough of the Grid Features and Behavior

(B) Kendo UI Export Options with Customizations: Export to PDF functionality in two different way you want to manipulate
(1) Kendo UI Drawing API Export functionality - Document Export

(2) Kendo UI PDF Export customizations - Page Layout

(C) Kendo Grid Export to PDF: Export to PDF with launcher which lets user to ask user if we export then it will ask user with open/save dialog
(1) Kendo UI Grid Export to Excel / PDF not working on IE9

(2) Kendo Grid Configuration for Export

Working with OData?

Open Data Protocol (OData) is a RESTful data access protocol initially defined by Microsoft. Here is some links that will help you to know more about what OData is and how to consume.

(1) Open Data Protocol

(2) OData Version 3.0 Core Protocol

(3) Introducing OData Data Access for the Web, the cloud, mobile devices, and more

(4) OData in ASP.NET Web API | The ASP.NET Site

Consume OData Service
(4) OData Services

(5) Consuming OData using .NET

(6) Calling an OData Service From a .NET Client

How it is differ from REST
(7) Difference between OData and REST web services

(8) How is oData different from a REST service? 

Multi Select in Kendo Tree View

Here is some code for how can we select multiple items in kendo tree view and also can move selected items to other kendo tree view.

 (1) Multi-Select Kendo Tree View
Consider there are two kendo tree view on your page one contains source of some items and other will become your selection from source items to destination. Default, kendo tree view provides single selection of an item. To make it multi-select put following line of code to your select event of kendo tree view.

select: function(e){
    e.preventDefault();
}

This will make tree view multi-select and you can select more than one item from your kendo tree view.

(2) Shift Selected Items
Shift selected(multiple) items from source tree view to destination tree view.
put following line of code to any of the event like button, hyperlink etc.

var source = $('#source').data('kendoTreeView');

var selectedNode = source.select();

if (selectedNode.length > 0) {

    selectedNode.each(function () {

var dest = $("#dest").data("kendoTreeView");

dest.dataSource.add(source.dataItem($(this)));

source.remove($(this));

    });

}

First statement will be container for your tree view, and its select() method will pick whichever items you have selected in your source tree view to shift.
Simply, loop through your selected items using each function and for each item select destination tree view and add selected item to destination and remove selected item from your source.

That way you can select multiple items and move that multi-selected items from one kendo tree view to another tree view on any event.

Durandal JS Work Arounds

Here is some work around while working with durandal framework
(A) Call function from another file
Follow the steps to use script file
- put your file name in define tag of js file where you want to use it
- put alias for that file in same file as an argument in function
- now you can use that file using its alias in your application

(B) To provide width for message box
Follow the steps to provide width in message box
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- app.showMessage("message", 'Warning', [{ text: "Yes", value: "Yes" }, { text: "No", value: "No" },true, { style: { width: "400px" } })

(C) To pass multiple argument for modal dialog
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- call showDialog to open view in dialog
app.showDialog('dialog view', "param1Value").then(function () {});
app.showDialog('dialog view', {param1,"param1value", param2,"param2value"}).then(function () {});
- how to access value
for single value, it will be like 
vm.activate = function (param1) { //param1 will be placed anywhere it requires}
for multiple value,
vm.activate = function (params) { //params.param1 for first parameter value and same for other parameter like //params.param2 and it will replace with value for param1 & param2 with param1value & param2value respectively}

(D) message box with multiple buttons, 
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- put your code like below and it will show up with three buttons Button1, Button2 & Button3 and on clicking of any button respective code block will be called
app.showMessage("Message", 'MessageType', [{ text: "Button1", value: "Button1" }, { text: "Button2", value: "Button2" }, { text: "Button3", value: "Button3" }]).done(function (result) {
if (result === 'Button1') {//Code for button1}
else if (result === 'Button2') {//Code for button2}
else if (result === 'Button3') {//Code for button3}
});

(E) Compose view
- to show only view you can directly do like following way

- to load your view model with your view for some processing you can put like following way

In above case, it will load html and associate js file for that view.

(F) Working with view
- to work or bind any event for any control in view, you can bind it in "attached" event because in "activate" event it will be load your full view to "DOM" and in "attached" event you can play with it.

(G) Navigation process
- If you want to cancel navigation or need to process some logic while user navigate away from existing location you can put your logic to "canDeactivate" event.
- In this event, you can process your logic and based on that you can cancel navigation for user

Working with Durandal

Here is some links for Durandal framework.
(A) Durandal: Durandal is small JavaScript framework designed to make building Single Page Applications (SPAs) simple and elegant. 

(1) Durandal

(2) Docs | Durandal

(3) Docs - Introduction | Durandal

(4) Docs - Durandal's Edge | Durandal

(5) Durandal Get Started

(6) Docs - Manual Setup | Manual Setup

(7) Hello Workd | Durandal Sample

(8) Durandal with ASP.NET MVC Conventions

(9) Building a SPA with Durandal, Knockout and Breeze

(10) Rich Data Management in JavaScript

(B) Require JS: RequireJS is a JavaScript file and module loader. 
(1) Require JS

(2) Why AMD?

(3) WHY WEB MODULES?

(C) AMD: The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.
(1) AMD & AMD1

(2) AMD Tests

(3) AMD Implement

Bind Simple Grid in AngularJS

Here is some line of code which demonstrates how can we bind data in AngularJS using grid.
(A) HTML Code: Required references for scripts and stylesheet for AngularJS are added

(B) Script code : Put your following code into main.js file


Above code for binding grid uses "ng-grid" directive used in AngularJS. So, that's it for the binding simple grid in AngularJS. 

Working with AngularJS with Get/Post calls

Here is some code which will show how can we use get/post calls when working with AngularJS. For these code i assume that you are aware of some basic knowledge of AngularJS code and syntaxes. Also, for this examples i used WCF service as data source which returns expected results as i want for my use so you can change code or source of service as per your need.

(1) Get With Single Value : This function returns single string value.
HTML :  

AngularJS : 
var sample = function ($scope, $http) {
        $http({
            url: '/MyService.svc/DoWorkWithString'
        }).success(function (data) {
            $scope.stringResult = data.DoWorkWithStringResult;
        });
    };

(2) Get With List of values : This function returns list of Name & Count which are processed at UI and displayed to view.
HTML : 

AngularJS : 
var ListController = function($scope, $http) {
        var resultPromise = $http.get("MyService.svc/ListItems");
        resultPromise.success(function(data) {
            $scope.ListItems = data.ListItemsResult;
        });
    };

For the post operation, both function simply returns string value which could be any success/error message that we can pass to UI after completion of any
operation on posting.
(3) Post with single parameter : posts one valueHTML : 




Angular JS :
function FrmController($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.Click = function () {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$http({ method: 'POST', url: 'MyService.svc/ListTest', data: JSON.stringify($scope.idTest) }).success(function (data) {
                if (data != '') {
                    $scope.msgs.push(data);
                } else {
                    $scope.errors.push(data);
                }
            });
};

(4) Post with two parameter
HTML : 

Angular JS :
function FrmController($scope, $http) {
$scope.errors = [];
$scope.msgs = [];
$scope.Click = function () {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$http({ method: 'POST', url: 'MyService.svc/ListTestTwo', data: JSON.stringify({"param1":"value1","param2":"value2"}) }).success (function (data) {
                if (data != '') {
                    $scope.msgs.push(data);
                } else {
                    $scope.errors.push(data);
                }
            });
};

So, That's it for AngularJS with Get/Post calls.

Simple WCF Application Call From Client End

Today, i am going to create simple WCF Web Service and consume same web service from client side.
(A) Steps to create new WCF Service
(1) Right Click on your solution --> Add --> New Project --> Select ASP.NET Web Application --> Give appropriate name like "REST"
(2) Above step will create new Web Application, you can remove master page and other pages included from newly created project
(3) Right Click on newly created project --> Add --> New Item --> Select "WCF Service" --> Give appropriate name like "MyService"
(4) Above step will add an interface named "IMyService" already implemented and one service with extension "MyService.svc"
(5) Remove existing code implemented in interface as well as in service.
(6) Add following line of code in interface
[OperationContract]
[WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.Wrapped, ResponseFormat = WebMessageFormat.Json)]
string DoWorkWithString();
- This is simple method we have declare which will return string on execute.
- WebInvoke requires "System.ServiceModel.Web" name space to be added as reference in your project
(7) Implement above method with following code in MyService.cs
public string DoWorkWithString()
{
    return "This is one test";
}

(8) After completion of above code, create virtual directory named "REST" and bind it with above project.
(9) To run with existing code from client end, you need to change serviceModel tag with following line of code in your Web.Config file. To do that, replace following line of code of serviceModel with your Web.Config tag.

(B) Steps to call WCF Service from client end
Now, you are done with your simple service implementation, you can now call above service from client end using following line of code to your html and it will prompt "This is one test".
$.ajax({
    url: 'http://localhost/REST/MyService.svc/DoWorkWithString',
    dataType: 'json',
    cache: false,
    type: 'GET',
    contentType: 'application/json; charset=utf-8',
    data: {},
    error: function (XMLHttpRequest, textStatus, errorThrown) {
     alert('Error occurred during operation');
    },
    success: function (data1) {
        alert(data1.DoWorkWithStringResult);
    }
});

(C) You can also following navigate to following links to do same.

(1) An Introduction to WCF

(2) Four Steps to Create First WCF Service For Beginners

(3) Consuming WCF / ASMX / REST service using JQuery
       

Working with AngularJS

Here is some link which will introduces what is AngularJS, Also, there are some more link which describes basic functions used with AngularJS.

(1) AngularJS — Superheroic JavaScript MVW Framework

(2) What Is Angular?

(3) AngularJS Introduction

(5) AngularJS: Tutorial: -2 - Angular Templates

(4) W3School Angular JS 
AngularJS Tutorial 
AngularJS Introduction 
AngularJS Expressions - 
AngularJS Directives - 
AngularJS Controllers 
AngularJS Filters
AngularJS HTML DOM 
AngularJS Events 
AngularJS Modules 
AngularJS Application 

(7) Angular JS: API Reference

Error : Service data not get refresh in IE8 from Client Side

I face problem of Data not refresh from client side when we are working with IE. I found this problem while i am working with IE8 and above.

Problem is like, in my MVC Single Page Application, when we are fetching any data from client side for first time it will get data perfectly but subsequent call for same data or some back and forth to some other location give me previous unchanged data which are cached. But, after a bit of googling following line of code works for me and resolved my problem.

This line of code i put in "_layout.cshtml" header section and it works for me and then after it gives me refreshed data view.

The above line of code works fine for me and resolved my problem.

Working with Conditional Comments

Here are some links about Conditional Statements.

Conditional comments are statements interpreted by Microsoft Internet Explorer in HTML source code. Conditional comments can be used to provide and hide code to and from Internet Explorer.

(1) About conditional comments

(2) Conditional comments

(3) Conditional comment

(4) Conditional comments of IE
     
      

Error - A potentially dangerous Request.Path value was detected from the client

During calling REST service from client end i came across the below error..

"A potentially dangerous Request.Path value was detected from the client"

For this, i found following solution in web.config file of REST end and it works for me


- For httpruntime put requestpathinvalidcharacters="" & requestvalidationmode="2.0"
- For pages put validaterequest="false" 
- Both of these tags are located under configuration --> system.web

Also, there are some useful links too for this error
(1) Getting “A potentially dangerous Request.Path value was detected from the client (&)”

(2) A potentially dangerous Request.Path value was detected from the client (*)