Develop Reference

How to change kendo mvc grid PageSize according to screen size?

I want to know, Do you have any solution for dynamic change PageSize?
If i expand my question, I want to show my grid in 10 element default but when i want to show it in big screen i want to show in 20 or 30 element?
Is there any solution for it?

There are two cases, an initial set of pageSize by window height and on window resize set of pageSize.
On page load, fetch window size and set pageSize according to height:
var pageSize = 10;
var windowHeight = $(window).height();
console.log(windowHeight)
switch(true) {
case windowHeight < 500:
pageSize = 5;
break;
case windowHeight < 600:
pageSize = 10;
break;
case windowHeight < 700:
pageSize = 15;
break;
}
$("#grid").kendoGrid({
columns: [
{ field: "productName" },
{ field: "category" }
],
dataSource: {
data: [
{ productName: "Tea", category: "Beverages" },
{ productName: "Coffee", category: "Beverages" },
{ productName: "Water", category: "Beverages" },
{ productName: "Juice", category: "Beverages" },
{ productName: "Decaffeinated Coffee", category: "Beverages" },
{ productName: "Iced Tea", category: "Beverages" },
{ productName: "Ham", category: "Food" },
{ productName: "Bread", category: "Food" },
{ productName: "Eggs", category: "Food" },
{ productName: "Bacon", category: "Food" },
{ productName: "Chips", category: "Food" },
{ productName: "Fish", category: "Food" }
],
pageSize: pageSize
},
pageable: {
pageSizes: true
}
});
If you are manually resizing window then track resize event and change grids page size:
$(window).resize(function() {
var windowHeight = $(window).height();
console.log(windowHeight)
switch(windowHeight) {
case 440:
var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize(5);
grid.refresh();
break;
case 590:
var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize(10);
grid.refresh();
break;
case 700:
var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize(15);
grid.refresh();
break;
}
});
Example: Page size by height
NOTE: I'm not user of C# or asp.net or kendo for asp so I'm not completely sure if this will work in your case. Also, this is a robust example, you will need to adapt it for your cases

Refresh Kendo dropdownlist after event change of another dropdownlist

When I change the value from the first ddl I get the data from Ajax of the other ddl but it doesnt refresh.
This is my grid
$("#grid").kendoGrid({
dataSource:
height: 500,
toolbar: ["create"],
columns: [
{ command: ["edit"], title: " ", width: "150px", locked: true },
{ field: "RowLabels", title: "Row Labels", width: "180px", locked: true },
{ field: "IdValueStream", title: "VS", width: "90px", locked: true, editor: vsDropDownEditor, template: "#=getVsName(IdValueStream)#" }, //, template: "#=IdValueStream.ValueStream#"
{ field: "IdLine", title: "Line", width: "180px", locked: true, editor: linesDropDownEditor }, //, template: "#=getLineName(IdLine)#"
{ field: "W1", title: Weeks[0].W1.substring(0, 10), width: "98px" }, //
{ field: "W2", title: Weeks[0].W2.substring(0, 10), width: "90px" },
{ field: "W3", title: Weeks[0].W3.substring(0, 10), width: "90px" },
{ field: "W4", title: Weeks[0].W4.substring(0, 10), width: "90px" },
{ field: "W5", title: Weeks[0].W5.substring(0, 10), width: "90px" },
{ field: "W6", title: Weeks[0].W6.substring(0, 10), width: "90px" },
{ field: "W7", title: Weeks[0].W7.substring(0, 10), width: "90px" },
{ field: "W8", title: Weeks[0].W8.substring(0, 10), width: "90px" },
{ field: "W9", title: Weeks[0].W9.substring(0, 10), width: "90px" },
{ field: "W10", title: Weeks[0].W10.substring(0, 10), width: "90px" },
{ field: "W11", title: Weeks[0].W11.substring(0, 10), width: "90px" },
{ field: "W12", title: Weeks[0].W12.substring(0, 10), width: "90px" },
{ field: "W13", title: Weeks[0].W13.substring(0, 10), width: "90px" }
],
editable: "inline"
});
This is the method from the editor of the first ddl
function vsDropDownEditor(container, options) {
$('<input id="ddlVs" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "ValueStream",
dataValueField: "Id",
dataSource: categories,
select: onSelect
});
}
And this the other method from editor of the second ddl
function linesDropDownEditor(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Line",
dataValueField: "Id",
dataSource: lines
});
}
So when I select an item of the first ddl I want to refresh the second ddl

Put an id attribute for your second dropdown then in onSelect function of ddVs you can add this line of code.
$("#nameOfYourSecondDropdownHere").data('kendoDropDownList').dataSource.read();

You can also check out the following example - Cascading DropDownLists used as editors in Grid:
Add Cascading DropDownList Editors

jqxGrid: conditionally add edit button per row

i have jqxGrid and display data fine using ajax request and everything is workig fine .
My problem : in grid coulmns i added edit button but i want to add this button conditionally depended on values of another field
My Code :
$(document).ready(function () {
$("#btnsearchHistory").click(function () {
var txtfrom = $('#txtfrom').val();
var txtto = $('#txtto').val();
var terminalId = $('#txtMerchantAccounthistory').val();
var SOFAccount = $('#txtsalesNumber').val();
var statMsg = $('#drpStatMsg').val();
var formatedData = '';
var totalrecords = 0;
if (txtfrom == "") {
alert("Select Valid From Date");
event.returnValue = false;
return false;
}
if (txtto == "") {
alert("Select Valid To Date");
event.returnValue = false;
return false;
}
var source = {
datatype: "json",
datafields: [
{ name: 'Id' },
{ name: 'TerminalId' },
{ name: 'UserName' },
{ name: 'Error' },
{ name: 'Date' },
{ name: 'SalesAccount' },
{ name: 'BillTypeCode' },
{ name: 'Amount' },
{ name: 'BillerCode' },
{ name: 'BankID' },
{ name: 'ReqId' }
],
sort: function () {
$("#grid").jqxGrid('updatebounddata', 'sort');
},
filter: function () {
$("#grid").jqxGrid('updatebounddata', 'filter');
},
beforeprocessing: function (data) {
var returnData = {};
data = data.d;
totalrecords = data.count;
returnData.totalrecords = data.count;
returnData.records = data.data;
if (data.data != null) {
return returnData;
}
return data;
},
type: 'Get',
sortcolumn: 'Id',
sortdirection: 'desc',
formatdata: function (data) {
data.pagenum = data.pagenum || 0;
data.pagesize = data.pagesize || 10;
data.sortdatafield = data.sortdatafield;
data.sortorder = data.sortorder || 'asc';
data.filterscount = data.filterscount || 0;
formatedData = buildQueryString(data);
return formatedData;
},
url: '/WS/WS.asmx/SearchTransferLog',
data: { fromDate: JSON.stringify(txtfrom), toDate: JSON.stringify(txtto), terminalId: JSON.stringify(terminalId), SOFAccount: JSON.stringify(SOFAccount), statMsg: JSON.stringify(statMsg) },
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: 'application/json; charset=utf-8',
loadError: function (xhr, status, error) {
alert(error);
}
});
var cols = [
{ text: 'Id', dataField: 'Id', hidden: true },
{ text: 'رقم حساب التاجر', dataField: 'TerminalId', width: '28%', align: "right", cellsalign: "right", hidden: true },
{ text: '', dataField: 'UserName', width: '28%', align: "right", cellsalign: "right", hidden: true },
{ text: 'الحالة', dataField: 'Error', width: '28%', align: "right", cellsalign: "right" },
{ text: 'تاريخ الدفع', dataField: 'Date', width: '18%', align: "right", cellsalign: "right" },
{ text: 'حساب الدفع', dataField: 'SalesAccount', width: '15%', align: "right", cellsalign: "right" },
{ text: 'توقعات الاغلاق على', dataField: 'BillTypeCode', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'القيمة المحولة', dataField: 'Amount', width: '15%', align: "right", cellsalign: "right" },
{ text: 'توقعات الاغلاق على', dataField: 'BillerCode', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'توقعات الاغلاق على', dataField: 'BankID', width: '15%', align: "right", cellsalign: "right", hidden: true },
{ text: 'توقعات الاغلاق على', dataField: 'ReqId', width: '15%', align: "right", cellsalign: "right", hidden: true },
{
text: '', datafield: 'Edit', columntype: 'button', width: '100px', cellsrenderer: function () {
return "استعلام عن الحالة";
}, buttonclick: function (row) {
var id = $("#detail_grid").jqxGrid('getcellvalue', row, "Id");
alert(id);
//RefreshTransferStatus();
}
}
];
$("#detail_grid").jqxGrid({
source: dataAdapter,
pageable: true,
autoheight: true,
virtualmode: true,
sorttogglestates: 1,
filterable: true,
sortable: true,
rtl: true,
altrows: true,
width: '100%',
rendergridrows: function (args) {
return args.data;
},
columns: cols
});
});
});

