- Home
- Forum
- ASP.NET MVC
- Select image/file on click
Select image/file on click
Hi,
We are making use of the file explorer to display thumbnails of images. We have the checkbox enabled so that the user can select the image. Is there a way for us to enable the user to select the image just by clicking on the image. We've tried to hookup an onclick event but it seems the file explorer unselects the item when a different image is clicked.
$('#noteImagesExplorer #noteImagesExplorer_tileView img').off('click').on('click', function (args) {
var containerItem = $(args.target).closest('li');
var itemText = containerItem.find('.e-file-info').text();
var currentSelectedItems = $('#noteImagesExplorer').data('ejFileExplorer').model.selectedItems;
var exists = false;
for (var i = 0; i < currentSelectedItems.length; i++) {
if (currentSelectedItems[i] == itemText) {
exists = true;
break;
}
}
if (!exists) {
currentSelectedItems.push(itemText);
$('#noteImagesExplorer').data('ejFileExplorer').option('selectedItems', currentSelectedItems);
}
});
Please advise.
Thank you
SIGN IN To post a reply.
3 Replies
1 reply marked as answer
KR
Keerthana Rajendran
Syncfusion Team
August 31, 2020 09:28 AM UTC
Hi Malcolm,
Thanks for contacting Syncfusion support.
Based on your code , we suspect that you need to choose multiple images at same time in FileExplorer. You can use “Ctrl + mouseclick” on images to make multiple selection. Please refer to the following image
|
|
To more details about FileExplorer, refer to the following links
|
Demo |
|
|
UG Documentation |
|
|
API |
If we have misunderstood, kindly share us some details on the following to proceed further.
- Rendering code of FileExplorer along with details on where the currently provided code(in your update) is executed.
- Whether you need to select multiple items programmatically through code without user interaction?
- Is there any specific reason to make multiple selection on single click without using “Ctrl” keys?
Please let us know if you need any further assistance.
Regards,
Keerthana.
MV
Malcolm van Staden
August 31, 2020 09:42 AM UTC
Hi,
Thank you for the response.
We are using the file explorer specifically to select multiple files. So we want the default click behaviour to be selection.
Is this possible?
MK
Muthukrishnan Kandasamy
Syncfusion Team
September 2, 2020 10:22 AM UTC
Hi Malcolm,
We have validated your requirement in File Explorer control. For achieving your requirement in EJ File Explorer control, we have overridden the default behavior. Please refer to the below code block.
|
ej.FileExplorer.prototype._upDatePathFromTileView = function (event) {
var $target = $(event.target);
if (event["pointerType"] == "touch" && this._customPop != null && this.model.allowMultiSelection) {
if (!this._customPop.is(":visible"))
this._customPop.show();
if (this._customPop.is(":visible") && !this._customPop.find(".e-rowselect").hasClass("e-spanclicked")) {
var offset = $target.offset();
this._customPop.offset({ left: offset.left - 40, top: offset.top - 40 });
}
else
event.ctrlKey = true;
}
else
this._hidePopup();
if (!(this._searchbar && $.trim(this._searchbar.val())))
this._suggestionItems = [];
if (!event.innerEvent)
this._lastItemIndex = $(event.currentTarget).index();
this._addFocus(this._tileViewWrapper);
this._isTreeNode = false;
var proxy = this;
var checkboxObj;
if(this.model.showCheckbox){
checkboxObj = $(event.target).closest(".e-tilenode").find(".e-tile-checkbox").data("ejCheckBox");
if ($(event.target).hasClass("e-chk-image"))
event.ctrlKey = this.model.showCheckbox;
}
if (!event.shiftKey) {
var _unselectedItem = [];
if ($(event.currentTarget).hasClass("e-active")) {
$(event.currentTarget).removeClass("e-active").attr("aria-selected", false);
checkboxObj && checkboxObj.option("checked", false);
}
else {
$(event.currentTarget).addClass("e-active").attr("aria-selected", true);
checkboxObj && checkboxObj.option("checked", true);
}
var nodeType = "File", _childItems, _isUpdate = true;
this._toDownload = this._toUpload = this._toEdit = this._toEditContents = this._toRead = this._toCopy = true;
var name = $(event.currentTarget).find(".e-file-name").text();
if (this._currentPath != this._originalPath) {
this._currentPath = this._originalPath;
}
var items = this._suggestionItems.length ? this._suggestionItems : this._fileExplorer[this._originalPath];
if (items) {
for (var i = 0; i < items.length; i++) {
if ((this._suggestionItems < 1 && items[i].name == name) || (this._suggestionItems.length > 0 && items[i].filterPath == $(event.currentTarget).attr('data-parent-path') && items[i].name == name)) {
if ($(event.currentTarget).hasClass("e-active")) {
this._sizeInByte += items[i].sizeInByte;
this._selectedTileItems.push(items[i]);
} else if (event.ctrlKey) {
this._sizeInByte -= items[i].sizeInByte;
var index = $.inArray(items[i], this._selectedTileItems);
if (index > -1) {
_unselectedItem.push(this._selectedTileItems[index]);
this._selectedTileItems.splice(index, 1);
}
}
break;
}
}
}
$.each(this._selectedTileItems, function (index, value) {
if (!value.isFile) {
proxy._update = true;
_isUpdate = true;
proxy._toDownload = true;
}
proxy._updateAccessValue(value);
});
this._FilteredFiles = [];
for (var i = 0; i < this._selectedTileItems.length; i++) {
this._FilteredFiles.push(this._selectedTileItems[i].filterPath + this._selectedTileItems[i].name)
}
if ($(event.currentTarget).find(".e-fe-folder").length) {
nodeType = "Directory";
if ($(event.currentTarget).hasClass("e-active"))
this._updateNode(name);
}
this._currntNode = $(event.currentTarget);
if (this._currntNode.attr("data-parent-path")) {
name = this._currntNode.attr("data-parent-path").replace(this._originalPath, "") + name;
}
this._selectedContent = name;
if ($(event.currentTarget).hasClass("e-active"))
this._selectedItems.push(this._selectedContent);
else {
var index = $.inArray(this._selectedContent, this._selectedItems), _unselectedContent = this._selectedContent, _nodeType = nodeType;
if (index > -1)
this._selectedItems.splice(index, 1);
if (this._selectedTileItems.length > 0) {
this._selectedContent = this._selectedItems[this._selectedItems.length - 1];
nodeType = this._selectedTileItems[this._selectedTileItems.length - 1].type;
if (nodeType == "Directory")
this._updateNode(this._selectedContent);
}
}
if ((!this._startNode) || this._selectItems.length == 0 || this._selectItems.length == this._selectedItems.length) {
if (!this._selectItems || this._selectItems.length <= 0)
this._startNode = null;
this._selectedItemsTag && this._selectedItemsTag.html((this._selectedItems.length > 0 ? (this._selectedItems.length + " " + (this._selectedItems.length > 1 ? this._getLocalizedLabels("Items") : this._getLocalizedLabels("Item")) + " " + this._getLocalizedLabels("Selected")) : "") + (this._sizeInByte ? (_isUpdate ? " " + this._bytesToSize(this._sizeInByte) : "") : ""));
this._nodeType = nodeType;
this._setFilteredItemsName();
this.model.selectedItems = this._filteredItemsName;
var args = { name: this._selectedItems, names: this._selectedItems, path: this.model.selectedFolder, nodeType: this._nodeType, selectedItems: this._getSelectedItemDetails(this.model.selectedFolder, this._filteredItemsName) };
this._urlTag && this._urlTag.find("input").val(args.url);
this._nameTag && this._nameTag.find("input").val(args.name);
this._updateSelectionDetails(this._nodeType);
if (this._isClicked)
if ($(event.currentTarget).hasClass("e-active")) {
if (this._initializeFlag) {
this._trigger("select", args);
}
}
else {
var args = { name: _unselectedContent, names: [_unselectedContent], path: this.model.selectedFolder, nodeType: _nodeType, unselectedItem: _unselectedItem[0], unselectedItems: _unselectedItem };
this._trigger("unselect", args);
}
this._selectItems = [];
}
} else {
this._selectItems = [];
if (!this._startNode)
this._startNode = this._currntNode;
var startIndex = $(event.currentTarget).index();
var endIndex = this._startNode.index();
if (startIndex > endIndex) {
var temp = startIndex;
startIndex = endIndex;
endIndex = temp;
}
var items = this._tileContent.find(".e-tilenode");
items.removeClass("e-active").attr("aria-selected", false);
for (var i = startIndex ; i <= endIndex; i++) {
this._selectItems.push($(items.get(i)).find(".e-file-name").text());
}
this._setSelectedItems(this._selectItems);
}
}
|
We have prepared sample to meet your requirement, please refer to the below link for the sample.
Please let us know, if you need any further assistance.
Regards,
Muthukrishnan K
Marked as answer
SIGN IN To post a reply.
- 3 Replies
- 3 Participants
- Marked answer
-
MV Malcolm van Staden
- Aug 28, 2020 10:39 AM UTC
- Sep 2, 2020 10:22 AM UTC