Questions on UI for ASP.NET MVC Forum

2 answers

265 views

Source code of UI for ASP.NET MVC R2 2017 too old ?

HI

I have download the source code of UI for ASP.NET MVC R2 2017 SP1, but the file version of the bin\Debug\Kendo.Mvc.dll is 2017.2.621.440 that was different with lib\KENDOUIMVC\2017.2.621.545\Kendo.Mvc.dll 2017.2.621.545, Why？the source code too old？

Best regards.

Chris

General Discussions

answered on 06 Apr 2022

0 answers

131 views

Grid filter submenu expanded by default on columnmenu

Hi

I have a kendo grid and have turned on the column menu and the filtering. However, when the user opens the column menu, they then have to click again to open up the filtering. Is there a way to have this expanded by default? I have found some documentation that seems to show that functionality for the Angular side of kendo, but can't find anything for the MVC helpers, or the Jquery.

My grid currently looks like this.

@(Html.Kendo().Grid<HomeGridViewModel>().Name("WorkRequestGrid").Columns(x =>
{
	x.Bound(c => c.Priority).ClientTemplate("#=Priority#").Title("").Filterable(false).HtmlAttributes(new { @class = "crm_grid_priority" }).Width(20).Sticky();
	x.Bound(c => c.ActivityRef).ClientTemplate("<span>#=ActivityRef#</span>").Title("Activity Ref").HtmlAttributes(new { @class = "crm_grid_activity wordWrap" }).Width(135).Sticky();
	x.Bound(c => c.CustomerName).Title("Customer").HtmlAttributes(new { @class = "crm_customerName" }).Width(200);
	x.Bound(c => c.ProposerName).Title("Proposer Name").HtmlAttributes(new { @class = "crm_proposerName" }).Width(200);
	x.Bound(c => c.PostCode).Title("Postcode").HtmlAttributes(new { @class = "crm_postCode" }).Width(80);
	x.Bound(c => c.RequestDueDate).Format("{0:d}").Title("Client Due Date").HtmlAttributes(new { @class = "crm_dueDate" }).Visible(true).Width(100);
	x.Bound(c => c.SurveyType).Title("Survey Name").HtmlAttributes(new { @class = "crm_activityType" }).Width(200);
	x.Bound(c => c.SurveyorName).Title("Surveyor Name").HtmlAttributes(new { @class = "crm_surveyor" }).Width(200);
	x.Bound(c => c.ScheduledDate).Title("Booked date").Format("{0:d}").Visible(true).HtmlAttributes(new { @class = "crm_bookedDate" }).Width(100); 
	x.Bound(c => c.ItemStatus).Title("Status").HtmlAttributes(new { @class = "crm_status" }).Encoded(false).Sortable(false).Filterable(false).Width(200).Sticky();
})
	.HtmlAttributes(new { @class = "crm_grid" })
	.Sortable()
	.Filterable(f=>f.Enabled(true).Extra(false).Operators(Model.GridOperators))
	.ColumnMenu(m=> {
		m.ComponentType("modern");
		m.Columns(c =>
		{
			c.Sort("asc")
			.Groups(g =>
			{
				g.Add().Title("Survey Details").Columns(new List<string> { "ActivityRef", "SurveyType", "RequestDueDate", "SurveyorDueDate", "SurveyorName", "ScheduledDate"});
				g.Add().Title("Property Details").Columns(new List<string> { "CustomerName", "ProposerName", "PostCode" });
				g.Add().Title("Survey Status").Columns(new List<string> { "SurveyStatus" });
			});
		});
	})
	.Resizable(r=>r.Columns(true))
	.ColumnResizeHandleWidth(3)
	.Mobile(MobileMode.Auto)
	.Scrollable(s=>s.Height("400px"))
	.Pageable(p => p.Enabled(true).PageSizes(new int[] { 20, 50, 100,250 }))
	.DataSource(d => d
		 .Ajax()
		 .Read(read => read.Action("Grid_HomePage", "Home"))
		 .PageSize(50)
		 .ServerOperation(true)
	)
)

If anyone has any pointers or can help with this, I'd greatly appreciate it.

Thanks

Filter

Grid

Menu

asked on 05 Apr 2022

1 answer

507 views

DatePicker in a Modal Window Scrolls Window to the Top when Clicked

In my application II have a modal window that contains a date picker. If I move the window down then click the date picker button the window moves back to the top of the screen

Any ideas?

DatePicker

Window

answered on 05 Apr 2022

1 answer

397 views

buttontemplate and theming

I needed to remove the clear button from a form.

So used the buttontemplate functionality ... unfortunately the styling for the button does not match the theme.

what class should I use to have the button match the overall theme. i used the class names that seemed right to me.

