Questions on UI for ASP.NET MVC Forum

7 answers

1.9K+ views

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

330 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

168 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

958 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

87 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

276 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

136 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

316 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

2 answers

343 views

Taborder skipping DateTime Fields (Possible Bug)

Before starting, I would like to show you that even in your own demo page located Here this problem is reproducible so I do not think it is an issue in my code...

Open up demo linked above and click edit on any item. Tab through the fields using your keyboard. The tab order is not as you see on the screen not to mention that it skips the checkbox field completely forcing mouse use which is not mass entry friendly (I manually fixed the issue with checkbox's so we can ignore that for now).

When you click edit then hit tab first focused field is

1: UnitsOnOrder.

2: CategoryID

3: QuantityPerUnit

4: Update

5: Cancel

6: Last Supply (Date field)

7: Close Button in top Right

8: Product Name

9: Unit Price

10: Discontinued (Checkbox is selected when i open a console and type document.activeElement but clicking space bar does not check the field, although in my instance I worked up a fix)

11: Restarts from 1 again

My issue is that no matter if I can manually force focus on the Product Name field upon popup invocation, there is no way including setting tabindex to make the datepicker to go into focus in the order that it is on the actual form. It always gets focus after the cancel button including in my code. I need to be able to tab into the field in the order that it is shown in the UI.

Any help would be great as I already tried tabindex on all elements and its not being honored.

DatePicker