Questions on UI for ASP.NET MVC Forum

3 answers

288 views

MultiSelect modelbinding in a loop and form post

Hi,

I have a list of objects in my model

public class SoftwareItemPropertiesViewModel

{

....

public List<Annotation> Annotations { get; set; } = new List<Annotation>();

....

that I render to multiple multiselect like so:

for (var i = 0; i < Model.Annotations.Count; i++)

{

<div class="form-group">

@Html.Label(Model.Annotations[i].Name)

<div class="col-sm-10">

@(Html.Kendo().MultiSelectFor(m => m.Annotations[i].SelectedOptions)

.DataTextField("Name")

.DataValueField("Value")

.BindTo(Model.Annotations[i].Options)

.Placeholder(Model.Annotations[i].Placeholder)

)

</div>

}

On post of the form, I can see that the selected data is there as as expected in Annotations[0].SelectedOptions:

Annotations%5B0%5D.SelectedOptions: 4

Annotations%5B0%5D.SelectedOptions: 5

Cost: 515

Description: adfasdf

Guid: 40f339ed-b1e8-4a46-a987-8d5d79ec0be0

Name: abcasdfsadf

OwnerNotes:

SelectedOwners: 1

SelectedOwners: 2

Version:

However, the selected Values are not populated back in the Model object that I receive.

Annotations List is populated with 1 Annotation as expected, but Annotations[0].SelectedOptions is not populated.

There is another Multiselect directly bound to the model and here I see Selected values in the model as expected.

What am I missing?

Regards Erwin

MultiSelect

answered on 29 Aug 2017

1 answer

214 views

All rows as selected automatically.

Hi,
I'm using a kendo grid inside a bootstrap popup, and i need to select some rows. In kendo grid i use the properties "columns.Select().Width(50);" and ".PersistSelection()", when selected one row in the first page all works fine, but when i change the page, all rows in all pages are selected automatically.

¿How can i select only some rows in differents pages?

Grid

answered on 29 Aug 2017

7 answers

1.9K+ views

MVC Kendo Grid Custom Filter

Basically, I am looking for the MVC version of this demo:

http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

.Columns(columns =>
        {
            columns.Bound(e => e.ID)
                .Hidden();
            columns.Bound(e => e.SearchFunctionCode)
                .Hidden();
            columns.Bound(e => e.SearchFunctionDesc)
                .Title("Search Function")
                .Filterable( *** WHAT GOES HERE? *** )
                .HtmlAttributes(new { style = "text-align: center" })
                .HeaderHtmlAttributes(new { style = "text-align: center" });

Do I still reference the javascript?

<script type="text/javascript">
    function SearchFunctionFilter(element) {
        element.kendoDropDownList({
            dataSource: searchfunctions(),
            optionLabel: "--Select Value--"
        });
    }
</script>

Grid

answered on 29 Aug 2017

4 answers

314 views

Cascade filter using ajax binding

Hi,

I have a grid with 2 fields that are connected so a cascade filter needs to be done on them. I manage to do this using Server binding because the UI was refreshed when a filter was done. But now I have to use Ajax binding but the cascade code does not work anymore because the UI is no longer called again

@(Html.Kendo().Grid<TelerikTestModel>()

.Name("grid2")

.Columns(columns =>

{

columns.Bound(product => product.MainField).UI("mainFilter"));

columns.Bound(product => product.DependentField).UI("subFilter"));

})

// .Server()

.DataSource(dataSource => dataSource.Ajax().PageSize(10).Read(read => read.Action("Data_Read", "Home")))

.HtmlAttributes(new { style = "height: 550px;", @class = "myClass" })

.Pageable(x => x.ButtonCount(5))

.Sortable()

.Filterable()

.Scrollable()

//.ColumnMenu()

.Resizable(resize => resize.Columns(true))

.Reorderable(reorder => reorder.Columns(true))

.Events(e => e.FilterMenuInit("filterMenuInit"))

)

function mainFilter(element) {

element.kendoDropDownList({

dataSource: {

transport: {

read: "@Url.Action("FilterMenuCustomization_MainFilter")"

}

},

optionLabel: "--Select Value--",

name: "mainFilter",

});

}

function subFilter(element) {

var dataSource = $("#grid").data("kendoGrid").dataSource;

var filter = dataSource.filter();

var value = -1

if (filter && filter.filters) {

var result = $.grep(filter.filters, function (e) {

return e.field == "MainField";

});

if (result.length == 1) {

value = result[0].value;

}

element.kendoDropDownList({

dataSource: {

transport: {

read: {

url: "@Url.Action("FilterMenuCustomization_SubFilter")",

dataType: "json",

data: {

mainFilter: value,

}

},

optionLabel: "--Select Value--",

name: "subFilter",

});

}

Two questions:
1. in subFilter is there a way to get to the grid datasource without using the grid id? I need to make this code be used by any grid that has a dependent list
2. for the Ajax-binding I was thinking to use the onFiltering event but how can I get to the filter control (to do the subFilter code)? On a page with 2 grids and the same dependent cascade filters I could not find a connection between the grid and the filter controls.

Grid

answered on 28 Aug 2017

2 answers

153 views

Does MVC Diagram allow drop actions?

Hi

I can drag drop onto the kendo ui diagram tool and the drop functions as it should (based on your kendo ui demo) which I have downloaded.

(I cant see a similar MVC version which is a shame)

However, I just cannot get the drop function to work on the MVC version of the diagram control. I can start the drag and see that working but the drop never fires. I can drop onto other elements on the same layout. I'm using the kendoDropTarget as per your demo. If I create a layout with both the MVC diagram and the kendo version (different id's) the kendo ones works the MVC one does not.

I'm using the latest R2 2017 with Chrome browser, MVC 5

Any ideas please?

Thanks Tim

Diagram

answered on 25 Aug 2017

1 answer

931 views

Return metadata from controller on success?

I have an Upload element that needs to receive data from the controller upon a successful upload, but I can't seem to find a way to make this work. My Upload looks like this:

@(Html.Kendo().Upload()

.Name("FileUploader")

.Multiple(false)

.Async(async =>

async.Save("ReplaceDocument", "Library",new { DocumentId = Model.Id})

.AutoUpload(true)

)

.Events(e => e

.Success("UploadSuccess")

)

This saves to an action called ReplaceDocument in my Library controller, and includes the DocumentId from the Model. This all works great.

...but that ReplaceDocument action needs to return some data to the page. I understand that in the simplest version of this scenario, the action should simply return a string with an error message, or just an empty string if the upload is considered a success. I need to return more data. But how?

If I amend the ReplaceDocument action, and make it an ActionResult, I can return a json:

return Json(new { status = "OK", LastUpdatedUTC = lastUpdated }, "text/plain");

...or perhaps:

return Json(new { status = "Access denied.", LastUpdatedUTC = lastUpdated }, "text/plain");

I can retrieve this response data from the UploadSuccess js function. The second example given above should obviously indicate a fail state to the user, but I cannot find a way to tell the Upload element when the file was not accepted.

Is there something I am missing? How do I trigger a fail state? Or is there a better way to receive data from the save Controller?

Upload

answered on 25 Aug 2017

1 answer

82 views

Visibility button widget - share + code review!?!

Hi all,

I have create a new widget for a button to display the columns of a grid outside of the column menu that exist in the telerik framework. The code is based on columns menu functionality removing the sorting, filtering and mobile.

The button also implements the grid reorderable functionality not yet implemented in the telerik framework as this thread says:
http://www.telerik.com/forums/issue-on-column-menu-and-column-reorder-functionality

What I would require, if someone is kind enough, is a code review since I only started working with javascript recently:
Here is the code file and some explanations:

1. I have create a handler just like for columnShow/columnHide to attach to grid columnReorder

that._updateColumnsOrderStateHandler = proxy(that._updateColumnsOrderState, that);

that.owner.bind('columnReorder', that._updateColumnsOrderStateHandler);

...

if (that._updateColumnsOrderStateHandler) {

that.owner.unbind('columnReorder', that._updateColumnsOrderStateHandler)

}

2. In the event I do these actions:
- determine the position of the reorder (this was done by changing the telerik framework in order to receive the position text: 'before' or 'after' - if anyone can determine this in a way that does not require to change the framework please let me know)
- reorder the menuitemcheckboxes
- update the checkbox column indexes

var before = e.newIndex < e.oldIndex;

if (e.position) {

before = e.position === "before";

}

reorder(this.wrapper.find('input[' + fieldAttr + ']'), e.oldIndex, e.newIndex, before, 1);

selector = this.wrapper.find('input[' + fieldAttr + ']');

setTimeout(function () {

updateColumnsIndex(selector);

}, 100);

3. I have adapted the reorder code from the framework with the actions:
- determine the destination menuitemcheckbox
- add in source the menuitemcheckbox(es)
- move the source before or after the destination based on position

function reorder(selector, source, dest, before, count) {

var sourceIndex = source;

source = $();

count = count || 1;

var d = findDestination(selector, dest, before);

if (d.length === 0) {

before = true;

index = 1;

while (d.length === 0) {

d = findDestination(selector, index, before);

index = index + 1;

}

for (var idx = 0, destIndex = dest + (before ? -1 : 0) ; idx < count; idx++) {

t = selector.filter(function () {

return $(this).attr(indexAttr) == (sourceIndex + idx);

}).closest('[role=\'menuitemcheckbox\']');

source = source.add(t);

}

source[before ? 'insertBefore' : 'insertAfter'](d);

}

4. Since there can be columns that can not be shown or hide the determination of destination is done like:
- try to find the menuitemcheckbox based on the index attribute; if successfull return the found menuitemcheckbox
- if the destination is a column not on the menu based on position determine the smallest menuitemcheckbox with the index attribute greater than destination or the greatest menuitemcheckbox with the index attribute less than destination

function findDestination(selector, index, before) {

var d = selector.filter(function () { return $(this).attr(indexAttr) == index; }).closest('[role=\'menuitemcheckbox\']');

if (d.length !== 0)

return d;

col = null;

if (before) {

min = null;

selector.each(function () {

indexValue = parseInt($(this).attr(indexAttr));

if (indexValue > index && (min === null || indexValue < min)) {

min = indexValue;

col = $(this);

}

});

} else {

max = -1;

selector.each(function () {

indexValue = parseInt($(this).attr(indexAttr));

if (indexValue > max && indexValue < index) {

max = indexValue;

col = $(this);

}

});

}

if (col === null) {

return $([]);

}

return col.closest('[role=\'menuitemcheckbox\']');

}

5. The update iterates over all menuitemcheckboxes and determines the column index based on the field attribute

function updateColumnsIndex(selector) {

var columns = toHash(that._ownerColumns(), 'field');

selector.each(function(){

column = columns[$(this).attr(fieldAttr)];

if (column) {

$(this).attr(indexAttr, column.index);

}

});

}

Thank you,

Alexandra

Grid

answered on 23 Aug 2017

2 answers

264 views

Wrap and reuse grid markup

Hi gurus

I have a solution where I would like to have the same grid on multiple pages. But with "same" I mean that the underlying model, behavior, paging etc. is the same but different columns has to be visible on every use.

Is there an elegant way to wrap the same code in a helper class to avoid having to replicate the entire markup multiple times where the only difference will be a couple of "hidden(true)" and "hidden(false)"?

Thanks in advance

Claus

Grid

answered on 23 Aug 2017

1 answer

126 views

EditorFor widget

I’m using Kendo Telerik for ASP .NET MVC, version 2017.2.621. I have encountered an issue with the EditorFor widget - during the adding image proces I’m getting the „A directory with this name was not found” error. The previous version (2016.3.1118) was working correctly, the described issue appeared after the update. Please assist

Editor

answered on 22 Aug 2017

1 answer

299 views

Using multiple versions of jQuery

Hello!

I need to use Kendo UI for ASP.NET MVC within a CRM, which uses jQuery 1.6, but Kendo UI uses jQuery 1.12. How can I use specific version of jQuery only for Kendo UI?

Thanks.

General Discussions

answered on 22 Aug 2017