@(Html.Kendo().Form<BomMasterViewModel>()

        .Name("KitInfoForm")
        .HtmlAttributes(new { action = @Url.Action("ValidateBomMaster", "BOMEdit"), method = "POST" })
        .FormData(Model)
        .FocusFirst(true)
        .ButtonsTemplate("<div class=\"k-form-buttons\">" + 
                            "<button class=\"k-button k-primary k-form-submit\" type=\"submit\">Submit</button>"+
                         "</div>")

Form

answered on 04 Apr 2022

2 answers

445 views

Site.css Not Found after upgrade

Upgraded to the latest versions and now getting a 404 error trying to load Content/Site.css

I don't have a content/site.css and did not have that file before the upgrade. I can't find any refererence or where that file is supposed to come from.

I can't find any reference in my project or on telerik site or google search for that matter.

Please advise.

Installer and VS Extensions

answered on 01 Apr 2022

0 answers

129 views

Compare dateTo with dateTime.Now and display an image

Hello!

I have a grid in which I need to display if my record is active or not. I have an expiration date (dateTo field) which I need to compare it with dateTime now. If the dateTo is earlier than today then an image is not be displayed. Lets say "active image" if not then to display the "no active image".

Is that possible?

thank you!

 @(Html.Kendo().Grid<ElkeSite.Models.Records>()
.Name("grid")
.Columns(columns =>
 {

columns.Bound(c => c.ID).Hidden();
columns.Bound(c => c.Title);
columns.Bound(c => c.DateTo).Filterable();
columns.Bound(?); 
})
.HtmlAttributes(new { style = "height: 600px;" })
.Scrollable()
.Sortable()
.Filterable()
.Groupable()
 .Sortable()
.Pageable(pageable => pageable
.Refresh(true)
PageSizes(true)
.ButtonCount(5)
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Read", "Records"))
 .PageSize(10)).NoRecords(x => x.Template("<div class='empty-grid'></div>"))
.ToolBar(toolbar =>
{
 //toolbar.Excel();
//toolbar.Pdf();
})
)

Grid

updated question on 01 Apr 2022

1 answer

661 views

RadioGroup label alignment

I have a form with quite a few yes/no radio button groups, split up into sections with divs (bootstrap cards). Each radiobutton is horizontally aligned, and has a label in the form of a span before it.

 <p>
                <span class="lbllabel1">Front page documentation complete?:</span>


                @(Html.Kendo().RadioGroupFor(m=>m.FrontPageComplete)
        .Name("FrontPageComplete")
        .Layout(RadioGroupLayout.Horizontal)
            .Items(i =>
            {
                i.Add().Label("No").Value("No");
                i.Add().Label("Yes").Value("Yes");


            })

        )

            </p>

The lbllabel1 class is defined as:-

.lbllabel1 {
    float: left;
    font-size: small;
    font-weight: normal;
    width: 28.0em;
    text-align: right;
    clear: left;
    margin-right: 5px;
    padding-top: 5px;
}

In most cases the labels vertically align well, but the first entry in each div is misaligned (picture attached). How can I ensure proper alignment to teh radiogroup?

Thanks

RadioGroup

answered on 01 Apr 2022

1 answer

316 views

Uncaught ReferenceError when i deploy webapp in IIS

Hi, we're testing new upgrade versión from 2016 to 2022.

When i run debug in VS everything works fine, all component are loaded and works fine.

When i publish project in VS and deploy in our developtment IIS components like Grid and Treelist doesnt display.

I get this errors :

Uncaught ReferenceError: InitFilterTreeList is not defined
Uncaught ReferenceError: Grid_DataSourceErrorHandler is not defined

It seems that all js files are included in bundles, and in the right order :

bundles.BundleScript("~/bundles/vendorscripts", new string[]
                {
                            "~/Scripts/Vendor/Kendo/2022.1.119/jquery.min.js",
                            "~/Scripts/modernizr-*",
                            "~/Scripts/bootstrap.js",
                            "~/Scripts/autosize.min.js",
                            "~/Scripts/respond.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.all.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/jszip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.core.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.data.odata.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.data.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.userevents.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.draganddrop.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.sortable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.binder.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.fx.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.view.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.button.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.color.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.popup.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.slider.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.colorpicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.list.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.combobox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.calendar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.datepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.timepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.datetimepicker.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.dropdownlist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.selectable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.listview.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.upload.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filebrowser.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.imagebrowser.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.resizable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.drawing.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.pdf.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.window.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.editor.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.numerictextbox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.validator.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.editable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filtermenu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.menu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.columnmenu.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.groupable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.autocomplete.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.filtercell.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.pager.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.reorderable.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.scroller.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.view.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.loader.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.pane.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.popover.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.shim.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.mobile.actionsheet.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.ooxml.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.excel.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.progressbar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.columnsorter.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.grid.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.maskedtextbox.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.virtuallist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.multiselect.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.notification.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.tabstrip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.toolbar.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.tooltip.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treeview.draganddrop.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.dom.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treelist.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.treeview.min.js",
                            "~/Scripts/Vendor/Kendo/2022.1.119/kendo.aspnetmvc.min.js"
                });

We're testing migration to new version with a trial licence, does it have any limitation about it?

if not Why does it display a message like that in IIS but not in VS?

Thanks in advance

General Discussions

Grid

TreeList

answered on 01 Apr 2022

2 answers

150 views

Persist sate, value and data of dropdown in Kendo Grid MVC

I have a dropdown by which I select the category of my data in a Kendo grid in my MVC app.

@(Html.Kendo().DropDownList()
    .Name("kind")
    .HtmlAttributes(new { style = "width:18%" })
    .OptionLabel("Select Category")
    .DataTextField("Cat_Title")
    .DataValueField("Cat_ID")
    .Events(e => e.Change("onChange"))
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Overview_Get_Categories", "Announcements");
        });
    })
)

I need to save my selected value so if the user return back can load his search. I have the following code for my grid



<div class="box-col">
<a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base" id="save">Save State</a>
<a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base"  id="load">Load State</a>

</div>

and in js

<script>

$(document).ready( function () {
    var grid = $("#grid").data("kendoGrid");

    $("#save").click(function (e) {
        e.preventDefault();
        localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
    });

    $("#load").click(function (e) {
        e.preventDefault();
        var options = localStorage["kendo-grid-options"];
        if (options) {
            grid.setOptions(JSON.parse(options));
        }
    });
});

How can I save the value from the dropdown? and then reload it? any idea? Thank you!

DropDownList

Grid