Questions on UI for ASP.NET MVC Forum

1 answer

811 views

Ok, I'm getting beat to death by a jquery runtime error:

Object doesn't support property or method 'syncReady'

I've checked around, and the most common reason is that there is a extra jquery script reference on my _Layout.cshtml page.

In my case there isn't any other reference to jquery on that page, or as far as I can tell, in my app.

Can you tell me, based on your experience if there is someplace other than _Layout, that may be causing the problem?

I cannot send you one character of the code I'm working on. My employer would consider this grounds for termination. I cannot send you a mock-up, either. I am paid by the hour and they don't look too kindly on me spending time like that.

If you cannot help me without that sort of evidence, I seriously doubt the wisdom behind getting this product of yours in the first place, because quite frankly, I can't get a damned thing in that package to work for me.

General Discussions

answered on 03 Oct 2018

3 answers

423 views

Required validation on a spreadsheet cell.

Hi,

I'm using the Telerik spreadsheet with MVC wrappers to create an input form and am trying to create a validation error when a cell is empty. I've tried various things along the lines of the below. The obvious way to do this seems to be to set AllowNulls = false but this doesn't behave in the same way that other custom validation does, it immediately adds a red validation check to every null cell with the validation check applied and never triggers the message supplied in the MessageTemplate. If setting AllowNulls(true) then it seems like the custom validation rule doesn't trigger on empty cells, so it seems like I can use the custom validator to check for anything other than a cell being empty.

cells.Add()

.Validation(validation => validation

.DataType("custom")

.From("LEN(B" + currentRowNo + ") > 0")

.AllowNulls(false)

.Type("reject")

.TitleTemplate("A Provider Name is Required")

.MessageTemplate("Please enter a Provider Name"));

Regards

Michael

Spreadsheet

answered on 03 Oct 2018

4 answers

571 views

Conditional in Client Template

Hello,

I'm trying to display a list of checkbox items inside of a list view ONLY if the boolean isSelected field is false.

Here is how I call the listview:
@(Html.Kendo().ListView<TestMultiSelect.ViewModels.TestVM>(Model)
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource => dataSource
.PageSize(20)
.ServerOperation(false)
)
)

My TestView model:
public class TestVM
{
public int ID { get; set; }
public string Name { get; set; }
public bool IsSelected { get; set; }
}

..and here is my Client template:

