Questions on UI for ASP.NET MVC Forum

1 answer

382 views

Hi,
I hope someone can help me with is. I used the basic usage example (from the demo page) and built upon this to be able to read data from my database and then capture both lists in my controller. List two works as expected, however when re-ordering list one, the list item index remains the same.

View

@(Html.Kendo().ListBox()

.Name("RegionOne")

.DataValueField("Id")

.DataTextField("Name")

.DataSource(source => source

.Read(read => read.Action("_GetAvailableDashboardItems_ListOne", "Home"))

)

.Toolbar(toolbar =>

{

toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);

toolbar.Tools(tools => tools

.MoveUp()

.MoveDown()

.TransferTo()

.TransferFrom()

.TransferAllTo()

.TransferAllFrom()

//.Remove()

);

})

.Events(events => events

.Reorder("test")

)

.ConnectWith("RegionTwo")

.BindTo(Model.RegionOne)

)

@(Html.Kendo().ListBox()

.Name("RegionTwo")

.DataValueField("Id")

.DataTextField("Name")

.DataSource(source => source

.Read(read => read.Action("_GetAvailableDashboardItems_ListTwo", "Home"))

)

.BindTo(Model.RegionTwo)

.Selectable(ListBoxSelectable.Multiple)

.ConnectWith("RegionOne")

)

Controller

public JsonResult _GetAvailableDashboardItems_ListOne()

{

var items = _userTask.GetAvailableDashboardItems(CurrentUserId, false);

return Json(items, JsonRequestBehavior.AllowGet);

}

public JsonResult _GetAvailableDashboardItems_ListTwo()

{

var items = _userTask.GetAvailableDashboardItems(CurrentUserId, true);

return Json(items, JsonRequestBehavior.AllowGet);

}

Task

public IEnumerable<AvailableDashboardItems> GetAvailableDashboardItems(string userId, bool Region)

{

var userItems = _userRepository.GetUserDashboardItems(userId);

if (userItems.Count() != 0)

{

var items = userItems.Where(x => x.Region == Region).OrderBy(x => x.Position);

return Mapper.Map<IEnumerable<UserDashboardItem>, IEnumerable<AvailableDashboardItems>>(items);

}

else

{

if (!Region)

return

Mapper.Map<IEnumerable<DashboardItem>, IEnumerable<AvailableDashboardItems>>(_userRepository.GetAvailableDashboardItems());

}

return null;

}

Any help would be greatly appreciated, Thanks

Rich

ListBox

answered on 20 Apr 2018

1 answer

261 views

Can a sortable list ignore multiple elements?

Hello, when using a sortaable list is it possible to ignore more than one type of input? Here is my code:

@(Html.Kendo().Sortable()

.For("#Termset")

.ConnectWith("#AnotherWindow")

.Ignore("input")

.PlaceholderHandler("placeholder")

.Cursor("url('" + Url.Content("~/content/web/sortable/grabbing.cur") + "'), default")

)

As you can see I have defined "ignore" to pass over input fields so that the user can still enter data, I have other elements though which I need it to ignore. Can you define multiple elements for the sortable list to ignore?

Thanks

Sortable

answered on 19 Apr 2018

4 answers

2.8K+ views

Use a detail template (child grid) conditionally

I'm implementing a hierarchical grid. it's all working well except if the parent row's ViewModel doesn't have any child items, it still renders a grid with no rows for the detail template. This is the behavior I would expect, but not the behavior I want. If there are no child items, I want to not render a detail template and also not display the expand icon for that row. Here is a case where the same thing was requested for Kendo for Angular. And below is an excerpt of my view:

01.@(Html.Kendo().Grid<PmtHistAccountPaymentVM>(Model.PaymentHistory)

02. .Name(gridName)

03. .Columns(columns =>

04. {

05. columns.Bound(c => c.PaymentDate).Title("Date").Format("{0:d}");

06. columns.Bound(c => c.PaymentAmount).Format("{0:C}").Title("Amount");

07. })

08. .ClientDetailTemplateId(gridID + "-accountTransGridTemplate")

09. .NoRecords("No Payments")

10. .DataSource(dataSource => dataSource

11. .Ajax()

12. .Model(model => { model.Id(p => p.ID); })

13. .PageSize(15)

14. .ServerOperation(true)

15. .Read(read => read.Action("PaymentHistory_Read", "CustomerAccounts").Data("function(){ ... }"))

16. )

17. .Events(e => e.DetailInit("crm.accounts_pmthist.grid_initDetailGrid"))

18. .Deferred()

19.)

20.<script type="text/x-kendo-temp" id="@gridID-accountTransGridTemplate">

21. #if(TransactionPayments && TransactionPayments.length > 0){#

22. @(Html.Kendo().Grid<PmtHistTransactionPaymentVM>()

23. .Name(gridName+"#=ID#")

24. .Columns(cols =>

25. {

26. cols.Bound(p => p.AccountTransactionProductName).Title("Description");

27. cols.Bound(p => p.CostPaid).Format("{0:c}");

28. cols.Bound(p => p.TaxPaid).Format("{0:c}");

29. cols.Bound(p => p.PaymentAmount).Format("{0:c}");

30. })

31. //.Sortable()

32. //.Filterable()

33. .AutoBind(false)

34. .DataSource(ds => ds.Ajax().ServerOperation(false))

35. .ToClientTemplate()

36. )

37. #}#

38.</script>

As you can see, on line 21, I attempted to add a conditional statement. This seems to have eliminated the detail template successfully but the expand icon still shows on the parent row and creates an error in the DetailInit event handler. I decided I'd better ask if I'm on the right track or if something better is available to accomplish this?

Grid

answered on 18 Apr 2018

5 answers

1.1K+ views

Column Template Not Working for Boolean Field

Has something changed in the latest version of the grid? I have a column on my grid that is bound to a boolean field. It has a template to display a checkmark icon for true and nothing for false. However, the column is automatically displaying a checkbox and my template is being ignored. I've used the same code in other projects so I'm not sure what I'm missing. The only change is the version of telerik I'm using - 2018.1.22.1.

Any ideas?

Here's my code:

@(Html.Kendo().Grid<QuoteViewModel>()
.Name("QuotesGrid")
.BindTo(Model)
.Resizable(resizable => resizable.Columns(true))
.Columns(columns =>
{
columns.Bound(x => x.Quote.Name).Width(100);
columns.Bound(x => x.Quote.Quote_Name__c).Width(300);
columns.Bound(x => x.Quote.Customer).Width(300);
columns.Bound(x => x.Quote.Project_Scope__c).Title("Project Scope");
columns.Bound(x => x.HasSubsOrRentals).Title("Has Sub or Rentals?").ClientTemplate(
"# if(HasSubsOrRentals) { #" +
"<span class='glyphicon glyphicon-ok text-success'/>" +
"# } else { #" +
"<span />" +
"# } #"
);
}))

Grid

answered on 18 Apr 2018

4 answers

103 views

UI Scaffolding - MVC6

I'm having a similar issue to the one described here: http://www.telerik.com/forums/kendo-ui-scaffolding-failed, though this is a VS2015 & MVC6 project. I am unable to select the correct DbContext if the DbContext in question isn't in the web project. I've tried the work around of adding a project reference without success. The DbContext does appear if I use the standard MVC6 scaffolders, just not the Kendo UI Scaffolders.

General Discussions

answered on 18 Apr 2018

1 answer

107 views

Remove multiple rows issue on Edge browser, it's just removing one

Hi,

I have a Telerik MVC Grid with a checkbox on one of the columns in each row, so the user could check the elements that want to be removed from the grid when clicking on a Delete button on grid's toolbar. I followed these examples to implement it in my application:

https://dojo.telerik.com/alePicOQ

http://jsbin.com/ijugav/8/edit?html,output

It was working fine on IE version 8 (we forced to that version before <meta -equiv="X-UA-Compatible" content=">) but when we tried on Edge we started dealing with an issue, just the first row checked it's being deleted. Even those examples are not working properly on Edge.

This is the code I was using to delete all checked rows on IE8 when user clicks on Delete button:

$('#MyDeleteButton').on('click', function () { //Delete from grid all rows that are checked
$("#MyGrid").find("input.chkGridRow:checked").each(function () { //I look for all checkboxes that are checked in my grid
var row = $(this).closest('tr');
grid.removeRow(row);
});
});

I have tried so many different ways and nothing seems to be working for me.

I appreciate any help from you guys!

Thanks in advance!

Oscar

Grid

answered on 18 Apr 2018

6 answers

667 views

EditorFor Image Browser is encoding image url

Hi, i'm using the MVC wrapper for the EditorFor and when i try to select an image that is in nested folders the path i'm getting back has the "/" encoded as %2F.

so if i selected an image that was in a folder 1 or more levels down,

If my root is http://test.test.com/images

and i selected

http://test.test.com/images/Accounts/image.png

I would get

http://test.test.com/images/Accounts%2Fimage.png

I can find all sorts of examples for the Kendo UI version of the editor, where you have to specify a function that will return the url in order for it not to be encoded but nothing for the MVC wrapper.

Html.Kendo()

.EditorFor(x => x.Page)

.Messages(m => m.InsertHtml("Insert Snippet"))

.Tools(t => t

.ViewHtml()

.Snippets(s => {

foreach (var control in controls)

{

s.Add(control.FieldLabel, GetControlSnippet(control));

}

})

.CustomButton(x => x.Name("maximize").Exec("maximize"))

).ImageBrowser(imageBrowser => imageBrowser

.Image("http://test.test.com/images/{0}")

.Read("Read", "ImageBrowser")

.Destroy("Destroy", "ImageBrowser")

.Upload("Upload", "ImageBrowser")

.Thumbnail("Thumbnail", "ImageBrowser")

)

.Encode(false)

Can you please help? i've been banging my head against my desk trying to find a solution for what seems to be a simple problem.

Editor

answered on 18 Apr 2018

1 answer

740 views

How to update JSON array with bool values from grid checkboxes

I am trying to have a grid full of checkboxes that need to have their values (true/false) passed out of the grid into a JSON array.

I already have the template working to pull in the array and display true=checked and false=unchecked, but I cannot get any changes made to these checkboxes to be reflected in the JSON array.

var ds = new kendo.data.DataSource({

type: JSON,

data: current,

schema: {

model: {

fields: {

Name: { editable: false, type: "string" },

Artifacts: { type: "bool" },

Compression: { type: "bool" },

Contrast: { type: "bool" },

ExposureLevel: { type: "bool" },

Noise: { type: "bool" },

Positioning: { type: "bool" },

Sharpness: { type: "bool" }

}

})

var gridIdWithHash = "#" + currentImageGridID

$(gridIdWithHash).kendoGrid({

dataSource: ds,

columns: [

{ field: "Name", width: 10 },

{

field: "Artifacts",

width: 10,

type: "bool",

//editor: customBoolEditor,

template: '<input type="checkbox" class="qualityImageGrid" #= data.Artifacts ? checked="checked" : "" # ></input>'

},

{

field: "Compression",

width: 10,

type: "bool",

//editor: customBoolEditor,

template: '<input type="checkbox" class="qualityImageGrid" #= data.Compression ? checked="checked" : "" # ></input>'

},

{

field: "Contrast",

width: 10, type: "bool",

//editor: customBoolEditor,

template: '<input type="checkbox" class="qualityImageGrid" #= data.Contrast == "1" ? checked="checked" : "" # ></input>'

},

{

field: "ExposureLevel",

width: 10,

type: "bool",

//editor: customBoolEditor,

template: '<input type="checkbox" class="qualityImageGrid" #= data.ExposureLevel ? checked="checked" : "" # ></input>'

},

{

field: "Noise",

width: 10,

type: "bool",

//editor: customBoolEditor,

template: '<input type="checkbox" class="qualityImageGrid" #= data.Noise ? checked="checked" : "" # ></input>'

},

{

field: "Positioning",

width: 10,

type: "bool",

//editor: customBoolEditor,

template: '<input type="checkbox" class="qualityImageGrid" #= data.Positioning ? checked="checked" : "" # ></input>'

},

{

field: "Sharpness",

width: 10,

type: "bool",

//editor: customBoolEditor,

template: '<input type="checkbox" class="qualityImageGrid" #= data.Sharpness ? checked="checked" : "" # ></input>'

},

],

scrollable: false,

editable: true,

navigatable: true,

});

The checkboxes show for all the fields and are usable, but they do not change the value.

Grid

answered on 18 Apr 2018

1 answer

429 views

The 'optionLabel' option is not valid due to missing fields.

Hi,

I am trying to render a Kendo DropDownList, I'm receiving this JavaScript error:

"Uncaught Error: The `optionLabel` option is not valid due to missing fields. Define a custom optionLabel as shown here http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-optionLabel".

Here is my code:

@(Html.Kendo().DropDownListFor(m=>m.Payment32.SelectedPaymentCurrency)
.DataTextField("Mnemonic")
.DataValueField("Mnemonic")
.OptionLabel("Select...")
.Value(Model.Payment32.SelectedPaymentCurrency)
.BindTo(Model.Payment32.AllCurrencies)
.Enable(true)
.Events(evnt => evnt.Change("SelectedPaymentCurrency_Change"))
.HtmlAttributes(new {style = "width: 120px;"}))

Let me know if you need anything else!

DropDownList

answered on 18 Apr 2018

5 answers

1.8K+ views

EditorFor Template Not working

I have a decimal field DocNum and a nullable integer field RelatedDocNum

I've created an EditorFor template called Decimal.cshtml:

@model decimal?

@(Html.Kendo().NumericTextBoxFor(m => m).HtmlAttributes(new { @class = "form-control" }).Decimals(2))

and an EditorFor template called Integer.cshtml:

@model int?

@(Html.Kendo().IntegerTextBoxFor(m => m).HtmlAttributes(new { @class = "form-control" }).Min(int.MinValue).Max(int.MaxValue))

When I use it in my view, like this:

@Html.EditorFor(m => m.DocNum)

and

@Html.EditorFor(m => m.RelatedDocNum)

DocNum renders correctly, but RelatedDocNum does not. The class form-control does not get applied to RelatedDocNum. See screenshot.

I do not have any Kendo or jQuery errors on the page. The page source looks like this:

<div class="col-md-4">

<label class="control-label" for="DocNum">Document Number</label>

<input class="form-control" data-val="true" data-val-number="The field Document Number must be a number." data-val-required="The Document Number field is required." id="DocNum" name="DocNum" type="text" value="5227.00" />

<script>

kendo.syncReady(function(){jQuery("#DocNum").kendoNumericTextBox({"decimals":2});});

</script>

<span class="field-validation-valid text-danger" data-valmsg-for="DocNum" data-valmsg-replace="true"></span>

</div>

<div class="col-md-4">

<label class="control-label" for="RelatedDocNum">Related Document Number</label>

<input class="text-box single-line" data-val="true" data-val-number="The field Related Document Number must be a number." id="RelatedDocNum" name="RelatedDocNum" type="number" value="" />

<span class="field-validation-valid text-danger" data-valmsg-for="RelatedDocNum" data-valmsg-replace="true"></span>

</div>

What am I missing?

TIA!

NumericTextBox

answered on 18 Apr 2018