Questions on UI for ASP.NET MVC Forum

1 answer

1.4K+ views

TextBox autocomplete attribute gets set to 'off'

I want browsers to offer autocomplete suggestions for a kendo TextBox I have on a form, but it always renders with autocomplete="off" no matter what I set it to in HtmlAttributes config. How do I make it work?

TextBox

answered on 18 Oct 2021

1 answer

164 views

Removed hierarchy cells reappearing after parent grid is filtered or page is changed

I have the following js function that is called during the dataBound event of the parent grid to remove any hierarchal cells, for readability of the users. So they don't have to expand every row to see that there is no data.

function removeHierarchyCell() {
    var data = $('#GridName').data('kendoGrid').dataSource.data();

    // Remove row expansion when no data
    $.each(data, function (i, row) {
        var hasChildren = row.get("ChildModel");

        if (hasChildren === null || hasChildren === undefined || hasChildren.length == 0) {
            $('tr[data-uid="' + row.uid + '" ] ').find(".k-hierarchy-cell a").remove();
        }
    });
}

It works as it should when the page loads, the issue comes when the parent grid is either filtered or on page change. When the grid populate the rows they now have the expand icon in the hierarchy-cell. I've tried several things but these elements always appear after any operation on the parent grid.

Is there some way to keep these removed from the parent grid?

Filter

Grid

answered on 18 Oct 2021

2 answers

501 views

[Solved] 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

288 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

153 views

[Solved] 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

177 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.6K+ 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

284 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

252 views

[Solved] 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

357 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