[DollyBMember]

Hi Peter,

Thankx for your quick reply. The example you suggested doesn’t serve my purpose.
The contents in the popup say,
If I want to have Text Filed and Input type for its value in the modal popup, the Text should be the Column name and the Value should be the clicked cell value. How to acheive this?

Thankx
DollyB.

[DollyBMember]

Thank You.

I face one more issue now. I set one of the column cell as dropdownlist when I try to edit the cell.
I get this.listbox is null or not an object message when I click on dropdown. The dropdown is set for few cells itself.

Could you tell me why I am getting this message and why I am not able to see the dropdown for few cells?

var reqJsonAttrTemplate =  eval('(' + '<%=sJsonTemplate%>' + ')');	
var keys = [], props = [], rangeValues = [];		
		var dataf = [];
		var row = {};
		var i = 0;
		row["text"] ="name";
	    row["datafield"] ="name";	       
	    row["columntype"] = 'textbox'; 
	    row["width"] =  100;   
		row["pinned"] =  true;	 
		row["editable"] =  false;      
	    reqGridColumns[i] = row;		
		
		for (var attribute in reqJsonAttrTemplate) {		
			i++;
			row = {};
			props = 	reqJsonAttrTemplate [attribute];
			rangeValues = props["Range Values"]; 
			row["datafield"] = attribute;
			row["text"] =  props["Caption"];     //attribute +"["+props["Caption"]+"]";
			
			//Column Type Validation
			if(props["Integer"] == "true"){	
				alert('Integer: '+attribute);
				row["columntype"] = 'numberinput';
				row["initeditor"] = function (row, cellvalue, editor) {editor.jqxNumberInput({decimalDigits: 0, digits: 3});};				
			}else if(props["Date"] == "true"){				 
				alert('Date: '+attribute);
				row["columntype"] = 'datetimeinput'; 
			}else if(props["Range Use"] == "true" && props["Range Multiple"] == "false"){				
				alert('RangeUse and Multiple: '+attribute);
				row["columntype"] = 'dropdownlist';
			}else{				
			alert('Else: '+attribute);
				row["columntype"] = 'textbox'; 
			}
			row["width"] =  200;
			if(attribute == "Alias Tag"){
				row["editable"] =  false;
			}
			
			
			
	        reqGridColumns[i] = row;
}
 // initialize jqxGrid Requirements
            $("#jqxgridDR").jqxGrid(
            {
                width: 700,
                source: reqDataAdapter,
                editable: true,
                pageable: true,
				editmode: 'dblclick',
                autoheight: true,
                theme: theme,
                selectionmode: 'singlecell',
                columns: [                  
		  			{ text: 'name', datafield: 'name', columntype: 'textbox', width: 100, pinned: true, editable: false }                
                ]
            });	    
            // change columns collection. Requirments
            $("#jqxgridDR").jqxGrid({ columns: reqGridColumns });

And my JSonTemplate data looks like,

{
“RTC ID”:{
“Admin”:”false”,
“Force Modify”:”false”,
“Caption”:”RTC ID”,
“Description”:”Description11″,
“Alias Tag”:”false”,
“Subset Use”:”false”,
“Range Values”:”[]”,
“Range Use”:”false”,
“Range Multiple”:”false”,
“Range Item”:””,
“Range Locked”:”false”,
“Subset Values”:”[]”,
“ROWS”:”1″,
“Basic”:”false”,
“Subset Master”:”false”,
“Sequence Order”:”0″,
“Date”:”false”,
“Sort Order”:”61″,
“Mandatory”:”false”,
“Locked”:”false”,
“Integer”:”false”

},

“Sub Category”:{
“Admin”:”false”,
“Force Modify”:”false”,
“Caption”:”Sub Category”,
“Description”:”Description16″,
“Alias Tag”:”false”,
“Subset Use”:”false”,
“Range Values”:”[None, Counter, Event]”,
“Range Use”:”true”,
“Range Multiple”:”true”,
“Range Item”:”list”,
“Range Locked”:”false”,
“Subset Values”:”[]”,
“ROWS”:”1″,
“Basic”:”false”,
“Subset Master”:”false”,
“Sequence Order”:”0″,
“Date”:”false”,
“Sort Order”:”13″,
“Mandatory”:”false”,
“Locked”:”false”,
“Integer”:”false”

}}

[DollyBMember]

It works now. I forgot to regresh Grid after updating the value.

[DollyBMember]

Hi Minko,

It doesn’t work for me.

[DollyBMember]

Hi Minko,

I am using jQuery 1.7.2 .
Tell me whether it is possible to open another modal Window while a modal Window is already open?

Could you gimme an example matching my requirement?

[DollyBMember]

Hi Milen,

The Tabs are appearring horizontally now. But the height got reduced. When I remove autoOpen: false for jqxWindow, everythign looks fine. I have emailed you the screenshot how my screen appears with the following code.

Is there any default settings enabled on setting autoOpen:false ?

$('#eventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 450, width: 750,
	                theme: theme, resizable: false, isModal: true, autoOpen: false, modalOpacity: 0.3, showCollapseButton: true
	            });	            
	
				$('#tab1').jqxTabs({ height: 300, width: '100%', theme: theme});

Need solution for this issue.

Regards
DollyB

[DollyBMember]

Hi Milen,

Here is the piece of code I was working with:

<link rel="stylesheet" href="/eMatrix/jsp/mars/jquery/jqwidgets/styles/jqx.base.css" type="text/css" />
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/scripts/jquery1.7.2.min.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxcore.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxwindow.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxbuttons.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxscrollbar.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxpanel.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxtabs.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxcheckbox.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxdata.js"></script> 
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxmenu.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.edit.js"></script>  
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.selection.js"></script> 
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxlistbox.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxdropdownlist.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxcheckbox.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxcalendar.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxnumberinput.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxdatetimeinput.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/globalization/jquery.global.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/scripts/gettheme.js"></script>	    
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.pager.js"></script>
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxdropdownbutton.js"></script>	  
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxtree.js"></script>	    
	    <script type="text/javascript" src="/eMatrix/jsp/mars/jquery/jqwidgets/jqxgrid.columnsresize.js"></script> 
	    <script type="text/javascript">    
function createElements(theme) {
	            $('#eventWindow').jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 450, width: 750,
	                theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, showCollapseButton: true
	            });	            
	
				$('#tab1').jqxTabs({ height: 300, theme: theme });
}
$(document).ready(function () {                   
	            var theme = $.data(document.body, 'theme', theme);
	            if (theme == undefined) theme = '';
	            addEventListeners();
	            createElements(theme);
	            $("#jqxWidget").css('visibility', 'visible');
	        });
</script>
<div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;" id="mainDemoContainer">
            <div id="eventWindow">
                <div> <mars:marstypeimage type="<%=bObj.getTypeName()%>" width="23" height="23" border="0" alt="View Object"/><font size="2"><B><I><%=bObj.getTypeName()%></I>:&nbsp;&nbsp;<%=bObj.getName()%>&nbsp;<%=bObj.getRevision()%>&nbsp;-&nbsp;<%=bObj.getAttributeValue(context, "Title", true)%></B></font></div>
                <div style="overflow: hidden;" id="windowContent">
                    <div id="tab1">
                        <ul style="margin-left: 30px;">
                            <li>Details</li>
                            <li>Attachments</li>
							<li>Reports</li>
                        </ul>
                        <div>
						   <div id="jqxgrid"></div> 
                        </div>   
						<div>			
							<div style="height: 25px; padding: 5px;" class="jqx-widget-header">						        
						        <input type="button" value="Add File" style="float: left;" id="addFileButton" onclick="javascript:openAddFilePopup()" />
						        <div style="margin-left: 5px; float: left;" id='jqxWidgetButton'></div>						        
						    </div>						
                            <div id="jqxgrid2"></div> 
                        </div>
						<div>
                             
                        </div>
                    </div>                    					
                </div> <!-- window content -->                
            </div> <!-- event winodw -->       
         </div> <!-- mainDemoContainer -->

[DollyBMember]

That’s blunder from my side. Thank U.

How do I get the file input type value? I am using IE8.
The following code works fine in Firefox but in IE8 it displays /fakepath . Could you tell me any alternative solution for resolving this?

function populateFileList()
{
alert($(‘input[type=file]’).val());
alert($(‘#uploadFile’).val());
}

<FORM name="addForm" method="post" enctype="multipart/form-data" action="”>

Add File

File:

[DollyBMember]

Hi again

The following code displays buttons one below the other.

$(“#jqxWidgetButton”).jqxDropDownList({ source: buttonSource, selectedIndex: 0, width: ‘100’, height: ’25’ });
$(“#addFileButton”).jqxLinkButton({width: ‘100’, height: ’27’ });

<a style='margin-left: 25px;' target="_blank" href="/eMatrix/jsp/mars/documentMgmt/addFile.jsp?oid=&nfiles=4″ id=’addFileButton’>Add File

Am I doing something wrong??

[DollyBMember]

Hi Peter,

On clicking on Button, i just want to open a window or Dialog which contains an option to browse the file. I sit a right option if I opt dialog in such scenario?

I tried to open a dialog on clicking on the “Button”. Geting error, “object doesn’t support this property or method”. Why is it happening?
My code looks like,

var buttonSource = [
“More”,
“Check In”,
“Check Out”,
“Delete”
];

$(“#jqxWidgetButton”).jqxDropDownList({ source: buttonSource, selectedIndex: 0, width: ‘100’, height: ’25’ });
$(“#addFileButton”).jqxButton({ source: buttonSource, width: ‘100’, height: ’27’ });

$(“#addFileButton”).click(function() {
$(“#dialogform”).dialog({autoOpen: false});
});

<mars:marstypeimage type="” width=”23″ height=”23″ border=”0″ alt=”View Object”/>:    – 

Details
Attachments
Reports

All form fields are required.

Name

Email

Password

[DollyBMember]

Hi Peter,

Its working fine now. Thankx.

Regards
DollyB

[DollyBMember]

Hi Peter,

Thank You. My issue is solved now.

Regards
DollyB

[DollyBMember]

Hi,

Could you give me one example showing toolbar with dropdown button and normal button?

Thankx
DollyB

[DollyBMember]

Hi Peter,

Thank You for the help.
I have implemented the rendering of jqxGrid.

//Added for Attachments Tab

// prepare the data
var attachmentsData = new Array();
<%for (int i=0; i
var row = {};
row[“id”] =;
row[“AttachSelect”] = “”;
row[“AttachURL”] = attachedFiles();
row[“AttachName”] = “”;
row[“AttachFormat”] = “”;
row[“AttachCheckOut”] = “”;
attachmentsData[] = row;

var attachSource =
{
localdata: attachmentsData,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
var attachDataAdapter = new $.jqx.dataAdapter(attachSource);

var cellsradiorenderer = function (row, columnfield) {
return ”;
}

// Create jqxGrid
$(“#jqxgrid2″).jqxGrid(
{
width: 725,
source: attachDataAdapter,
autoheight: true,
theme: theme,
selectionmode: ‘singlecell’,
columns: [
{ text: ”, datafield: ‘AttachSelect’, width: 30, cellsrenderer: cellsradiorenderer},
{ text: ”, datafield: ‘AttachURL’, width: 40},
{ text: ‘File Name’, datafield: ‘AttachName’, width: 380 },
{ text: ‘Format’, datafield: ‘AttachFormat’, width: 150 },
{ text: ‘Checked Out’, datafield: ‘AttachCheckOut’, width: 125 }
]
});

function attachedFiles() {

return ‘<a href="”><img border=0 src="/eMatrix/images/icons/” =”Click to view, right click to save”>’;

return ‘<img border=0 src="/eMatrix/images/icons/” =”Click to view, right click to save”>’;

}

When I am trying to run this code, the hyperlinked image is repeated in all rows. Actually it should show different images in each row based on file names.
Hoq can I fix this issue?

[DollyBMember]

Hi Peter,

Thank You.
What about attachments? I want to display hyperlinked icons like, MS Excel,word and ppt in one of the columns. How do I do that in Grid dynamically?

Regards
DollyB

[Author]

Posts