<script type="text/x-kendo-tmpl" id="template">
<div class="product">
# var isSelected = @#:IsSelected#;
if (isSelected !== true) { # @(Html.Kendo().CheckBox().Name("#:ID#").Label("#:Name#")) # } #
</div>
</script>

I get a failure in the client template.

Any suggestions are appreciated.

Thanks in advance,
Dave

ListView

answered on 03 Oct 2018

2 answers

869 views

Contents of ListView is null at controller

Hi guys,

I think I'm lacking some sort of fundamental knowledge of either Kendo UI or MVC itself. I have a fairly simple example which hopefully you can recreate and explain where I'm going wrong. Before I get to the code I'll explain what I'm trying to accomplish:

I have a form which will be used to capture details as you would normally expect. Inside this form I have a list view, the purpose of which is to allow the user to create and display information about an unspecified number of people. When it comes to saving these details I need the "Base" information to be saved first so that it is given an appropriate Id, after which I can then save the party details which would would of course reference this newly created id.

I'm trying to implement this as follows:

Classes

public class DemoPartyDetails

{

public int id { get; set; }

public string firstName { get; set; }

public string surname { get; set; }

public DemoPartyDetails()

{

}

public class DemoClass

{

public int id { get; set; }

public string randomData { get; set; }

public List<DemoPartyDetails> partyDetails { get; set; }

public DemoClass()

{

partyDetails = new List<DemoPartyDetails>();

}

Controller

public class DemoController : Controller

{

// GET: Demo

public ActionResult Index()

{

DemoClass demo = new DemoClass();

DemoPartyDetails party = new DemoPartyDetails();

party.firstName = "Test Name";

party.surname = "Test Surname";

demo.partyDetails.Add(party);

return View(demo);

}

[HttpPost]

public ActionResult Create(DemoClass model)

{

try

{

if (model.partyDetails != null)

Console.WriteLine("Party details populated");

else

Console.WriteLine("Something went wrong...");

return RedirectToAction("Index");

}

catch

{

return View();

}

View

@model DemoPortal.Models.DemoClass

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title></title>

</head>

<body>

@using (Html.BeginForm("Create", "Demo", FormMethod.Post))

{

<div>

@Html.EditorFor(model => model.randomData)

</div>

<div>

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Party</a>

@(Html.Kendo().ListView(Model.partyDetails)

.Name("demoListView")

.TagName("div")

.ClientTemplateId("demoTemplate")

.DataSource(dataSource => dataSource

.Model(model => model.Id(x => x.id))

)

.Editable(editable => editable.TemplateName("DemoPartyDetails"))

)

</div>

<input type="submit" value="Submit" />

}

</body>

</html>

<script type="text/x-kendo-tmpl" id="demoTemplate">

<div class="demoParty">

<h3>#:firstName#</h3>

<span>#:surname#</span>

</div>

</script>

<script>

$(function() {

var listView = $("#demoListView").data("kendoListView");

$(".k-add-button").click(function(e) {

listView.add();

e.preventDefault();

});

</script>

Editor Template

@model DemoPortal.Models.DemoPartyDetails

@using (Html.BeginForm())

{

<div>

@(Html.HiddenFor(model => model.id))

@(Html.EditorFor(model => model.firstName))

@(Html.EditorFor(model => model.surname))

<div class="btnArea">

<a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

</div>

}

The view displays the pre-populated party data correctly which I guess implies that it has bound to the model correctly. However upon submitting the form the partyDetails list is null. The randomData string is populated correctly with whatever I entered, but I cannot figure out how to pass the partyDetails back to the controller.

I've done a bit of googling and found people sometimes struggle to pass IEnumerables to the controller, but all examples of the solutions do not involve the KendoUI and as such I struggle to implement them.

Any assistance would be greatly appreciated.

Many thanks

Marc

ListView

answered on 03 Oct 2018

1 answer

134 views

'kendoMenu'

My Kendo menu isn't playing nice. I get this runtime error:

Object doesn't support property or method 'kendoMenu'

I've found references to taking out references to jquery in script inclusion, but trying that doesn't help.

Here is my script refs in my _layout.cshtml:

@*@Scripts.Render("~/bundles/modernizr")*@<br> @*<script src="~/Scripts/jquery-1.10.2.js"></script>*@<br> <script src="~/Scripts/kendo.all.min.js"></script><br> <script src="~/Scripts/kendo.menu.min.js"></script><br> <script src="~/Scripts/kendo.aspnetmvc.min.js"></script>

Here is my implemtation:

@(Html.Kendo().Menu()

.Name("Menu")
.Items(items =>
{
items.Add().Action("Index", "Applications");

}));

Advide?

Menu

answered on 03 Oct 2018

1 answer

284 views

Setting default settings for dropdownlist

Hi, we want to change the default values for all dropdowns in our project, so we have not to write it every time, for example set filter to contains in all.

How can we override the constructor or change global settins for it? thank you

DropDownList

answered on 03 Oct 2018

3 answers

1.1K+ views

Add Label to Select All checkbox in Grid Header

I have a kendo grid in an mvc view that I'm using check boxes to select multiple records. I need to add a "Select All" label to the checkbox in the header that is used for selecting all records. Is there a header template that I can use to accomplish that or is this only able to be done through javascript and dom manipulation? Here's my grid:

@(Html.Kendo().Grid(Model.ResultFiles)

.Name("ResultsGrid")

.Columns(columns => {

columns.Select().Width(50);

columns.Bound(r => r.Id).Hidden();

columns.Bound(r => r.SomeNumber).Title("Some Number").Filterable(f => f.Cell(cell => cell.ShowOperators(false))).ClientTemplate("#= SomeNumber# # if(!Viewed) { # <

span id='unread-#= Id #' class='badge new-results'>New</span> # } #");

columns.Bound(r => r.Name).Title("Person").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));

columns.Bound(r => r.DateOfBirth).Title("Date of Birth")

.ClientTemplate("#= DateOfBirthAsString#")

.Filterable(f => f.Cell(cell => cell.ShowOperators(false)));

columns.Bound(r => r.CompanyName).Hidden();

columns.Bound(r => r.SomeOtherName).Filterable(f => f.Cell(cell => cell.ShowOperators(false)));

columns.Bound(r => r.DisplayName).Title("Clinic").Filterable(f => f.Cell(cell => cell.ShowOperators(false)));

columns.Bound(r => r.EntryDateAsString).Title("Collection Date").Filterable(false);

columns.Bound(r => r.ReportGuid).Hidden(true);

})

.ToolBar(t => t.Template(@<text><label>Search By Collection Date Range:</label> <div class="row"> <div class="col-md-3">@Html.Kendo().DatePicker().Name("startSearch").HtmlAttributes(new { PlaceHolder = "Start Date..." })</div> <div class="col-md-3">@Html.Kendo().DatePicker().Name("endSearch").HtmlAttributes(new { PlaceHolder = "End Date..." })</div> <div class="col-md-1"><button class="k-button" type="button" onclick="filterGrid()" style="width: 100%">Search</button></div> <div class="col-md-1"><button class="k-button" type="button" onclick="resetFilter()" style="width: 100%">Reset</button></div> <div class="col-md-1"><button class="k-button" type="button" onclick="downloadFiles()" style="width: 100%">Download</button></div> </div></text>))

.Pageable(p => p.PageSizes(new int[] { 10, 25, 50, 100 }))

//.Selectable(p => p           //    .Mode(GridSelectionMode.Multiple)           //    .Type(GridSelectionType.Cell))           .Sortable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Row)

.Operators(o => o

.ForString(str => str.Clear()

.Contains("Contains")

)

.DataSource(dataSource => dataSource

.Ajax()

.Sort(sort => sort.Add("EntryDate").Descending())

.Read(read => read.Action("Search", "Reports"))

.PageSize(10)

.Model(model=>model.Id(p=>p.ReportGuid))

)

.PersistSelection()

.Events(e => e

.DataBound("onDataBound")

)

Grid

answered on 03 Oct 2018

2 answers

159 views

Custom cell editor on spreadsheet when using MVC wrappers

Hi,

I'm using the Telerik spreadsheet with the MVC wrappers and am trying to add a custom cell editor, (actually an auto complete) but similar to the custom color editor shown in the third example on the Kendo UI demos https://demos.telerik.com/kendo-ui/spreadsheet/custom-editors. However this example is missing from the MVC demos https://demos.telerik.com/aspnet-mvc/spreadsheet/custom-editors and there is no Editor method on the SpreadsheetSheetRowCellBuilder object.

This example https://docs.telerik.com/kendo-ui/knowledge-base/spreadsheet-open-autocomplete-editor-on-cell-click suggests a way that I could use the Select event to achieve the editor in a popup but I would like to add it in cell.

I realize this won't be available out of the box with the MVC wrappers, but would be very grateful if you could suggest how I might create a workaround for it.

Regards

Michael

Spreadsheet

answered on 02 Oct 2018

1 answer

9.1K+ views

DropdownList MVC - Set Default Value at Runtime

I have a Kendo DropdownList as follows:

@(Html.Kendo().DropDownListFor(m => m)
.Name("DealerBoothDropDown")
.DataTextField("DropDownText")
.DataValueField("BoothDetailRowId")
.OptionLabel("Select Dealer and Booth...")
.AutoBind(false)
.Filter("contains")
.HtmlAttributes(new { style = "width:500px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDealersBoothsForDropDown", "DealerAccounting");
})
.ServerFiltering(true); // Let's do server side filtering
})
.Events(e => {
e.Select("onSelect");
})
)
</div>

When the page loads, I would like to execute some JS that sets a default value in the Dropdown. Can you show me how I might do this.

DropDownList

answered on 02 Oct 2018

1 answer

213 views

2018.3.911 Material Theme Customisation

Hello,

I have a project with the latest version of Kendo UI ASP.NET MVC.

In my bundle config i am loading the 2 .css files

kendo.common-material.min.css

kendo.material.min.css

Everything runsand looks as expected with the blue material theme. I want to be able to override the accent/primary color in the theme.

I've tried downloading and using the npm package @progress/kendo-theme-material, overriding the scss variables and recompiling the .css.

when i add this file into the bundle config it completely messes up the controls, padding, margin, spacing and the actual look of the controls is wrong.

How do i customise the material theme?

Cheers

Mike

General Discussions

answered on 01 Oct 2018