We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customization of details pop-up

Hey there.

How can we change the file type to our custom file type in the details popup instead of file/folder. We have taken the file type as a form field (Eg, file type can be audio, video, invoice, image etc.) along with the file which is to be uploaded.


For eg, here we want to change type from file to the field (from the drop-down list) we have taken before uploading a file.


1 Reply

IL Indhumathy Loganathan Syncfusion Team October 20, 2022 09:38 AM

Hi Jyoti,


Greetings from Syncfusion support.


We have prepared a sample where we retrieved the location path returned from the server using the success event. In order to achieve your requirement, you need to identify the specific table row in the “Details” popup element using popupOpen event. Check the below code snippet.


popupOpen(args) {

    //Check whether the opened popup is "Details" popup.

    if (args.popupName == 'File Details') {

        //Fine the corresponding Location cell in the Details popup.

        var row = args.popupModule.element.querySelectorAll('tr')[2];

        //Add custom class for required cell to identify it.

        row.getElementsByClassName('e-fe-value')[0].classList.add('e-path');

    }

}

success(args) {

    if (args.action == 'details') {

        //For reference, we have added additional slash to differentiate path changes.

        var path = args.result.details.location.split('\\').join('\\\\');

        //Append the retrieved path value inside dialog.

        (document.querySelectorAll('.e-fe-value.e-path')[0] as any).innerText =

            path;

    }

}


Sample: https://stackblitz.com/edit/angular-3vxzvt-hafffq?file=app.component.html,app.component.ts


Please check the shared sample and get back to us if you need any further assistance.


Regards,

Indhumathy L


Loader.
Live Chat Icon For mobile
Up arrow icon