Hello team,

I have the following code in the reloado link:    http://code.reloado.com/osadug4/edit#html

Basically as seen in the reloado link, I have two datalists and an up and down button. One has checkboxes and the other is just a plain datalist. The data is visible in the second datalist only after the checkbox is checked in the first datalist.
The "Selectbox example" column section has just been added to demonstrate the up and down movement of a single option tag or multiple option tags in the multiple selectbox.

I've managed to add and remove the elements from the second datagrid after checking and unchecking respectively. However, I'm stuck and I have a few questions:

1) Is it possible to set the width as auto in both the datalists?
2) How can I cause the checkAll event of the first datalist to add all the checked items into the second datalist on load of the first datalist?
3) Is it possible to move selected element(s) of the second datalist up and down using the up and down buttons just like the multiple select box counterpart?
4) How can I update the checkedRows1 global variable accordingly to the up and down button clicked in the datalist 2 column??

Thanks and Regards,
Darrel

In  my case i am not able to use the columnMoving feature  along with the enableFilter feature Why is this so? My Source Code is as follows : -

$("#RESULT_TABLE"+i).datagrid({
         columns: colData,
         data: rowData,
         singleSelect:true,
         sortable:true,
         multiSort: true,
         remoteSort: false,
         height:'auto',
         pagination:true,
         striped: true,
         rownumbers: true,
         idField:'col0',
         selectOnCheck: false,
         checkOnSelect: false,
         onCheck:onCheck,
         onUncheck:onUncheck,
         onCheckAll: function(){
            checkAll_Rows(this);
         },
         onUncheckAll: function(){
            UncheckAll_Rows(this);
         },
      });   
   }
   //$("#RESULT_TABLE" + i).datagrid('loaded');
   $("#RESULT_TABLE" + i).datagrid('clientPaging');

   
   

//DataGrid - show required columns start
   

   $("#RESULT_TABLE" + i).datagrid({onHeaderContextMenu: function(e, field){
         e.preventDefault();
         if (!cmenu){
            createColumnMenu("#RESULT_TABLE" + i);
         }
         cmenu.menu('show', {
            left:e.pageX,
            top:e.pageY
         });
      }
   });
//DataGrid - show required columns end

   $("#RESULT_TABLE" + i).datagrid('columnMoving');

//DataGrid - enable filter
   $("#RESULT_TABLE" + i).datagrid('enableFilter');

I have a problem with the datagrid footer...... it is not getting displayed what can be the issue ... need help!

My Json is as follows:-

{"TABLE0":{"TABLE_DATA":{"ROW_DATA":[{"HASH_WHERE":"@PARAM11:PBTEST01,@PARAM01:DARRTEST01,@PARAM1:DARRTEST01","WI_SID":"WDL_101","tbl_header_code":"PBTEST01","tbl_header_desc":"PBTEST01PBTEST01PBTEST01PBTEST01PBTEST01PBTEST01","ENTITY":"UNMAPPED","col8":"30","col9":"UNMAPPED","col6":"NSCCL","col7":"3","col4":"NSE","col5":"J P MORGAN INDIA PVT LTD","col2":"05/04/2015","col3":"0001BON1","col0":"DARRTEST01","col1":"03/04/2015"}],"COL_DATA":[[{"formatter":"createLink","field":"col0","width":"20.0%","sortable":"true","title":"Transaction Reference","halign":"center","align":"center"},{"field":"col1","width":"20.0%","sortable":"true","title":"Trade Date","halign":"center","align":"center"},{"field":"col2","width":"20.0%","sortable":"true","title":"CSD","halign":"center","align":"center"},{"field":"col3","width":"20.0%","sortable":"true","title":"Instrument Name","halign":"center","align":"center"},{"field":"col4","width":"20.0%","sortable":"true","title":"Exchange","halign":"center","align":"center"},{"field":"col5","width":"20.0%","sortable":"true","title":"Broker Name","halign":"center","align":"center"},{"field":"col6","width":"20.0%","sortable":"true","title":"Counter Party","halign":"center","align":"center"},{"field":"col7","width":"20.0%","sortable":"true","title":"Quantity","halign":"center","align":"center"},{"field":"col8","width":"20.0%","sortable":"true","title":"Net Settlement Amount (INR)","halign":"center","align":"center"},{"field":"col9","width":"20.0%","sortable":"true","title":"Trade Status","halign":"center","align":"center"}]],"footer":[{"name":"Total","price":282.35},{"name":"Average","price":31.37}]}}}



and the datagrid that i am forming has the following attributes:-

$("#RESULT_TABLE"+i).datagrid({
      columns: colData,
      data: rowData,
      singleSelect:true,
      sortable:true,
      multiSort: true,
      remoteSort: false,
      height:'auto',
      pagination:true,
      striped: true,
      rownumbers: true,
      showFooter:true
   });

    $("#RESULT_TABLE" + i).datagrid('clientPaging');


That rows and columns are properly getting diaplyed but the footer is not getting displayed.....

Hello,

My scenario is such that, whenever I move any div inside the portal panel to a new position, it reloads/submits the page.
Is it possible to prevent the code from getting reloaded/submitted using the portal extension? I don't want the page to get submitted after moving the div.....

Regards,
Darrel.

Hello,

I'm stuck in a scenario in the datagrid. There are two scenarios:
1) When I click on the header checkbox, all the records get selected on the page. But when I submit the form, I get no values from the grid since it has not pushed any values into the array.
2) But in the current page, if I independently choose all the checkboxes on the grid one by one, without selecting the header checkbox, then the select all checkbox in the header also get's checked automatically. And when I submit, I get the values due to the onCheck function written during the datagrid initialization.

Code snippet is as follows:

Code:

var checkedRows = [];

function onCheck(index,row)
{
	for(var i=0; i<checkedRows.length; i++)
	{
		if (checkedRows[i].chkBoxVal == row.chkBoxVal)
		{
				return;
		}
	}
	checkedRows.push(row);
}


function onUncheck(index,row)
{
	for(var i=0; i<checkedRows.length; i++)
	{
		if (checkedRows[i].chkBoxVal == row.chkBoxVal)
		{
			checkedRows.splice(i,1);
			return;
		}
	}
}

$('#PICKLIST_TABLE').datagrid({
	url: ajax_url,
	idField:'chkboxVal',
	pagination: true,
	pagePosition: 'both',
	multiSort:true,
	rownumbers:true,
	striped:true,
	selectOnCheck: false,
	checkOnSelect: false,
	onCheck:onCheck,
	onUncheck:onUncheck,
	fitColumns: true
});

Is it possible to attach some event/method to the header checkbox of the datagrid, so that I can get all the rows checked in the current page??
Also is it possible to add the elements in the array whenever the select all check box is ticked. Also if a pagination event occurs to another page, the elements should be added in the array automatically on pagination as well in case of select all checkbox being ticked??

Regards,
Darrel.

Hello anugrast,

Please could share some code that you've done so far, so that I would be able to understand your scenario better. If possible could you add it in as a reloado code using the following url: http://code.reloado.com

Regards,
Darrel

How do i restrict the no. of digits that can be entered by the user in a numberbox?

Hello stworthy,

Thanks a lot, it works now

Regards,
Darrel.

Hello,

I have the following code in the reloado link mentioned as follows: http://code.reloado.com/exazuq/2/edit

I require a few things to be done:
1) The value from the date box must be the date mentioned inside the value attribute of the input box. As seen in the reloado code the date in the value is 26/09/2016 but however it is populating the current system date there. I want the date to be set as 26/09/2016 only until/unless the user changes it from the calendar.
2) On trying to change the date from the calendar that opens up, the date does not get changed. How can I enable the date to get changed accordingly.
3) When I submit the form, with a valid date, still it highlights the datebox in red indicating that there is some error in the field.

Please could you guide me on, how these problems can be solved.

Regards,
Darrel.

Hello jarry,

Thanks for pointing out my mistake. I managed to get the elements in the dropdown. I modified the code as follows:

Code:

$('#country').combobox('textbox').bind('blur', function(e){
	var country = $('#country').combobox('getValue');

	$.getJSON('ajaxAction', {
		countryName : country
	}, function(jsonResponse) {
		$('#ajaxResponse').text(jsonResponse.dummyMsg);

		var dropdown_Data = [];
		var dataStr = "";
		$('#states').combobox({data: []});
		$.each(jsonResponse.stateMap, function(key, value) {
			/* dropdown_Data eg data: {'val':'1','text':'KERALA'},{'val':'2','text':'TAMIL NADU'},{'val':'3','text':'JAMMU KASHMIR'},{'val':'4','text':'ASSAM'},{'val':'5','text':'MAHARASHTRA'},{'val':'6','text':'PUNJAB'} */
			dataStr = "";
			dataStr += "{\'val\':" + "'" + key + "',";
			dataStr += "\'text\':" + "'" + value + "'}";
			dropdown_Data.push(dataStr);
		});

                //Added the following line to parse it to JSON
                dropdown_Data = JSON.parse("[" + dropdown_Data + "]");
					
		console.log("dropdown_Data: " + dropdown_Data);
				
		$('#states').combobox({
			valueField: 'val', textField: 'text',
			data: dropdown_Data
		});
	});
});

Thanks once again!!!!!!!

Regards,
Darrel.

Hello,

I've managed to create a combobox which loads the data using an ajaxCall. The reloado code for the same is as follows: http://code.reloado.com/uzenol3/edit#html,live

However, I'm facing one problem in my code. When the data is loaded in the "states" combobox. I'm not able to see the values of the combobox. However when I hover over the open dropdown panel, the elements get selected but I can only see only see blue lines. This shows that the elements are present in the dropdown however, the data isn't visible. I've highlighted the same in red in the attachment.

What am I doing wrong?? Do I need to give some height or something for the elements as well.

Regards,
Darrel.

Hello stworthy,

Thanks a lot for your reply. I managed to make the datagrid show only 10 rows after your suggestion for referring to the client side pagination demo.

For those who who would like to see the code, the modified reloado code is as follows:
http://code.reloado.com/akegic3/4/edit

Regards,
Darrel

Hello,

Is it possible to maintain a default page size of 10 irrespective of the number of records that are passed as the "rowdata" object in the datagrid. The reloado code for the same is as follows: http://code.reloado.com/akegic3/edit#html,live

As seen in the above reloado code, there are 14 records that are passed as row data for the datagrid. I also observed that the number of pages shown is two which is correct, however all the records are displayed in the same page. If I fiddle around with the page size settings the number of pages also changes as expected. However I would like that only 10 records are displayed no matter how many records are present in the row data object.

I know it is possible to achieve the same using the url property of the datagrid and also by passing the "total" in the json object while using this url property.
But is it possible with a hardcoded json object as in the reloado code??

Regards,
Darrel.

Hey stworthy,

Thanks a lot You saved the day for me. I saw the silly mistake that I was doing in the code.

Thanks & God bless you!!!!

Regards,
Darrel.

Hello stworthy,

I've done the changes as per your suggestions. The sub-columns are visible but however they give an error on page and after that it is visible. Also the rows are not visible.

I've added the reloado code for the same. Please could you tell me what I'm doing wrong in the code: http://code.reloado.com/uxuyun3/edit#html,live

Regards,
Darrel.