[sathiyaseelan8Participant]

hi martin

i couldn’t able to see the demo. is that the correct link?

[sathiyaseelan8Participant]

hi Martin,

thank you for the reply. here is my code:

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%' },
	        ]
	    });
	}

[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 });
      
	});

[sathiyaseelan8Participant]

hi Hristo,

thanks for the help.

[sathiyaseelan8Participant]

hi Hristo,

var data1 = [
{ counts: 1, date: “03/09/2018” },
{ counts: 1, date: “03/12/2018” },
{ counts: 1, date: “03/22/2018” },
{ counts: 1, date: “03/24/2018” }
];

var data2 = [
{ countsTicketSolved: 1, date: “03/21/2018” },
{ countsTicketSolved: 1, date: “03/22/2018” },
{ countsTicketSolved: 2, date: “03/26/2018” },
{ countsTicketSolved: 6, date: “03/27/2018” },
{ countsTicketSolved: 2, date: “03/28/2018” },
{ countsTicketSolved: 1, date: “03/30/2018” },
];

if you see data1 and data2, the month in your date is ’03’. but why the tooltip at the chart, the month shows as ’02’?

[sathiyaseelan8Participant]

thanks hristo. it works now.

btw i have another question, the month of date for your data1 and data2 is 03 but why at the line chart the month is 02??

[sathiyaseelan8Participant]

hi dimitar,

sometimes jqxgrid refused to load data if there are more than 5000 records. in this case, is there a way to customize “no data to display” to any other message?

[sathiyaseelan8Participant]

is there a way where i can call a function when the returned data is NULL?

[sathiyaseelan8Participant]

thank for your response.

its not working. it still displaying the grid with no data to display message.

from where you get the ‘records’. do i need to declare it somewhere?

[sathiyaseelan8Participant]

hi Nadezhda

i still could not find a solution for this. is there any other way to solve it.

i try changed async : true but it still not working.

thank you

[sathiyaseelan8Participant]

hi Nadezhda

is that means your solution only works for local data? how if i want to create hyperlink using JSON method?

thanks

[sathiyaseelan8Participant]

hi Nadezhda

i tried to run your above example and its working. i can see the hyperlinks on the child value of a child.

but when i applied it into my program, its not working.

below is my code:

 var disp_tree = function() {
				$('#jqxTree').html('<img src="js/jqwidgets/resources/loader_2.gif"><img>');
			
				var search = document.getElementById('txt_input').value;
				var cate = document.getElementById('ddl_list').value;
				
				var source =
					{
						datatype: 'json',
						datafields: [
							{ name: 'id' },
							{ name: 'parentid' },
							{ name: 'text' },
							{ name: 'value' }
						],
						//theme: theme,
						url: 'tree_view.php?search='+search+"&cate="+cate,
						id: 'id',
						//root: 'data',
						async: false
					};
					// create data adapter.
					var dataAdapter = new $.jqx.dataAdapter(source);
					// perform Data Binding.
					dataAdapter.dataBind();
					// get the tree items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents 
					// the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter 
					// specifies the mapping between the 'text' and 'label' fields. 
					var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]);
					$('#jqxTree').jqxTree({ source: records, width: '300px'});
					// create hyperlinks
					var treeItems = $('#jqxTree').jqxTree('getItems');
					for (var i = 0; i < treeItems.length; i++) {
						if (treeItems[i].level == 2) {
							alert(treeItems[i].label);
							$('#jqxTree').jqxTree('updateItem', treeItems[i], { label: "<a target='_blank' href='http://www.jqwidgets.com/'>" + treeItems[i].label + "</a>" });
						}
					}
				};

here is my JSON data:

[{"id":"0000003802","parentid":"-1","text":"|aDARI HATI KA HATI","value":""},
{"id":"0000004598","parentid":"-1","text":"|aLAMBAIAN (tajuk album)","value":""},
{"id":"0000004904","parentid":"-1","text":"|aSOLEHAH - NIKMAT ALLAH (ALBUM)","value":""},
{"id":"0000004859","parentid":"-1","text":"|aTAFAKUR ( tajuk album)","value":""},
{"id":"0000076072","parentid":"0000003802","text":"MALAY","value":""},
{"id":"0000079660","parentid":"0000004598","text":"MALAY","value":""},
{"id":"0000081004","parentid":"0000004904","text":"MALAY","value":""},
{"id":"0000080747","parentid":"0000004859","text":"MALAY","value":""},
{"id":"0000029209","parentid":"0000076072","text":"ILMU KEBAHAGIAAN HIDOP PIRING HITAM EP LULUS","value":""},
{"id":"0000032743","parentid":"0000079660","text":"ILMU CD","value":""},
{"id":"0000034073","parentid":"0000081004","text":"ILMU DAN AMAL CD","value":""},
{"id":"0000033825","parentid":"0000080747","text":"ILMU AKHIRAT CD","value":""}]

thanks

