This is a migrated thread and some comments may be shown as answers.

Customize order possible in Kendo Editior

8 Answers 19 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Ayyappan
Top achievements
Rank 1
Ayyappan asked on 10 Dec 2019, 09:32 AM

Is possible to add alphabetical order after number in index items in kendo editor. Here we used  Kendo UI v2015.2.902 and struggle regarding this. If its possible please share programming coding also.

For example :

1.a,

1.b,

1.c,

1.1.a

2.c

2.d

8 Answers, 1 is accepted

Sort by
0
Ayyappan
Top achievements
Rank 1
answered on 10 Dec 2019, 09:39 AM
For index items mean ordered list.
0
Ivan Danchev
Telerik team
answered on 11 Dec 2019, 05:17 PM

Hello,

Such modification of the ordered lists in the Editor is not available out-of-the-box and would require a custom solution.

Consider using the  stylesheets option. It allows specifying a stylesheet with custom CSS rules, which will get applied to the content of the Editor:

$("#editor").kendoEditor({
	stylesheets: ["editorStyles.css"],
	tools: [
		"bold",
		"italic",
		"underline",
		"strikethrough",
		"fontName",
		"fontSize",
		"foreColor",
		"backColor",
		"insertUnorderedList",
		"insertOrderedList",
	]
});

In the editorStyles.css file you can use custom CSS rules that modify the default appearance of the li elements in an ol, for example:

ol {
	margin-bottom: 0;
	counter-reset: item;
}

ol li {
	display: block;
	position: relative;
}

ol li:before {
	content: counter(item) "." counter(item, lower-alpha);
	counter-increment: item;
	position: absolute;
	margin-right: 100%;
	right: 10px;
}

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ayyappan
Top achievements
Rank 1
answered on 12 Dec 2019, 01:52 PM

Hi Ivan Danchev,

I added above one. Does not work properly. Actually we used angularjs. i share my code.

 

$scope.editorOptions = {

        tools: ['formatting', 'bold', 'italic', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'insertUnorderedList',
            'insertOrderedList', 'indent', 'outdent', 'createLink', 'insertImage', 'subscript', 'superscript', 'createTable',
            'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'viewHtml',
             {
                 name: "crossreference",
                 toolCaption: "<i class='fa fa-hand-o-right'></i>",
                 template: $("#toolTemplate").html()
             },
            {
                name: "footnote",
                toolCaption: "<i class='fa fa-file-code-o'></i>",
                template: $("#toolTemplFootnote").html()
            },
             {
                 name: "deletefootnote",
                 toolCaption: "<i class='fa fa-file-excel-o'></i>",
                 template: $("#toolTemplDelFootnote").html()
             }
        ],

}

}

}

 

how to add css internally this code. can you help out of this.

0
Ivan Danchev
Telerik team
answered on 16 Dec 2019, 01:27 PM

Hi Ayyappan,

The "stylesheets" option is not set in the code snippet you posted. Attached you can find a sample web site. In it an Editor is initialized in an AngularJs scenario. The tools configuration is added to the Editor options as well as the stylesheets option:

$scope.editorOptions = {
  stylesheets: ["editorStyles.css"],
  tools: ['formatting', 'bold', 'italic', 'underline', 'justifyLeft', 'justifyCenter', 'justifyRight', 'insertUnorderedList', 'insertOrderedList', 'indent', 'outdent', 'createLink', 'insertImage', 'subscript', 'superscript', 'createTable', 'addRowAbove', 'addRowBelow', 'addColumnLeft', 'addColumnRight', 'deleteRow', 'deleteColumn', 'viewHtml',
      {
        name: "crossreference",
        toolCaption: "<i class='fa fa-hand-o-right'></i>",
        template: $("#toolTemplate").html()
      },
      {
        name: "footnote",
        toolCaption: "<i class='fa fa-file-code-o'></i>",
        template: $("#toolTemplFootnote").html()
      },
      {
        name: "deletefootnote",
        toolCaption: "<i class='fa fa-file-excel-o'></i>",
        template: $("#toolTemplDelFootnote").html()
      }
     ],
}  

If you run the EditorTest.html page in the browser and create an ordered list in the Editor, you should see the list modified, as demonstrated in this screenshot.

The CSS that modifies the default appearance of the ol li elements is in the editorStyles.css file.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ayyappan
Top achievements
Rank 1
answered on 02 Jan 2020, 02:06 PM

Hi,

Above example not working for me. Is there any other possibilities. Please help me out of this.

0
Ivan Danchev
Telerik team
answered on 06 Jan 2020, 01:14 PM

Hi Ayyappan,

Could you elaborate more on what is not working? What is the behavior at your end compared to the screenshot I posted in my previous reply?

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ayyappan
Top achievements
Rank 1
answered on 06 Jan 2020, 02:21 PM

Hi Ivan,

Actually we need add ordered list like alpha numeric.

 

For example, For billeting, and ordered number(1,2,3) have a tool in content editor. Similarly is there any tool available alpha numeric ordered list(1.a,1.b,1.c,1.1.a,2.a)

 

0
Ivan Danchev
Telerik team
answered on 08 Jan 2020, 11:58 AM

Hi Ayyappan,

The only available tool dedicated to inserting ordered lists is the "insertOrderedList" tool, which uses numbers: 1., 2., 3., etc. Consider implementing a custom tool (see this demo, which shows how a custom tool can be created), if you want to have another tool for inserting lists.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Editor
Asked by
Ayyappan
Top achievements
Rank 1
Answers by
Ayyappan
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or