jQuery UI Widgets Forums Layouts Layout and Docking Layout jqxscrollview image rotate left and right

This topic contains 17 replies, has 4 voices, and was last updated by  Hristo 2 months, 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author

  • dan123
    Participant

    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.


    Todor
    Participant

    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


    dan123
    Participant

    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

    • This reply was modified 10 months ago by  dan123.

    Todor
    Participant

    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


    dan123
    Participant

    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/


    dan123
    Participant

    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.


    Todor
    Participant

    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@123
    Participant

    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>

    }

    jqxscrollview image rotate left and right #107109

    Hristo
    Participant

    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@123
    Participant

    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@123
    Participant

    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 ??


    Hristo
    Participant

    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

    jqxscrollview image rotate left and right #107134

    Gaurav@123
    Participant

    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

    jqxscrollview image rotate left and right #107147

    Gaurav@123
    Participant

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

    jqxscrollview image rotate left and right #107160

    Hristo
    Participant

    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

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.