Questions on UI for ASP.NET MVC Forum

2 answers

452 views

Apply css class to TreeViewItemModel MVC

Hello.

I'm trying to put different color text (and style) on TreeView node item.

I just found that this is archieved with SpriteCssClass property on TreeViewItemModel class but it seems that It is not working.

My view:

<h2>Index</h2>

<script>
    kendo.culture("es-ES"); //week start day depends on the used kendo culture
</script>

@section Menu {
        <h4>Departamento</h4>
        @(
            Html.Kendo().TreeView()
                    .Name("left-menu")
                    .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.depts)
                    .DataSpriteCssClassField("SpriteCssClass")
                    .Events(ev => ev
                        .Select("onSelect")
                        )
        )
}

My CSS file:

/* Treeview Departamentos */

.deptRoot {
    color: dodgerblue;
    font-weight: bold;
}

.deptSub {
    color: cadetblue;
    font-weight: bold;
}

.empSup {
    color:indianred;
    font-weight: normal;
}

.empleado {
    color: white;
    font-weight: normal;
}

This is my JSON Tree data passed by ViewBag.depts var:

[
  {
    "Enabled": true,
    "Expanded": false,
    "Encoded": true,
    "Selected": false,
    "Text": "Informática",
    "SpriteCssClass": "deptRoot",
    "Id": "1#48",
    "Url": null,
    "ImageUrl": null,
    "HasChildren": true,
    "Checked": false,
    "Items": [
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "Soporte",
        "SpriteCssClass": "deptSub",
        "Id": "2#1001",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "RAUL MORENO RAMIREZ",
            "SpriteCssClass": "empSup",
            "Id": "3#221",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": true,
            "Checked": false,
            "Items": [
              {
                "Enabled": true,
                "Expanded": false,
                "Encoded": true,
                "Selected": false,
                "Text": "BRIAN SALAZAR MUÑOZ",
                "SpriteCssClass": "empleado",
                "Id": "4#585",
                "Url": null,
                "ImageUrl": null,
                "HasChildren": false,
                "Checked": false,
                "Items": [

                ],
                "HtmlAttributes": {

                },
                "ImageHtmlAttributes": {

                },
                "LinkHtmlAttributes": {

                }
              }
            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      },
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "Desarrollo",
        "SpriteCssClass": "deptSub",
        "Id": "2#1002",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "GUILLEM ALBERT JULVE SEGOVIA",
            "SpriteCssClass": "empSup",
            "Id": "3#292",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": false,
            "Checked": false,
            "Items": [

            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      },
      {
        "Enabled": true,
        "Expanded": false,
        "Encoded": true,
        "Selected": false,
        "Text": "MTRANS",
        "SpriteCssClass": "deptSub",
        "Id": "2#1003",
        "Url": null,
        "ImageUrl": null,
        "HasChildren": true,
        "Checked": false,
        "Items": [
          {
            "Enabled": true,
            "Expanded": false,
            "Encoded": true,
            "Selected": false,
            "Text": "CARLOS LUNA PACHECO",
            "SpriteCssClass": "empSup",
            "Id": "3#40",
            "Url": null,
            "ImageUrl": null,
            "HasChildren": true,
            "Checked": false,
            "Items": [
              {
                "Enabled": true,
                "Expanded": false,
                "Encoded": true,
                "Selected": false,
                "Text": "ALBERT FERRANDIZ ISERTE",
                "SpriteCssClass": "empleado",
                "Id": "4#576",
                "Url": null,
                "ImageUrl": null,
                "HasChildren": false,
                "Checked": false,
                "Items": [

                ],
                "HtmlAttributes": {

                },
                "ImageHtmlAttributes": {

                },
                "LinkHtmlAttributes": {

                }
              }
            ],
            "HtmlAttributes": {

            },
            "ImageHtmlAttributes": {

            },
            "LinkHtmlAttributes": {

            }
          }
        ],
        "HtmlAttributes": {

        },
        "ImageHtmlAttributes": {

        },
        "LinkHtmlAttributes": {

        }
      }
    ],
    "HtmlAttributes": {

    },
    "ImageHtmlAttributes": {

    },
    "LinkHtmlAttributes": {

    }
  }
]

All items have the same text color. Where is the mistake?

Thx in advance for who resolve this ;)

KR

TreeView

answered on 11 Oct 2021

0 answers

252 views

Kendo Scheduler (Wrong Appointment Time Shown on Calendar) Asp.Net MVC

Hi ,

I am Using kendo scheduler
I am facing issue wrong appointment time is shown on the calendar. The appointment is Stored in Database as Datetime.
and I'm retrieving the database value and showing values in kendo scheduler control
here in my local solution its showing correct data time (database value : 5 PM Indian timing Its showing correctly)

but in server side its showing wrong time(UK Timimg, Its showing wrong time)

Scheduler

asked on 11 Oct 2021

6 answers

117 views

Scheduler customeditor - apend patrial view

Hello,
I need to append partial view into custom editor.

Scenario: When the user clicks the add button in the editor, another line (div) should appear in the custom editor with a drop down list.
Or is there another solution instead of using the patriarchal view? Any examples are welcome :)

Thanks.

Regards
Frank

Scheduler

updated answer on 11 Oct 2021

1 answer

142 views

Clearable number inputs in grid

Hey everyone,

I have a grid with multiple text and numeric columns. I have hidden the filter menu, which comes with an clear button.

The text columns are autocompletes, which have a clear button inside the cell.

My Problem is the numeric input elements ("k-numerictextbox") dont have a clear button inside.

I have tried around adding them later with Javascript and tried using a template, but that didnt work out and was very fragile.

Any ideas how to get that going?

Thanks 😊

Filter

Grid

NumericTextBox

answered on 11 Oct 2021

5 answers

6.4K+ views

How to avoid tooltip to display when title is null or empty?

When we hover on element that has title it will show correctly but when we hover on element that do not have title, it will still display the previous element title. So how to avoid tooltip to display when title attribute is unavailable or empty? Thank you.

$("#Grid").kendoTooltip({
filter: "td"
});

ToolTip

updated answer on 08 Oct 2021

0 answers

236 views

$(template).html() returning undefined for external template

Hello, I have an issue with a Kendo template.

This is in an ASP.NET MVC application, I open an "add new issue tracking form" and click "create" and once the data is sent to the database, it's supposed to give a little message saying everything was successful or failed or whatever. The database stuff works, but I can't get the UI to display.

First, the javascript is wrapped in a `$(document).ready()` so that's not the issue.

What happens is, the create button gets clicked, an ajax call listens to the response from the controller, and when it receives that response, it calls the following function with the appropriate data (and I've checked in the debugger, the data coming in is correct)

function promptConfirmationWindow(template, message, _transType) {
    debugger;

   $("<div id='popupWindow'></div>")
      .appendTo("body").kendoWindow({
      //..config
      }).data('kendoWindow').content($(template).html()).center().open();

    //..

Debugging shows that the template parameter comes in correctly as "#infoTemplate"

Which can be found in the CSHTML as:

<script id="infoTemplate" type="text/x-kendo-template">
    <div class="popupMessage"></div>
    <hr />
    <div class="dialog_buttons">
        <input type="button" class="confirm_no k-button" value="Ok" />
   </div>
</script>

I really don't get why this keeps coming in with .html() as "undefined"

I'm wondering if the fact that this CSHTML is a partial and a modal might be a part of it? The user clicks "add new issue" and the partial with this template in it pops up as a modal, user inputs data, clicks "create" and after the data is submitted to the database and a response is retrieved by the ajax, the pop up as defined by "promptConfirmationWindow()" is supposed to appear. I'm just not figuring out why the $(template).html() is undefined.

General Discussions

asked on 08 Oct 2021

1 answer

220 views

ASP.net MVC Controller Scaffolding

When auto scaffolding a grid with a entity context, foreign key relationships are not respected like in scaffolding a regular asp.net mvc controller. Do we know if foreign key relationships will be supported in the future or are planned on being supported?

Grid

answered on 08 Oct 2021

1 answer

302 views

Excel Export in Server Binding Mode

Hi,

I couldn't add the Export to Excel feature to my Dashboard due to the system error "Excel Export in Server Binding Mode".

I am wondering if it is doable by changing my current code. (As an example, I pasted one of the Dashboard tabs that we'd like to be able to download to Excel).

Thank you!

items.Add()
.Text("LLL")
.Content(@<text>
<b>All values in $mn</b>
<div>
@(Html.Kendo().Grid(Model.LLL_Item).Name("LLL")
.Columns(col =>
{
col.Bound(c => c.Asset).Title("Asset").Width(200);
col.Bound(c => c.Current).Title("Current").Format("{0:C}").Width(100);
col.Bound(c => c.YE0).Title("Year End").Format("{0:C}").Width(100);
col.Bound(c => c.YE1).Title("Year 1").Format("{0:C}").Width(100);
col.Bound(c => c.YE2).Title("Year 2").Format("{0:C}").Width(100);
col.Bound(c => c.YE3).Title("Year 3").Format("{0:C}").Width(100);
col.Bound(c => c.YE4).Title("Year 4").Format("{0:C}").Width(100);
col.Bound(c => c.YE5).Title("Year 5").Format("{0:C}").Width(100);

})
.ToolBar(tools => tools.Excel())

.Excel(excel => excel
.FileName("Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Reports"))
))
</div>

And in Controller I have this:

[HttpPost]
public ActionResult Excel_Export_Save(string contentType, string base64, string fileName)
{
var fileContents = Convert.FromBase64String(base64);

return File(fileContents, contentType, fileName);
}

Grid

ToolTip

answered on 08 Oct 2021

1 answer

121 views

How to suppress spreadsheet control validation popup

Hi

We have implemented the max length validation on cells in spreadsheet control following below link. It works as it stated in the demo. We have 2 questions related to that.

1. Can we suppress the validation popup when user enters more than specified characters? It's not intuitive without the popup but it will work with my 2nd question.

2. Can we stop user from typing more than specified characters in a cell?

https://demos.telerik.com/aspnet-mvc/spreadsheet/validation

Thanks.

Jocelyn

Spreadsheet

answered on 07 Oct 2021

1 answer

585 views

Kendo grid pager buttons are not coming properly when the kendo grid is in a partial view or while loading through bootstrap model dialog

Hi all,

We have updated the kendo to latest version ie:2021. Now we are seeing a strange behaviour like kendo pager buttons are not coming properly if the Kendo Grid is in a partial view or if it is loaded through Bootstrap Modal Dialog. In normal cases, the pager buttons are working fine.

I have attached an image. Please help me out.

Grid

answered on 06 Oct 2021