Retrieve the chosen items from a Syncfusion listview

I'm looking to display the selected items from a listview in a grid on the home page, but I'm having trouble figuring out how to do it. I've included the code from the js file and a screenshot of the popup.

var subItemsLoaded = false,
    SubItemSelectionModalId = '#subItemSelectionModal';
listViewHeight = 400,
subItemClicked = 0;

$(SubItemSelectionModalId).on('shown.bs.modal', function () {
    if (
        (window.selections.assetTemplate.id != null &&
        window.selections.assetTemplate.id != 0)) {
        $(SubItemSelectionModalId + ' .modal-body').ejWaitingPopup({
            showOnInit: true
        });
        $(SubItemSelectionModalId + ' .listViewItems').ejListView({
            "height": 400,
            "loadComplete": function () {
                repositionSearchBoxFor(SubItemSelectionModalId);
                var obj = $(SubItemSelectionModalId + ' .modal-body').data("ejWaitingPopup");
                console.log("12345.5");
                obj.hide();
                console.log("123456");
            },

            "mouseUp": function (e) {
            },
            "enableAjax": true,
            "enableCheckMark": true,
            "enableFiltering": true,
            "dataSource": ej.DataManager({
                "url": "/Shared",
                "cachingPageSize": 0,
                "timeTillExpiration": 0
            }),
            "query": ej.Query().from("GetSubItems").addParams("assetTemplateId", window.selections.assetTemplate.id).addParams("assetTemplateVariantId", window.selections.assetTemplateVariant.id),
            "fieldSettings": {
                "text": "SubItemName",
                "id": "SubItemId"
            }
        });
    }
});

$(SubItemSelectionModalId).on('hidden.bs.modal', function () {
    var listViewItems = $(SubItemSelectionModalId + ' .listViewItems');
    if (listViewItems.find('ul').length > 0) {
        var selections = $(SubItemSelectionModalId + ' .listViewItems').ejListView("getCheckedItems");
        if (selections.length > 0) {
            $('#selectedSubItems').html(selections.join(' , ')).removeClass('hidden');
        }
    }
});

enter image description here

Answer №1

A smart way to display the selected items from a Listview in a Grid is by utilizing the mouseUp event. By capturing the selected items from the list and setting them as the dataSource for the Grid control, you can seamlessly showcase them in a structured grid format.

Furthermore, if you need to retrieve the ID of the selected item, simply extract the ID attribute and incorporate it into the Grid as a column. This ensures that each item displayed in the Grid is associated with its corresponding ID from the Listview.

To help illustrate this process, we have created a sample demo for your convenience:

Best regards,
Arun P.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with jQuery 'on' event not triggering following 'load' event

I am facing an issue on a page where similar events occur but when new content is loaded halfway through, most of the jQuery functionalities stop working. The scenario involves answering questions in a 'game' format using AJAX calls. Once all que ...

Showing Real-Time Information in the Render Function

Looking for some guidance on how to create a dynamic Card using data from an API. I'm able to retrieve the data successfully, but I'm having trouble displaying it in the render method. Here's a snippet of my component where I use axios to f ...

Storing POST Request Data in Express

I want to use a single API endpoint for both GET and POST requests. My goal is as follows: Send multiple POST requests to /api/users with data like: {'id': 2, is_valid: 'true'} Retrieve this data by fetching the same API URL later on ...

Steps for creating duplicates of jQuery elements

My Objective I am currently working on a project that involves allowing users to modify an SVG file based on input, such as text formatting (bold, italic, etc.). It is important that the user can revert back to the original template without having to relo ...

JavaScript animation not functioning properly when height is set to "auto"

Can someone help me figure out why setting the height to "auto" in the code snippet below isn't working as expected? I want the DIV to adjust its size based on the content, but it's not happening. Any ideas on how to fix this issue would be great ...

NativeScript encountered an error while trying to locate the module 'ui/sidedrawer' for the specified element 'Sidedrawer'

Currently, I am in the process of developing a simple side-drawer menu for my NativeScript application by following this helpful tutorial. I have successfully implemented it on a single page using the given code below. starting_point.xml: <Page xmlns ...

Presenting information on an HTML webpage using the slidetoogle feature

< script > $(document).ready(function() { $("#flip").click(function() { $("#panel").slideToggle("fast"); }); }); < /script> When a button in a particular panel is clicked, I aim to display the details of that specific tuple ...

A guide on creating extruded shapes using Three.JS

My intention was to create a 2x8 board using an extruded shape. However, despite including rounded corners in the shape, when I execute it, the result resembles more of a napalm bomb rather than a board. var beam = new THREE.Mesh( makeRectangle( inTOm(2), ...

The process of transferring a file from a client to a server and then from one server to another

Within my web application, I am currently working on implementing a file upload feature. I have successfully utilized axios to send file requests from the client to the server's API, including proper form data appending and necessary headers. However, ...

Updating CSS in response to a button click using JavaScript: A step-by-step guide

Currently, I am in the process of creating a basic website with bootstrap5 (no JS at the moment). One issue I am facing is when I shrink the screen to the point where the navigation bar transforms into a burger button. Whenever I click on the burger button ...

What is the best method for deleting siblings from the DOM structure?

Here is some code that currently functions: a.parentNode.removeChild(a); But now, I also want to remove the previous sibling of this child element. How can I modify the code to achieve this? Is there any documentation on MDN that can help me with this ...

500 Internal Server Error in Laravel 5.4 due to AJAX Request

I am currently utilizing ajax to store my data in the database within laravel 5.4 so that I can avoid refreshing the page or redirecting elsewhere when saving data. However, I keep encountering an internal server error 500. As a newbie to ajax, I suspect t ...

JavaScript / html Error: function body missing closing curly brace

I encountered an error that I'm struggling to resolve: "SyntaxError: missing } after function body". Despite not having a function named 'body', I have attempted changing every instance of 'body' in my script. However, ...

An Array of Functions in Javascript

var functions_array = [ first_function('a string'), second_function('a string'), third_function('a string'), forth_function('a string') ] functions_array[0]; Unfortunately, the code above does not w ...

Utilizing SCSS to implement custom animations according to specific element IDs

How can I add different animations based on the ID of two DIVs with the same class when clicked? JSX: <div className="card"> <div id="front" className={frontClasses.join(' ')} onClick={clickedFront}> OPEN ...

How to incorporate template literals when sending JSON responses in Node.js?

Utilizing express and aiming to return some JSON, I am considering using a template literal. Here is my current approach: resp.status(201).json({ message: "Customer added to database", url: "http://localhost:5000/Customer/" + doc._id ...

Problems encountered with an API for newsletter signups

The form I created allows users to input their email and sends it to my Sendgrid contacts list. However, there are a couple of issues that need addressing: After submission, the page gets stuck on loading The frontend logic is not functioning as desi ...

What steps can be taken to ensure that JSON.parse() interprets all numbers as BigInt values?

I'm dealing with numbers in JSON that exceed the limits of the Number type, so I'd like to convert them to bigint. How can I do this? {"foo":[[0],[64],[89],[97]],"bar":[[2323866757078990912,144636906343245838,44169598393274215 ...

Angularjs - Repeatedly reloading identical images

Whenever I use ng-src in the <img> tag and change the ng-src by clicking next or previous buttons, the browser reloads the image even though it's already loaded. This results in a not-so-smooth experience as the image is downloaded again before ...

Steps to append information to Firestore if it is not already in the database?

In my Firestore database, I have a collection called Products. Here is the JSON structure for the Products: { Id1: {"product": "product1"}, Id2: {"product": "product2"}, Id3: {"product": " ...