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

Syntax colours for JSON

Could the EditControl be used to display JSON files? I see how it works for XML but not sure whether it could handle JSON?

5 Replies

VR Venkateshwaran Ramdoss Syncfusion Team May 1, 2017 10:59 AM UTC

Hi Richard, 
 
Thank you for contacting Syncfusion Support. 
 
Yes. EditControl is working for JSON file. We have prepared for a sample by using custom language for your reference. Please make use of the below code example. 
 
Code example[XAML] 
 
  <syncfusion:FormatsCollection x:Key="JSONLanguageFormats"> 
                <syncfusion:EditFormats Foreground="Black" FormatName="OperatorFormat"/> 
                <syncfusion:EditFormats Foreground="Blue" FormatName="LiteralsFormat"/> 
  </syncfusion:FormatsCollection> 
 
  <syncfusion:LexemCollection x:Key="JSONLanguageLexems">                                
                <syncfusion:Lexem StartText="&quot;" EndText="&quot;" IsMultiline="False" LexemType="Literals" FormatName="LiteralsFormat"/>                 
                <syncfusion:Lexem StartText=":" ContainsEndText="False" IsMultiline="False" LexemType="Operator" FormatName="OperatorFormat"/> 
  </syncfusion:LexemCollection> 
 
We have prepared a sample and screenshot for your reference and it can be downloaded from the below link. 
 
 
Screenshot 
 
 
 
 
Please refer the below documentation link for more details. 
 
 
Please check the above solution and let me us know if it is helpful. 
 
Regards, 
Venkateshwaran V.R. 



RI Richard May 8, 2017 03:54 PM UTC

Thanks for the assistance, this is really helpful...

Is there any way the formatting can cater for the following...

In JSON you frequently gget lines like  

"literal1": "literal2"

In this case, literal1 and literal2 should be in different colours, as per the image below




thanks for  your help


VR Venkateshwaran Ramdoss Syncfusion Team May 15, 2017 03:44 PM UTC

Hi Richard, 
 
Thank you for your update.  
 
At present, there is no direct support available for your requirement. We have tried to achieve your requirement using Custom Language support. Please make use of the below code example. 
 
Code example[C#] 
 
new Lexem { StartText = @"(?<=([\'\""]))(?=:)", IsRegex=true, IsMultiline = false, ContainsEndText = false, LexemType = EditTokenType.Keyword, FormatName= "AfterColon" }, 
 
We have prepared a sample for your reference and it can be downloaded from the below link. 
 
 
Screenshot 
 
 
 
Please check the above solution and let us know if it is helpful. 
 
Regards, 
Venkateshwaran V.R. 



MI Michael October 4, 2023 10:53 PM UTC

Hi,

I came across this post and have same situation with EditControl +  Json. This post helps but I also want to have Outlining support on the Json string, How can I make it work. 


I already set the SupportsOutlning= true for the custom Json lanugage that use with this sample.


Thanks,




GT Gokul Thanudhas Syncfusion Team November 28, 2023 06:03 AM UTC

Hi Michael,


Sorry for the delay.


You can achieve your requirement by adding the lexem with CodeSnippet type and implementing the custom expand-collapse logic using the ApplyExpandCollapse override method available in the custom language class

Please refer the sample for your reference.


Regards,

Gokul T


Attachment: EditControl_JSON_Sample_d98413be.zip

Loader.
Live Chat Icon For mobile
Up arrow icon