[sathiyaseelan8Participant]

hi Nadezhda,

thank you so much for your respond.

now my concern is, i am getting data for JQXTREE using JSON method which pull data from database. i need to create hyperlink for all the child of child.

if i follow your method as below:
$(‘#15’).wrap(‘‘);

then i need to declare link for all the child one by one manually. i might display thousand rows of data, declaring link one by one is not a good idea i guess.

is there any other way??

thanks

[sathiyaseelan8Participant]

hi nadezhda,

thank you so much. it working now..

[sathiyaseelan8Participant]

hi dimitar,

i still couldn’t abble to get the sum.

here is my code.

var othr_mod = function (maint_no){
			var clnt_cod = document.getElementById('clnt_cod').value;

            var source =
            {
                datatype: "json",
				id: 'sq_no',
				url: 'include/display_maint_tab.php?dis_othr_mod=true&maint_no='+maint_no,
				
				addrow: function (rowid, rowdata, position, commit) {
					var maint_no = document.getElementById('input_maint_no').value;
					var data = "add_othr_mod=true&maint_no="+maint_no+"&clnt_cod="+clnt_cod;
                    alert(data);
					$.ajax({
						datatype: 'json',
						type: 'get',
						url: 'include/display_maint_tab.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
							document.getElementById('input_maint_no').value = data;
							othr_mod(data);
                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }					
					});
                },
                datafields:
                [
					{ name: 'mod_name' },
                    { name: 'cont' },
					{ name: 'price' }
                ],
				updaterow: function (rowid, rowdata, position, commit) {
                    var data = "update_othr_mod=true&row_id="+rowid+"&mod="+rowdata.mod_name+"&cont="+rowdata.cont+"&price="+rowdata.price;
					alert(data);
                    $.ajax({
                        dataType: 'json',
                        url: 'include/display_maint_tab.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // update command is executed.
                            commit(true);
                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }
                    });
                },
				deleterow: function (rowid, rowdata, position, commit) {
					var data = "del_othr_mod=true&row_id="+rowid;
                    $.ajax({
                        dataType: 'json',
                        url: 'include/display_maint_tab.php',
                        data: data,
                        success: function (data, status, xhr) {
                            // remove command is executed.
							othr_mod(maint_no);
                            commit(true);
                        },
                        error: function () {
                            // cancel changes.
                            commit(false);
                        }
                    });
				},
				
            };
			
			var cellbeginedit = function (row, datafield, columntype, value) {
                if (datafield == 'comp_date' || datafield == 'stat' || datafield == 'job_id' || datafield == 'se' || datafield == 'scr_no') return false;
            }
			
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: '100%',
				//height: 600,
				autoheight: true,
                source: dataAdapter,
                editable: true,
				selectionmode: 'singlerow',
                //editmode: 'selectedrow',
                theme: theme,
				//showaggregates: true,
				showstatusbar: true,
				renderstatusbar: function (statusbar) {
                    // appends buttons to the status bar.
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../main_include/images/add2.png'/><span style='margin-left: 4px; position: relative; top: 0px;'>Add</span></div>");
                    var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../main_include/images/close.png'/><span style='margin-left: 4px; position: relative; top: 0px;'>Delete</span></div>");
                    var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../main_include/images/refresh.png'/><span style='margin-left: 4px; position: relative; top: 0px;'>Reload</span></div>");
                    //var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../main_include/images/search.png'/><span style='margin-left: 4px; position: relative; top: 0px;'>Find</span></div>");
					
                    container.append(addButton);
                    container.append(deleteButton);
                    container.append(reloadButton);
                    //container.append(searchButton);
                    statusbar.append(container);
					
                    addButton.jqxButton({  width: 60, height: 15, theme: theme });
                    deleteButton.jqxButton({  width: 65, height: 15, theme: theme });
                    reloadButton.jqxButton({  width: 65, height: 15, theme: theme });
                    //searchButton.jqxButton({  width: 50, height: 15, theme: theme });
					
                    // add new row.
                    addButton.click(function (event) {
                       var commit = $("#jqxgrid").jqxGrid('addrow', {}, {});
                    });
                    // delete selected row.
                    deleteButton.click(function (event) {
                        var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                        var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
						var commit = $("#jqxgrid").jqxGrid('deleterow', id, {});
                    });
                    // reload grid data.
                    reloadButton.click(function(event) {
                         othr_mod(document.getElementById('input_maint_no').value);
                    });
                    // search for a record.
                   /* searchButton.click(function (event) {
                        var offset = $("#jqxgrid").offset();
                        $("#jqxwindow").jqxWindow('open');
                        $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
                    });*/
                },
				
                //selectionmode: 'singlecell',
                columns: [
					{ text: 'Item', datafield: 'mod_name'},
					{ text: 'Sub Contractor', datafield: 'cont', width: 130 },
					{ text: 'Price', datafield: 'price', width: 80}
                ]
            });
        };

[Author]

Posts