Setting default Value Inline Add Jqgrid

Currently I have a requirement in a system where I need to repeat much of the data from the last row entered.
Actualy this is my Grid:
$('#list').jqGrid({
colNames: ['VendedorId', 'Vendedor', 'Especie', 'Cabezas', 'Kilos', 'Precio', 'Guías Venta', 'Vencimiento'],
colModel: [
{ hidden: true, name: 'VendedorId' },
{ editable: true, width: 160, edittype: 'select', editoptions: { dataUrl: '/Clientes/CmbClientes' }, editrules: { required: true }, name: 'Vendedor' },
{ editable: true, width: 70, edittype: 'select', editoptions: { dataUrl: '/Especies/CmbEspecie' }, editrules: { required: true }, name: 'Especie' },
{ align: 'right', width: 50, editable: true, editoptions: { size: 3, maxlength: 3 }, editrules: { number: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Cabezas' },
{ align: 'right', width: 50, editable: true, editrules: { number: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Kilos' },
{ align: 'right', width: 50, editable: true, editrules: { number: true, required: true }, formatter: 'currency', formatoptions: { prefix: '$',decimalPlaces: 2 }, name: 'Precio' },
{ editable: true, width: 50, editoptions: { maxlength: 20 }, name: 'GuiasVenta' },
{ align: 'right', width: 70, editable: true, editoptions: { size: 3, maxlength: 3 }, editrules: { number: true, required: true }, formatter: 'number', formatoptions: { decimalPlaces: 0 }, name: 'Vencimiento' }
],
url: '#Url.Action("ListVendedores")',
datatype: 'json',
editurl: '#Url.Action("SaveVendedor")',
mtype: 'POST',
pager: '#vendedoresPager',
prmNames: { id: 'RemateId' },
rowList: [5, 10, 15, 20],
sortname: 'FeriaId',
viewrecords: true,
width: 850
}).jqGrid('navGrid', '#vendedoresPager', { add: false, edit: false, del:true ), search: false },{},{},{ url: '/Remates/BorrarVendedor' }).
jqGrid('inlineNav', '#vendedoresPager',
{
add : true,
edit : true,
save : true,
addParams: {
addRowParams: {
position: "afterSelected",
keys: true,
extraparam: {
...
}
}
},
editParams: {
keys: true,
extraparam: {
...
}
}
});
When adding the first row no default data, but then fields Vendedor, Especie, Guías Venta and Vencimiento should repeat the last entered.
In this scenario I imagine two possible solutions, one is using the event jqGridInlineEditRow, and the other is using autocomplete.
Have read this Question about qGridInlineEditRow. But in this case as I can get the data from the last row of the grid and how it should load the data into the new row.
And read this Question about autocomplete.
Maybe there other solutions that can read to get a better approximation to the solution.
Can anyone help?
update 15/04/2013
i replace the Add button for a custom button this is the code:
$("#Agregar").click(function () {
var parameters =
{
initdata: {},
position: "first",
useDefValues: true,
useFormatter: false,
addRowParams: {
keys: true,
extraparam: {
...
},
aftersavefunc: function (rowid) {
var grid = jQuery('#vendedores');
lastSavedAddData = grid.jqGrid("getRowData", rowid);
},
oneditfunc: function (rowid) {
var name;
var grid = jQuery('#vendedores');
for (name in lastSavedAddData) {
if (lastSavedAddData.hasOwnProperty(name)) {
$('#' + rowid +"_"+ name).val(lastSavedAddData[name]);
}
}
}
}
};
jQuery("#vendedores").jqGrid('addRow', parameters);
});
But this work only for text box but not for a combo

If I understand correctly your question the usage of jQuery UI Autocomplete is independent from initial filling of the input fields of the last added line during starting the next like to add.
It seems to me that you can save data saved in the last added line inside of aftersavefunc callback defined in addRowParams (or use jqGridInlineAfterSaveRow event alternatively). You can use oneditfunc to set the last entered values in the new like. For example you can use
addRowParams: {
position: "afterSelected",
keys: true,
extraparam: {
...
},
aftersavefunc: function (rowid) {
lastSavedAddData = $(this).jqGrid("getRowData", rowid);
},
oneditfunc: function (rowid) {
var name;
for (name in lastSavedAddData) {
if (lastSavedAddData.hasOwnProperty(name)) {
$("#" + $.jgrid.jqID(rowid + "_" + name)).val(lastSavedAddData[name]);
}
}
}
}
where lastSavedAddData should be defined in some outer scope. It's not tested code. I just wanted to show the main idea. You can extend the code of oneditfunc to support more different controls which you use in editing line.

Highcharts are not redraw

I am trying below codes in my C# page but my highcharts are not able to auto redraw.
It always remain same chart as when it was at first time load.
When I go to the view source of the page I can see new data but it not drawn.
Can anybody here help me out to find the problem
<script src="/_layouts/ChartDemo/jquery-1.7.min.js" type="text/javascript"></script>
<script src="/_layouts/ChartDemo/highcharts.js" type="text/javascript"></script>
<asp:Literal ID="lblErrorMsg" runat="server" Text=""></asp:Literal>
<script type="text/jscript">
function chart() {
$('#container').highcharts({
credits : {enabled :0 },
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
max: <%= MilliTimeStamp(_closingTime) %>,
min: <%= MilliTimeStamp(_openingTime) %>,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick : true,
gridLineWidth: 1
},
yAxis: {
title: {
text: null
},
tickInterval : <%= _tickIntervalY %>,
max : <%= _maxY %>,
min: <%= _minY %>,
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line : {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Price Index'
},
{
type: 'line',
name: 'Price',
color: 'Red',
index: -1
}]
});
var chart1 = $('#container').highcharts();
chart1.series[0].setData(<%=output3%>);
chart1.series[1].setData(<%=output%>);
}
$(document).ready(function() {
$.ajaxSetup({ cache: false});
chart();
setInterval(function() {chart();}, 5000);
});
</script>
<div id="container" style="Width:390px;Height:265px;" > </div >
<asp:Literal ID="lblIntraday" runat="server" Visible="false"></asp:Literal>
This is my View source
<script type="text/jscript">
function chart() {
$('#container').highcharts({
credits : {enabled :0 },
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
max: 1366210680000,
min: 1366189200000,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick : true,
gridLineWidth: 1
},
yAxis: {
title: {
text: null
},
tickInterval : 29,
max : 7024,
min: 6881,
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line : {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Price Index'
},
{
type: 'line',
name: 'Price',
color: 'Red',
index: -1
}]
});
var chart1 = $('#container').highcharts();
chart1.series[0].setData([[1366189200000,6939.37],[1366210680000,6939.37]]);
chart1.series[1].setData([[1366189931000,6938.64],[1366189997000,6939.4], [1366190063000,6938.53],[1366190129000,6943.05],[1366190195000,6942.73],[1366190261000,6943.86],[1366190327000,6944.75],[1366190393000,6941.99],[1366190459000,6941.99],[1366190525000,6945.68],[1366190591000,6943.87],[1366190657000,6947.65],[1366190723000,6942.59],[1366190789000,6941.3],[1366190855000,6943.45],[1366190921000,6946.95],[1366190987000,6949.75],[1366191053000,6952.11],[1366191119000,6950.53],[1366191185000,6951.58],[1366191251000,6953.94],[1366191317000,6954.86],[1366191383000,6955.88],[1366191449000,6957.07],[1366191515000,6956.87],[1366191581000,6956.45],[1366191647000,6958.76],[1366191713000,6956.84],[1366191779000,6956.97],[1366191845000,6955.68],[1366191911000,6957.18],[1366191977000,6960.6],[1366192043000,6959.11],[1366192109000,6960.15],[1366192175000,6960.79],[1366192241000,6962.1],[1366192307000,6964.19],[1366192373000,6963.18],[1366192439000,6966.65],[1366192505000,6964.51],[1366192571000,6963.36],[1366192637000,6960.11],[1366192703000,6958.91],[1366192769000,6959.24],[1366192835000,6955.61],[1366192901000,6955.03],[1366192967000,6955.27],[1366193033000,6954.94],[1366193099000,6954.32],[1366193165000,6953.34],[1366193231000,6951.17],[1366193297000,6951.88],[1366193363000,6955.12],[1366193429000,6956.47],[1366193495000,6954.09],[1366193561000,6953.49],[1366193627000,6953.49],[1366193693000,6953.49],[1366193759000,6953.49],[1366193825000,6953.49],[1366193891000,6953.49],[1366193957000,6953.49],[1366194023000,6953.49],[1366194089000,6953.49],[1366194155000,6953.49],[1366194221000,6953.49],[1366194287000,6953.49],[1366194353000,6953.49],[1366194419000,6953.49],[1366194485000,6953.49],[1366194551000,6953.49],[1366194617000,6953.49],[1366194683000,6953.49],[1366194749000,6953.49],[1366194815000,6953.49],[1366194881000,6953.49],[1366194947000,6953.49],[1366195013000,6953.49],[1366195079000,6953.49],[1366195145000,6953.49],[1366195211000,6953.49],[1366195277000,6953.49],[1366195343000,6953.49],[1366195409000,6953.49],[1366195475000,6953.49],[1366195541000,6953.49],[1366195607000,6953.49],[1366195673000,6953.49],[1366195739000,6953.49],[1366195805000,6953.49],[1366195871000,6953.49],[1366195937000,6953.49],[1366196003000,6953.49],[1366196069000,6953.49],[1366196135000,6953.49],[1366196201000,6953.49],[1366196267000,6953.49],[1366196333000,6953.49],[1366196399000,6953.49],[1366196465000,6953.49],[1366196531000,6953.49],[1366196597000,6953.49],[1366196663000,6953.49],[1366196729000,6953.49],[1366196795000,6953.49],[1366196861000,6953.49],[1366196927000,6953.49],[1366196993000,6953.49],[1366197059000,6953.49],[1366197125000,6953.49],[1366197191000,6953.49],[1366197257000,6953.49],[1366197323000,6953.49],[1366197389000,6953.49],[1366197455000,6953.49],[1366197521000,6953.49],[1366197587000,6953.49],[1366197653000,6953.49],[1366197719000,6953.49],[1366197785000,6953.49],[1366197851000,6953.49],[1366197917000,6953.49],[1366197983000,6953.49],[1366198049000,6953.49],[1366198115000,6953.49],[1366198181000,6953.49],[1366198247000,6953.49],[1366198313000,6953.49],[1366198379000,6953.49],[1366198445000,6953.49],[1366198511000,6953.49],[1366198577000,6953.49],[1366198643000,6953.49],[1366198709000,6953.49],[1366198775000,6953.49],[1366198841000,6953.49],[1366198907000,6953.49],[1366198973000,6953.49],[1366199039000,6953.49],[1366199105000,6953.49],[1366199171000,6953.49],[1366199237000,6953.49],[1366199303000,6953.49],[1366199369000,6953.49],[1366199435000,6953.49],[1366199501000,6953.49],[1366199567000,6953.49],[1366199633000,6953.49],[1366199699000,6953.49],[1366199765000,6953.49],[1366199831000,6953.49],[1366199897000,6953.49],[1366199963000,6953.49],[1366200029000,6953.49],[1366200095000,6953.49],[1366200161000,6953.49],[1366200227000,6953.49],[1366200293000,6953.49],[1366200359000,6953.49],[1366200425000,6953.49],[1366200491000,6953.49],[1366200557000,6953.49],[1366200623000,6953.49],[1366200689000,6953.49],[1366200755000,6953.49],[1366200821000,6953.49],[1366200887000,6953.49],[1366200953000,6953.49],[1366201019000,6953.49],[1366201085000,6953.49],[1366201151000,6953.49],[1366201217000,6953.49],[1366201283000,6953.49],[1366201349000,6953.49],[1366201415000,6953.49],[1366201481000,6953.49],[1366201547000,6953.49],[1366201613000,6953.49],[1366201679000,6953.49],[1366201745000,6953.49],[1366201811000,6953.49],[1366201877000,6953.49],[1366201943000,6953.49],[1366202009000,6953.49],[1366202075000,6953.49],[1366202141000,6953.49],[1366202207000,6953.49],[1366202273000,6953.49],[1366202339000,6953.49],[1366202405000,6953.49],[1366202471000,6953.49],[1366202537000,6953.49],[1366202603000,6953.49],[1366202669000,6953.49],[1366202735000,6953.49],[1366202801000,6953.49],[1366202867000,6953.49],[1366202933000,6953.49],[1366202999000,6953.49],[1366203065000,6953.49],[1366203131000,6953.49],[1366203197000,6953.49],[1366203263000,6953.49],[1366203329000,6953.49],[1366203395000,6953.49],[1366203461000,6953.49],[1366203527000,6953.49],[1366203593000,6953.49],[1366203659000,6953.49],[1366203725000,6953.49],[1366203791000,6953.49],[1366203857000,6953.49],[1366203923000,6953.49],[1366203989000,6953.49],[1366204055000,6953.49],[1366204121000,6953.49],[1366204187000,6953.49],[1366204253000,6953.49],[1366204319000,6953.6],[1366204385000,6954.76],[1366204451000,6954.75],[1366204517000,6953.47],[1366204583000,6950.78],[1366204649000,6949.79],[1366204715000,6949.41],[1366204781000,6951.84],[1366204847000,6950.22],[1366204913000,6947.8],[1366204979000,6949.15],[1366205045000,6949.23],[1366205111000,6950.83],[1366205177000,6952.41],[1366205243000,6952.42],[1366205309000,6950.59],[1366205375000,6951.86],[1366205441000,6953.94],[1366205507000,6954.89],[1366205573000,6954.11],[1366205639000,6952.1],[1366205705000,6951.83],[1366205771000,6953.92],[1366205837000,6956.96],[1366205903000,6956.65],[1366205969000,6957.34],[1366206035000,6955.55],[1366206101000,6954.53],[1366206167000,6954.29],[1366206233000,6955.17],[1366206299000,6954.43],[1366206365000,6954.11],[1366206431000,6951.62],[1366206497000,6955.09],[1366206563000,6953.16],[1366206629000,6954.58],[1366206695000,6953.19],[1366206761000,6953.71],[1366206827000,6952.52],[1366206893000,6949.97],[1366206959000,6951.15],[1366207025000,6949.91],[1366207091000,6950.05],[1366207157000,6949.72],[1366207223000,6948.89],[1366207289000,6949.17],[1366207355000,6950.68],[1366207421000,6946.5],[1366207487000,6948.74],[1366207553000,6949.1],[1366207619000,6950.1],[1366207685000,6950.64],[1366207751000,6950.16],[1366207817000,6949.36],[1366207883000,6950.28],[1366207949000,6950.92],[1366208015000,6947.01],[1366208081000,6946.68],[1366208147000,6945.1],[1366208213000,6940.49],[1366208279000,6941],[1366208345000,6941.92],[1366208411000,6940.79],[1366208477000,6938.13],[1366208543000,6940.11],[1366208609000,6941.44],[1366208675000,6938.81],[1366208741000,6939.83],[1366208807000,6942.09],[1366208873000,6941.54],[1366208939000,6941.58],[1366209005000,6942.39],[1366209071000,6940.98],[1366209137000,6939.87],[1366209203000,6940.65],[1366209269000,6941.29],[1366209335000,6940.24],[1366209401000,6940.26],[1366209467000,6943.39],[1366209533000,6944.74],[1366209599000,6948.32],[1366209665000,6950.42],[1366209731000,6950.06],[1366209797000,6945.72],[1366209863000,6945.49],[1366209929000,6944.25],[1366209995000,6942.01],[1366210061000,6942.06],[1366210127000,6940.87],[1366210193000,6939.34],[1366210259000,6939.76]]);
}
$(document).ready(function() {
$.ajaxSetup({ cache: false});
chart();
setInterval(function() {chart();}, 5000);
});

Well I come up with solution with making different page where I will generate series on Page Load method in json format and Response.write than I will call that page with $.ajax call to get the data and push it to the series. I will also call that page very 1 minute to get new data. Check out my code for client side which may help to somebody.
var options = {
chart : {
renderTo: 'container',
},
credits : {enabled :0 },
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
max: <%= MilliTimeStamp(_closingTime) %>,
min: <%= MilliTimeStamp(_openingTime) %>,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick : true,
gridLineWidth: 1,
labels : { style: {font: '7.5pt Trebuchet MS'}},
reversed: true // true for arabic layout and false for english layout
},
yAxis: {
title: {
text: null
},
tickInterval : <%= _tickIntervalY %>,
max : <%= _maxY %>,
min: <%= _minY %>,
labels : { style: {font: '7.5pt Trebuchet MS'}},
opposite : true // true for arabic layout and false for english layout
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line : {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: []
};
function recieveData()
{
$.getJSON('/_layouts/ChartDemo/AjaxTest.aspx', function(data) {
var series = {type: 'area',name: 'Price Index'}; // <-------------------- moved and changed to object
series.data = data;
options.series.push(series); // <-------- pushing series object
var series3 = {
type: 'line',
name: 'Price',
color: 'Red',
index: -1,
data : <%=output %>
};
options.series.push(series3);
var chart = new Highcharts.Chart(options);
while(chart.series.length > 2)
chart.series[1].remove(true);
});
}
$(document).ready(function() {
$.ajaxSetup({ cache: false });
recieveData();
setInterval("recieveData()", 100000);
});