[shaliniMember]

Hi Peter,

Thanks for your reply.
But this has only next and prev buttons with label.
But i require all four buttons (first, prev, next and last).
It should also include go to page option.
Kindly help me.

Regards,
Shalini S.

[shaliniMember]

$(document).ready(function () {
var theme = ‘ui-redmond’;
// Create jqxTree
$(‘#jqxTree’).jqxTree({ theme: theme, height: ‘100%’, width: ‘100%’ });
$(“#splitter”).jqxSplitter({ theme: theme, width: 650, height: 400, panels: [{ size: 250}] });

$(‘#jqxTree’).bind(‘select’, function (event) {

var args = event.args;
var item = $(‘#jqxTree’).jqxTree(‘getItem’, args.element);

if(item.label == ‘Today’)
{
alert(item.label);
//create buttons
$(‘#saveButton’).jqxButton({ theme: theme, width: ’70px’ });
$(“#ContentPanel”).html(” Today “);

}

if(item.label == ‘Contacts’)
{
alert(item.label);
//create buttons
$(‘#quitButton’).jqxButton({ theme: ‘ui-redmond’, width: ’70px’ });
$(“#ContentPanel”).html(“”);
}
//$(“#ContentPanel”).html(“

” + event.args.element.id + “

“);

});
});

[shaliniMember]

Hi Peter,

Thanks for your response. Hoping to see this feature in the nearly release. 🙂

Best Regards,
Shalini S.

[shaliniMember]

Hi Dimitar,

Thank you so much for your example. It worked as expected. 🙂

I have tried this example with JSon input as file. It also works fine. But i have used in a different way. Please tell me if it is fine to use it this way. See the below file:

This example shows how to create a Grid from JSON data.

$(document).ready(function () {

$.getJSON(‘dyna_col.txt’, function(data)
{
var columns = data[0].columns;
var rows = data[1].rows;
// prepare the data
var source =
{
datatype: “json”,
id: ‘id’,
localdata: rows

};
var dataAdapter = new $.jqx.dataAdapter(source);

$(‘#jqxgrid’).jqxGrid({
width: 670,
autoheight: true,
theme: ‘energyblue’,
rowsheight: 15,
altrows: true,
pageable: true,
sortable: true,
filterable: true,
source: dataAdapter,
pagesize: 5,
columnsresize: true,
columns: columns
});
});

});

dyna_col.txt file:
[{ “columns”: [{ “text”: “ID”, “datafield”: “id”, “width”: “100” }, { “text”: “Name”, “datafield”: “name”, “width”: “250” }, { “text”: “Beverage Type”, “datafield”: “type”, “width”: “250” }, { “text”: “Calories”, “datafield”: “calories”, “width”: “180” }, { “text”: “Total Fat”, “datafield”: “totalfat”, “width”: “120” }, { “text”: “Protein”, “datafield”: “protein” } ] },

{“rows” : [{“id”: “1”, “name”: “Hot Chocolate”, “type”: “Chocolate Beverage”, “calories”: “370”, “totalfat”: “16g”, “protein”: “14g”}, {“id”: 2, “name”: “Peppermint Hot Chocolate”, “type”: “Chocolate Beverage”, “calories”: “440”, “totalfat”: “16g”, “protein”: “13g”}, {“id”: “3”, “name”: “Salted Caramel Hot Chocolate”, “type”: “Chocolate Beverage”,”calories”: “450”, “totalfat”: “16g”, “protein”: “13g”}]}

]

[shaliniMember]

Hi Dimitar,

Thanks for your response. Can you please provide me an example where i can use AJAX and Json data to display the columns and it’s values dynamically?

Regards,
Shalini S.

[Author]

Posts