Hi,

I have a strict CSP implemented in the Program.cs file, after that when I verified the browser developer tool then I can see the get API is called 2 times.

Can you please let me know why this get API is called 2 times. 

When I analyze I found that Kendo Panelbar Select event is called twice so internally the Get API is called twice.

@(Html.Kendo().PanelBar()
        .Name("panelbar")
        .ExpandMode(PanelBarExpandMode.Multiple)
        .Events(ev => ev.Select("OnSelect_Panel"))
        .Items(panelbar =>
        {
          panelbar.Add().Text("Test Panel");
        })

function OnSelect_Panel(sender) {

}

Inside the OnSelect_Panel() method is calling twice so the GET API also called twice. How can I restrict to one API call.

Note: Without strict CSP OnSelect_Panel() is called once but with strict CSP it called twice.

 

Problem:
After enabling Content Security Policy (CSP), Kendo DropDownLists inside a PanelBar fail to initialize. On page load:
• The DropDownList renders as a plain input box.
• PanelBar items appear empty, and data binding does not happen.
• JavaScript access to the DDL fails.

Scenario:
• ASP.NET MVC Razor.
• Dropdown Lists inside PanelBar content templates.
• Worked fine before CSP; now initialization and binding fail.

 

Expected Behavior:
• DDL should initialize and bind data on content load even with CSP.
• PanelBar items should display properly.

 

Example:

@(
                     Html.Kendo().PanelBar()
                     .Name("panelbar")
                     .ExpandMode(PanelBarExpandMode.Multiple)
                     .Items(panelbar =>
                     {
                         panelbar.Add().Text("Note : Please fill all the input")
                         .Content(@<text>
        @(Html.Kendo().DropDownList()
                                            .Name("dropdown")
                                            .OptionLabel("Please Select")
                                            .OptionLabelTemplate("<span style='color:dimgrey;font-size:10px;font-weight:bold'>Please Select</span>")
                                            .DataValueField("id")
                                            .DataTextField("Text")
                                            .Template("#:id # - #:datacolumn # - #:datecolumn #")
.DataSource(source=>{source.Read(read=>{read.Action("action","controller");});})
.Events(e=>{e.Select("onselect");})
                                            )
   </text>
   );

 

Thanks,

Anupriya. R

Hi,

We are using Kendo controls for MVC. There was a security scan done in our application, it capture few of the security issues.

We are able to fix all of the security issues except one.

CWE 829 - The application contains unsafe Content-Security-Policy (CSP) directives that could allow malicious script code to be included on the page.

So, as a result we have removed all the custom inline javascript and css to an external files and refer those external .js and .css files in our .cshtml page.

But when we use any of the Kendo controls like Kendo grid or Kendo calendar then in the runtime it create some inline scripts and we are getting application contains unsafe Content-Security-Policy (CSP) directives.

How to bypass those runtime inline scripts created by Kendo controls so that we don't get unsafe Content-Security-Policy (CSP) directives

during the security scan of the application.

Please let me know if you need any more information on this.

I have a div  tag which has all three controls within the tag

1. TabStrip as the main container

2. Panel bar inside the tab

3.Dropdown inside the panel bar.

But the code is giving me the error - Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed.

Can somebody help me to resolve  and  fix it.

Below is my code structure

        <div class="InputArea">
            @(Html.Kendo().TabStrip()
                    .Name("ScenaioNMDTabStrip")
                    .TabPosition(TabStripTabPosition.Top)
                    .Items(tabstrip =>
                    {
                     tabstrip.Add().Text("NMD")
                    .Selected(true)
                    .HtmlAttributes(new { style = "height: 55px;width: 20%;" })
                    .Content(@<text>
                    <div class="col-lg-11" style="float:left;">
                    </div>
                @(Html.Kendo().PanelBar()
                .Name("panelbar1")
                .HtmlAttributes(new { style = "width:200px;" })
                .Items(panelbar=>{
                panelbar.Add().Text("Scenario NMD")
                .Content(@<text>
                    @(Html.Kendo().DropDownList()
                    .Name("EmpyreanVersion")
                    .DataTextField("VersionId")
                    .DataValueField("VersionId")
                    .HtmlAttributes(new { style = "width: 150px;" })
                    )
                </text>);
                })
                
                )
            </text>);
              tabstrip.Add().Text("Empyrean");
                    })
                )
        </div>

Hi,

I have a Kendo Menu with the menu items, when user will click on the menu it should show the Kendo panels vertically and then again click on the menu should hide the panels within that menu. On Click on the Panelbar items should show the respective pages.

Attached is the screenshot for the reference.

 

I have PanelBar called  Interest Rates and 3 children. I want the parent and all the 3 children cursor to  pointer when hover the mouse.

Interest Rates

Default Rates

Negative Carry

Cash FTP

 

Thanks,

Abdul Ashad

How to make the Kendo Panel Bar children as right indented.

 

For example I have PanelBar called  Interest Rates and 3 children. I want the 3 children as below right indented.

 

Interest Rates

Default Rates

Negative Carry

Cash FTP

 

Thanks

Abdul Ashad

 

 

I have tried to implement Kendo Panel Bar as an accordion in the project, but expand collapse is not working in the panel bar. It is showing the below error in the console,

Attached the source code

I am  using the PanelBar with Items Binding. I am LoadingContent on the Expansion of a Panel.  I would like to "refresh" or re load the content after a panel has been expanded, collapsed and then re-expanded.  Currently, the panel does not re-load the content.

 

Is there a way to force the panel to be re-loaded?

Hi,

I first tried using a loop creating expansion panels which works fine on the face of it but each expansion panel needs to have a Rich Text Editor inside of it and it was not allowing me to click into the editor so I read it may be better to use a PanelBar to achieve what i need.

Basically what I need it to loop through a collection within the ViewModel and create a Panel Bar Item for each one. Each Panel Bar Item will generate 3 Rich Text Editors with Labels.

The markup shows no errors but when running I get "System.ArgumentOutOfRangeException: 'Index was out of range. Must be non-negative and less than the size of the collection. Parameter name: index'". This happens with even a single control referencing the index of the for loop e.g.:

An example of the code is:

@(Html.Kendo().PanelBar()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {

                        for (int i = 0; i < Model.SomeCollection.Count; i++)
                        {
                            panelbar.Add().Text(Model.SomeCollection[i].SectionHeading)
                                .Expanded(false)
                                .Selected(false)
                                .Content(@<text>
                                             
                                @Html.HiddenFor(model => model.SomeCollection[i].SectionUid)

                          </text>);
                        }
                    }))

 

If I don't reference the i of the for loop within the content it works fine e.g.:

 

@(Html.Kendo().PanelBar()
                    .Name("panelbar")
                    .ExpandMode(PanelBarExpandMode.Multiple)
                    .Items(panelbar =>
                    {

                        for (int i = 0; i < Model.SomeCollection.Count; i++)
                        {
                            panelbar.Add().Text(Model.SomeCollection[i].SectionHeading)
                                .Expanded(false)
                                .Selected(false)
                                .Content(@<text>
                                
                                             <div>Some Text</div>

 

                          </text>);
                        }
                    }))

 

The reason I am using a 'for i =' loop instead of a foreach loop is because the collection was not being returned to the controller on post when I used a foreach loop but this method worked which could be down to my inexperience with MVC but I went with what worked.

The Expansion Panels worked great other than not being able to click into the Kendo().Editor() controls at all when they were inside the for loop. If I bound them to a control outside of the loop then they worked fine.

Any help would be greatly appreciated.