List Format in ASP.NET Core DOCX Editor

14 Aug 20265 minutes to read

ASP.NET Core DOCX Editor (Document Editor) supports single-level and multilevel lists. Lists are used to organize data as step-by-step instructions in documents for easy understanding of key points. You can apply a list to a paragraph using the supported APIs.

Create bullet list

Bullets are usually used for unordered lists. To apply a bulleted list to selected paragraphs, use the following method of Editor instance.

NOTE

applyBullet(bullet, fontFamily)

Parameter Type Description
Bullet string Bullet character.
fontFamily string Bullet font family. 
documenteditor.editor.applyBullet('\uf0b7', 'Symbol');

Create numbered list

Numbered lists are usually used for ordered lists. To apply a numbered list to selected paragraphs, use the following method of Editor instance.

NOTE

applyNumbering(numberFormat, listLevelPattern)

Parameter Type Description
numberFormat string “%n” representations in numberFormat parameter will be replaced by respective list level’s value. “%1)” will be displayed as “1)”.
listLevelPattern string Optional. Default value is Arabic. 
documenteditor.editor.applyNumbering('%1)', 'UpRoman');

Clear list

You can also clear the list formatting applied to selected paragraphs.

documenteditor.editor.clearList();

Working with lists

<div id="toolbar">
    <ejs-toolbar clicked="toolbarAction">
        <e-toolbar-items>
            <e-toolbar-item prefixIcon=" e-de-icon-Bullets " id="Bullets " tooltipText="Bullets "></e-toolbar-item>
            <e-toolbar-item prefixIcon="e-de-icon-Numbering " id="Numbering " tooltipText="Numbering "></e-toolbar-item>
            <e-toolbar-item text="Clear " tooltipText="Clear List " id="clearlist "></e-toolbar-item>
        </e-toolbar-items>
    </ejs-toolbar>
</div>
<div id="documenteditor " style="width:100%;height:100% ">
    <ejs-documenteditor isReadOnly=false enableEditor=true enableSelection=true enableSfdtExport=true enableEditor=true id="container "></ejs-documenteditor>
</div>

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container ").ej2_instances[0];
        documenteditor.resize();
        updateContainerSize();

        function toolbarAction(args) {
            switch (args.item.id) {
                case 'Bullets':
                    //To create bullet list
                    documenteditor.editor.applyBullet('\uf0b7', 'Symbol');
                    break;
                case 'Numbering':
                    //To create numbering list
                    documenteditor.editor.applyNumbering('%1)', 'UpRoman');
                    break;
                case 'clearlist':
                    //To clear list
                    documenteditor.editor.clearList();
                    break;
            }
        };
    });
</script>

Editing numbered list

Document Editor restarts the numbering or continues numbering for a numbered list. These options are found in the built-in context menu, if the list value is selected.

Image

Online Demo

Explore how to apply bullets and numbering in Word documents using the ASP.NET Core Document Editor in this live demo here.

See Also