Reload grid with new source data

[sathiyaseelan8Participant]

hi,

i have created a grid which will be display on document.ready and reload the grid data each time user select month and year.

As for now i create new source whenever user press submit, after year and month are selected. is that a good way of doing it? or have any better way?

need your suggestions.

$(document).ready( function() {
	var theme = 'ui-redmond';

	var ticketsViewGrid = function()
	{
		var year 	= $('#year').val();
		var month 	= $('#month').val();

		// prepare chart data as an array  
	    var source =
	    {
	        dataType: "json",
	        dataFields: [
	            { name: 'id', type: 'int' },
	            { name: 'subject', type: 'string' },
	            { name: 'username', type: 'string' },
	            { name: 'ticket_status', type: 'string' },
	            { name: 'priority', type: 'string' },
	            { name: 'country', type: 'string' },
	            { name: 'created_datetime', type: 'date' }
	        ],
	        url: '/ajax/ajaxticketsViewGrid',
	        data: {
	        	year: year,
	        	month: month
	        },
	        sortcolumn: 'id',
            sortdirection: 'desc'
	    };

	    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

	    $("#grid").jqxGrid(
	    {
	    	theme: theme,
	        source: dataAdapter,
	        width: '100%',
	        autoheight: true,
	        pageable: true,
	        sortable: true,
	        showsortmenuitems: false,
	        filterable: true,
	        /*columnmenuopening: function (menu, datafield, height) {
	            menu.width(200);
	        },*/
	        columns: [
	          { text: 'Id', datafield: 'id', width: '5%'},
	          { text: 'Subject', datafield: 'subject', width: '40%' },
	          { text: 'Priority', datafield: 'priority', width: '10%' },
	          { text: 'Country', datafield: 'country', width: '10%' },
	          { text: 'Requester', datafield: 'username', width: '10%' },
	          { text: 'Status', datafield: 'ticket_status', width: '10%' },
	          { text: 'Requested Date', datafield: 'created_datetime', cellsformat: 'ddd, MMM dd, yyyy', width: '15%' },
	        ]
	    });
	}

	ticketsViewGrid();

	$( "#submit" ).on( "click", function() {
		var year 	= $('#year').val();
		var month 	= $('#month').val();

		// prepare chart data as an array  
	    var source =
	    {
	        dataType: "json",
	        dataFields: [
	            { name: 'id', type: 'int' },
	            { name: 'subject', type: 'string' },
	            { name: 'username', type: 'string' },
	            { name: 'ticket_status', type: 'string' },
	            { name: 'priority', type: 'string' },
	            { name: 'country', type: 'string' },
	            { name: 'created_datetime', type: 'date' }
	        ],
	        url: '/ajax/ajaxticketsViewGrid',
	        data: {
	        	year: year,
	        	month: month
	        },
	        sortcolumn: 'id',
	        sortdirection: 'desc'
	    };

	    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
	    
	    $("#grid").jqxGrid({ source: dataAdapter });
      
	});
})

[StanislavParticipant]

Hello sathiyaseelan8,

Do you mean something like this: Link?
It is an example of date range selection, that filters the data from the range you have selected.

You want to select a date/year and filter the grid data only for that selection, right?
If that is the case, I would suggest you enable the filtertype: 'date',, It will show you the calendar, from which you can select a range or a data.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[sathiyaseelan8Participant]

hi stanislav,

thank you for the reply.

i never meant something like the link. If u see in my code below, i created another new source when user clicked the submit button. Is there a way where i can use the earlier source with updated ‘year’ and ‘month’ values instead of creating a new source?

( "#submit" ).on( "click", function() {
		var year 	= $('#year').val();
		var month 	= $('#month').val();

		// prepare chart data as an array  
	    var source =
	    {
	        dataType: "json",
	        dataFields: [
	            { name: 'id', type: 'int' },
	            { name: 'subject', type: 'string' },
	            { name: 'username', type: 'string' },
	            { name: 'ticket_status', type: 'string' },
	            { name: 'priority', type: 'string' },
	            { name: 'country', type: 'string' },
	            { name: 'created_datetime', type: 'date' }
	        ],
	        url: '/ajax/ajaxticketsViewGrid',
	        data: {
	        	year: year,
	        	month: month
	        },
	        sortcolumn: 'id',
	        sortdirection: 'desc'
	    };

	    var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
	    
	    $("#grid").jqxGrid({ source: dataAdapter });
      
	});

[StanislavParticipant]

Hello sathiyaseelan8,

Do you mean something like this: Link

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts