jqxscrollview image rotate left and right

[dan123Participant]

Hi I create this example using jqxscrollview where i want to rotate the image.
There are two images inside the view and each image has a class assigned to it called ‘image’.

Added document.getElementsByClassName(“image”) using a for loop to find the images and rotate left/right on click of button.

But for some reason, its not firing correctly, and not rotating properly. So the rotation of image is working based on 90 degrees each click.

Here is my example:
http://jsfiddle.net/3z1Lb5g4/4/

Would like to know if any workaround for this.

[TodorParticipant]

Hello dan123,

I have updated your example.
The following things are changed:
– CSS styles. translateY is removed.
– your on click functions for rotating images
Now all should be working correctly.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[dan123Participant]

Hi Todor,

One more thing is that, i have added a reset button where
1. Reset the image size to the default width it originally had
2. Rotate the image back to original state, (360deg)

Issues i am facing is that, i am not able to rotate the image back to original angle and whenever i click on rotate right or left, it does not rotate anymore.

Here is my jsfiddle:
http://jsfiddle.net/tya4vb8u/4/

I will like your assistance on this, but thanks for pointing out

[TodorParticipant]

Hello dan123,

You need to change your on click function on the reset button to be like this:

$('#reset').on('click', function () {
 for (var i = 0; i < img.length; i++) {
    img[i].style.width = "150px";
    img[i].className = "image rotate0";
    angle = 0;
 }
});

Please notice that the last two rows are added and one row is deleted from the old version of the function.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[dan123Participant]

Hi Todor,

One more small thing, how can i retrieve like a page number that indicate what image i am currently on.

Example:
Image 1 of 3

When i click ‘Next’ button it will show the ‘Image 2 of 3’ and so on.
When i click ‘Previous’ button it will show the ‘Image 1 of 3’.

Here is my jsfiddle:
http://jsfiddle.net/o2jwdhb4/5/

[dan123Participant]

Also Todor adding to my comment before, can we disable the drag option on this widget.
What i mean is whenever i hold left click on mouse and drag left or right, for some reason its changing the to another page/image. So is there a way to disable this feature.

[TodorParticipant]

Hello dan123,

Please find an updated example about both request.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Gaurav@123Participant]

Hello everyone, I want to click on view button and need to open the image in DocumentShowPopupID. Also I’m getting the value in dataset(ds) where data is bind in controller method. Anyone pls help me ….

@section scripts {
<style>
body { width: 100%; height: 100%; }
.jqx-grid-cell input[type=”button”]{
width:100%;
z-index:10;
opacity:0.01!important;
z-index:5!important;
display:block!important;
}
</style>

<link rel=’stylesheet’ href=’https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’>
<link href=”~/jqwidgets/styles/jqx.base.css” rel=”stylesheet” />
<script src=”~/Scripts/jquery-1.11.1.min.js”></script>
<script src=”~/jqwidgets/jqxcore.js”></script>
<script src=”~/jqwidgets/jqxbuttons.js”></script>
<script src=”~/jqwidgets/jqxscrollbar.js”></script>
<script src=”~/jqwidgets/jqxdatatable.js”></script>
<script src=”~/jqwidgets/jqxtreegrid.js”></script>
<script src=”~/jqwidgets/jqxdata.js”></script>
<script src=”~/jqwidgets/jqxcheckbox.js”></script>
<script src=”~/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
dataType: “json”,
dataFields:
[
{ name: ‘PartAssemblyId’, type: ‘number’ },
{ name: ‘ComponentName’, type: ‘string’ },
{ name: ‘PartNo’, type: ‘string’ },
{ name: ‘OEMRev’, type: ‘string’ },
{ name: ‘DEPartNo’, type: ‘string’ },
{ name: ‘Quantity’, type: ‘number’ },
{ name: ‘ParentId’, type: ‘number’ },
{ name: ‘TypeName’, type: ‘string’ },
{ name: ‘TAPType’, type: ‘string’ },
{ name: ‘DirectoryId’, type: ‘number’ },
{ name: ‘ReferenceId’, type: ‘string’ },
{ name: ‘IsManualDEPart’, type: ‘number’ },
{ name: ‘RevNo’, type: ‘string’ },
{ name: ‘RevRemark’, type: ‘string’ },
{ name: ‘CreatedBy’, type: ‘number’ },
{ name: ‘CreatedDate’, type: ‘number’ },
{ name: ‘ModifiedBy’, type: ‘number’ },
{ name: ‘ModifiedDate’, type: ‘number’ },
{ name: ‘Status’, type: ‘string’ },
{ name: ‘UserId’, type: ‘number’ },
{ name: ‘FolderCount’, type: ‘string’ },
{ name: ‘Level’, type: ‘number’ },
{ name: ‘View’, type: ‘string’ }

],

hierarchy:
{
keyDataField: { name: ‘PartAssemblyId’ },
parentDataField: { name: ‘ParentId’ }
},
// id: ‘PartAssemblyId’,
url: ‘GetEmployees’,
};

var dataAdapter = new $.jqx.dataAdapter(source);
// call jqxTreeGrid

$(“#treeGrid”).jqxTreeGrid(
{
width: 1000,
height: 500,
source: dataAdapter,
altRows: true,
columnsResize: true,
//pageable: true,
//sortable: true,
ready: function () {
$(“#treeGrid”).jqxTreeGrid(‘expandRow’, ‘2’);
//alert();
},
//choose the columns you wish to display on screen
columns: [
{ text: ‘OEM Part Number’, dataField: ‘PartNo’, width: 200 },
{ text: ‘Level’, dataField: ‘Level’, width: 50 },
{ text: ‘Type Name’, dataField: ‘TypeName’, width: 100 },
{ text: ‘Qty’, dataField: ‘Quantity’, width: 50 },
{ text: ‘Part Description’, dataField: ‘ComponentName’, width: 200 },
{ text: ‘TSME PartNo’, dataField: ‘DEPartNo’, width: 200 },
{ text: ‘Status’, dataField: ‘Status’, width: 100 },
{ text: ‘View’, dataField: ‘View’, width: ‘5%’, columntype: ‘button’,
cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘<input type=”Button” onClick=”buttonclick()” value=”button” /><i class=”fa fa-eye “> </i>’;
}, buttonclick: function (row) {
$(“#treeGrid”).jqxTreeGrid(‘selectrow’, row);
}
},
{ text: ‘Additional Docs’, dataField: ‘AdditionalDocs’, width: 100, columntype: ‘button’,
cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
return ‘<input type=”Button” onClick=”buttononclicking()” value=”button”/><i class=”fa fa-pencil “> </i>’;
},
},
{ text: ‘Remarks’, dataField: ‘RevRemark’, width: 200 }

]
});
});
</script>
<script type=”text/javascript”>
var buttonclick = function ()
{
// alert(‘click’);
var id = $(this).attr(‘treeGrid’)
alert(id);
$(“#DocumentShowPopupID”).show();
}
</script>
<div class=”modal” id=”DocumentShowPopupID”>
<div class=”modal-dialog”>
<div class=”modal-content” style=”height: 680px; width: 218%; margin-left: 7%” id=”MDContent”>

<!– Modal Header –>
<div class=”modal-header”>
<input type=”hidden” id=”DocId”>
<h class=”modal-title”>Preview Document</h>
<button type=”button” data-dismiss=”modal” id=”” title=”Close” onclick=”closeForm()” style=”border:none; background-color:transparent; float:right;”></button>
</div>

<!– Modal body –>
<br />
<div class=”row”>
<div class=”col-lg-6″>
<div>
<!–<embed src=”” id=”MaxframePreview” style=”width: 208%; height: 600px” /> —>
@*<iframe id=”MaxframePreview” style=”width: 185%; height: 500px; margin-left: 14%”></iframe>*@
<iframe id=”EdittabframeOverview” style=”width: 185%; height: 500px; margin-left: 14%”></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function closeForm() {
document.getElementById(“DocumentShowPopupID”).style.display = “none”;
}
</script>
<script type=”text/javascript”>
var buttononclicking = function (event) {
// alert(‘clicking’);
var id = $(this).attr(“id”)
var url = “@Url.Action(“ViewWholeAssemPart”, “EBOM_DocumentControl”)”;
window.location.href = url;
}
</script>

}

[HristoParticipant]

Hello Gaurav@123,

Could you provide us with more details?
Is there any error message?
Also, are you sure this question is relevant to this topic?
I look forward to hearing from you.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Gaurav@123Participant]

Hello Hristo,
Thanks for your reply.
I’m not sure whether my question is relevant to this topic or not..
Actually I’m facing problem on creating tree grid where i suppose to create a grid with 10 columns. One of them is column named “View”, where on click of it i need to open a image of that particular document.

You can go through this link

The data of the grid is coming from the table.

ON click of view button it shows the alert message “Object Object”

PLease help me get out of it

[Gaurav@123Participant]

Hello Hristo,
I think from here you can get an idea what i’m talking about.
I’ve implemented the tree grid hierarchy from the below link.
https://www.c-sharpcorner.com/article/using-tree-grid-with-asp-net-mvc-4/
Now the thing is I want to add the new column icon as “View” and on click on that particular view cell it should popup the model and show the existing image inside in it.

NOTE: In that link the tree grid is generated using with entity framework and i have done without entity framework.

PLease help me ??

[HristoParticipant]

Hello Gaurav@123,

The article is more appropriate to be in “ASP .NET MVC” section or the section of the used widget.
I would like to mention that the jqxGrid and the jqxTreeGrid are different although they have so similar options.
About the MVC 4 I would like to suggest you look at this tutorial:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-binding-to-sql-database-mvc4.htm
It is for the jqxGrid but you could use the same approach for the jqxTreeGrid if this is the used from you a widget.

Maybe it will be better to provide us with more details – which widget do you use and where this image persists.
If you want to have a button with an image then you could use this approach but it is for the jqxGrid.
To show a dialog in the jqxTreeGrid you could use this approach.
You could add images in the jqxTreeGrid on that way:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-icons.htm?light
On the other side to recognize where exactly the user clicks you could use the “rowClick” event and from the event’s arguments you can get the specific column (“datafield”).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Gaurav@123Participant]

Hello Hristo
Thank you so much for your reply. I’m new to jqwidgets and i’m really confused about this.
This is the updated fiddle. please go through it. This is what i want to do. Adding a view column instead of button it should be view icon and it should be clickable.
http://jsfiddle.net/expertslogic/nqtdahep/

On click of it, it should popup and show the image of like column name country.

Thanks

[Gaurav@123Participant]

Is anyone to answer my above question ? still waiting….

[HristoParticipant]

Hello Gaurav@123,

Please, take a look at this example.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts