Questions on UI for ASP.NET MVC Forum

1 answer

2.1K+ views

I'm updating an application (based on version v2021.2.511) porting bits of code to a new application based on v2022.2.510). I'm trying to get a multi-select drop-down list with checkboxes working. The requirment is for the check boxes to be checked if an item in the list is selected, and unchecked if it is unselected.

The following styles were added:-

<style type="text/css">

    @*.EditButton {
        display:@ViewBag.EditButton;
    }*@

    .nopadding {
   padding-left: 0 !important;
    padding-right: 0 !important;

}

 .k-multiselect:after {
         content: "\25BC";
         position: absolute;
         top: 30%;
         right: 10px;
         font-size: 10px;
     }

    .k-multiselect-wrap.k-floatwrap li.k-button .k-icon.k-i-close
  {
    display: none !important;
  }

}
</style>

<style scoped>

    .k-widget.k-multiselect {
        width: 300px;
        vertical-align: middle;
        display: inline-block;
    }
</style>

The multiselect definition is:-

 @(Html.Kendo().MultiSelect()
                                .Name("msSpecialty")
                                .DataValueField("Code")
                                .DataTextField("Description")
                                    .Placeholder("All specialties...")
                                    .ItemTemplate("<input type='checkbox' /> #=data.Description#")
                                    .AutoClose(false)
                                    .ClearButton(false)
                                    .TagMode(TagMode.Multiple)
                                //.TagTemplate(" <span>#= Description #</span>")

                                .Events(e => e.Close("onSpecListChange").DataBound("specListDataBound").Change("chkFix"))
                                .DataSource(src => src.Read(rd => rd.Action("getOpenClockSpecDDL", "Validation")).ServerFiltering(false))
                                    .HtmlAttributes(new { style = "width:300px;" })
                        )

And the javascript:-

 var currentSpec = '-X-';

 function onSpecListChange() {
        var items = this.ul.find("li");
        checkInputs(items);
        //check if list has changed since last close, if so, fire change event (Avoids unnescessary requeries)

        var multiselect = $("#msSpecialty").data("kendoMultiSelect");
        var Svalue = multiselect.value().sort();

        var SpecString = "";

        if (Svalue != null & Svalue != '') {


            for (i = 0; i < Svalue.length; i++) {
                SpecString = SpecString + Svalue[i] + "|";
            }

        }
        else {
            SpecString = "-X-";
        }



        if (currentSpec != SpecString) {
            onChange();
        }




    }

    function checkInputs(elements) {
        elements.each(function () {
            var element = $(this);
            var input = element.children("input");

            input.prop("checked", element.hasClass("k-state-selected"));
        });
    }

    function specListDataBound() {

        var items = this.ul.find("li");
        setTimeout(function () {
            checkInputs(items);
        });

    }

    function chkFix() {
        var items = this.ul.find("li");
        setTimeout(function () {
            checkInputs(items);
        });
    }

 function onChange()
    {

    }

I assume the styles have changed between the versions, because this code is not working. The checkboxes aren't being checked on selection, the list doesn't close when clicked away from, and the closed multiselect isn't displaying properly. How can I get it working as it was please?

MultiSelect

answered on 20 May 2022

0 answers

145 views

Orientation menu with button

Hi,

I use the latest Kendo UI MVC with Visual Studio 2019. I would to know if is possible to change the menu orientation with a button click and not with a combobox option ?

Thank you.

Ignacio

Button

Menu

asked on 19 May 2022

2 answers

1.7K+ views

migration to .Net6

hi,

I'm maintaing a ASP.NET MVC 5.2.7 webapp with kendo 2021.2.616, the question is: will this version of kendo work when the webapp is migrated to .Net 6? otherwise is there a kendo roadmap for such kind of migration?

regards and happy holidays

Application

answered on 16 May 2022

1 answer

149 views

How to disable search option from multicolumncombobox

MultiColumnComboBox

answered on 16 May 2022

0 answers

110 views

ASP-MVC Telerik Grid crashes if page, size or filter parameter in request are modified via Postman

I have created an ASP.NET MVC application and I am using Telerik Grid control in it. An issue is reported by QA that if the page call via postman is issued with incorrect values for page, size or filter parameters e.g., filter=aaaaaaaaaaaa, it results in crashing the page. Is there anyway to handle the incorrect values for these three grid attributes and instead of error dump on webpage, default value gets assigned to erroneous parameter.

Version Information
.NET Runtime: 4.7
Telerik Web MVC: 2013.2.611.340

Grid

asked on 16 May 2022

1 answer

160 views

[Solved] Where is TextArea in Kendo.Mvc 2019.1.220.545

I do not see TextArea in the WidgetFactory with all the other controls and cannot find an explanation for why it is missing.

TextArea

answered on 13 May 2022

4 answers

763 views

Folder navigation issue

I'm implementing a file manager in an MVC site that works with files located somewhere other than the site. I have got this working fine as long as I stay in the root directory. Trying to change into another directory throws the following error in the console:

Error! Could not navigate to the folder at the requested path(/Message Attachments). Make sure that the parent folder of the target folder has already been loaded.

As changing directories doesn't seem to be triggering anything on the server, I'm at a loss as to how to troubleshoot this.

The code in the view is pretty much right out of the demo at this point:

@(Html.Kendo().FileManager().Name("filemanager")

.DataSource(ds =>

{

ds.Read(operation => operation

.Type(HttpVerbs.Post)

.Action("Read", "Documents")

);

ds.Destroy(operation => operation

.Type(HttpVerbs.Post)

.Action("Destroy", "Documents")

);

ds.Create(operation => operation

.Type(HttpVerbs.Post)

.Action("Create", "Documents")

);

ds.Update(operation => operation

.Type(HttpVerbs.Post)

.Action("Update", "Documents")

);

})

.UploadUrl("Upload", "Documents")

.Toolbar(tb => tb.Items(items =>

{

items.Add("createFolder");

items.Add("upload");

items.Add("sortDirection");

items.Add("sortField");

items.Add("changeView");

items.Add("spacer");

items.Add("details");

items.Add("search");

}))

.ContextMenu(context => context.Items(items =>

{

items.Add("rename");

items.Add("delete");

}))

)

FileManager

answered on 12 May 2022

1 answer

439 views

[Solved] Customize Spreadsheet Toobar for Kendo().Spreadsheet in Dotnet Core App

I am using @Html.Kendo().Spreadsheet() on a Razor page in a DotNet Core App. I want to Configure which options are available on the Toolbar and add a Custom one. I see from an older question from 2017, adding a Custom button was not supported back then. Has that changed?

Can someone point me to the appropriate documentation for that please.

Spreadsheet

answered on 12 May 2022

0 answers

439 views

Is there a way to format a grid filter input without decimals

I have a grid filter on a column that doesn't allow decimals. I tried the solution provided in this forum topic but it appears to only work when Mode(GridFilterMode.Row) is set but I have to use Mode(GridFilterMode.Menu). Do you have a working example for the Mode(GridFilterMode.Menu) option to ensure that decimals don't show up in the input after you filter the grid and reopen the filter input menu or focus out of the filter input for the numeric text box?

code for the column in the grid:

columns.Bound(c => c.ProspectID).Title("ID").Sortable(true).Filterable(ftb => ftb.Cell(cell => cell.Template("customFilter"))).Format("{0:N0}");

Custom form to export the excel from a grid external html button:

<form class="grid-export" action="@Url.Action("CreateExcelFile")" method="POST">
     <input type="hidden" id="export-grid" name="grid" value="" />
     <input type="hidden" id="export-model" name="model" value="" />
     <input type="hidden" id="export-title" name="title" value="Prospects Export" />
     <input type="hidden" id="export-format" name="format" value="xlsx" />
     <input type="hidden" id="export-criteria" name="criteria" value="" />
     <button id="btnGridExport" type="submit" class="submitButtons secondary" onclick="exportExcel()">Export</button>
</form>

JavaScript code to align to that so far:

function exportExcel() {
    var grid = $("#prospectGrid").data("kendoGrid");
    $("#export-model").val(encodeURIComponent(JSON.stringify(grid.columns)));
    $("#export-grid").val("prospectGrid");
    closeGridExport();
}

function customFilter(args) {
    args.element.kendoNumericTextBox({
        decimals: 0,
        format: "n0"
    });
}

Thanks,

Sean

Filter

Grid

updated question on 11 May 2022

8 answers

1.4K+ views

UI for ASP.NET MVC Grid Number Filter is Decimal

I want to have the grid number column (ID field) filter to be integer. How can I accomplish that? When it run, the filter show decimal. There is no JavaScript for it. What is the correct code?

Thank you very much in advance!!
Anieda

Here is the code:

@{ Html.Kendo().Grid(Model) .Name("grid") .Columns(columns => { columns.Bound(request => request.Id).Encoded(false); columns.Bound(request => request.Requestor).Encoded(false); columns.Bound(request => request.RequestDate).Format("{0:MM/dd/yyyy}").Encoded(false); columns.Bound(request => request.ChangeStartDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false); columns.Bound(request => request.ChangeEndDateTime).Format("{0: M/d/yyyy h:mm tt}").Encoded(false); columns.Bound(request => request.RequestSubject).Encoded(false); columns.Bound(request => request.CurrentStatus).Encoded(false); columns.Bound(request => request.CompletedFlag).Encoded(false); }) .Filterable(filterable => filterable .Extra(false

)<br>   .Operators(operators => operators<br>       .ForString(str => str.Clear()<br>           .Contains(

"Contains") .StartsWith("Starts With ")) .ForNumber(num => num.Clear() .IsEqualTo("Equal to"

))<br>       .ForDate(d => d.Clear())<br>    )<br>   .Mode(GridFilterMode.Row))<br>.Pageable(pageable => pageable<br>   .Refresh(

true) .PageSizes(true) .ButtonCount(5)) .Resizable(resize => resize.Columns(true

))<br>.Selectable()<br>.Sortable()<br>.DataSource(dataSource => dataSource<br>.Server()<br>.Model(model => model.Id(request => request.Id))<br>)<br>.ToolBar(toolbar =><br>{<br>   toolbar.Template(@<text><br>    <div

class="toolbar"> <label class="category-label" for="category">Requests</label> @Html.ActionLink("New Request", "New", "Request", null, new { @class = "btn-primary btn" }) </div> </text>); }) .Render();

Grid

answered on 09 May 2022