Questions on UI for ASP.NET MVC Forum

5 answers

1.6K+ views

kendogrid return null to controller (IEnumerable<T> is null but when I use T there is only one element returned from view)

Hi,

We are using KendoGrid in "inCell" mode with "Batch" mode enabled and according to telerik examples we've created our model like following :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace webArta.Models

{

public class ASoratModel

{

public long id { get; set; }

public String name { get; set; }

public String title { get; set; }

}

Then I've create my BLL as following :

using System;

using System.Collections.Generic;

using System.Data;

using System.Data.SqlClient;

using System.Linq;

using System.Web;

namespace webArta.Models

{

public class ASoratService

{

private String sqlCnStr = functions.GetConnectionString(false);

public List<ASoratModel> Read()

{

List<ASoratModel> data = new List<ASoratModel>();

using (SqlConnection connection = new SqlConnection(sqlCnStr))

{

connection.Open();

using (SqlCommand command = new SqlCommand("select * from [test]", connection))

{

using (SqlDataReader reader = command.ExecuteReader(CommandBehavior.CloseConnection))

{

while (reader.Read())

{

ASoratModel m = new ASoratModel();

m.id = (long)reader["id"];

m.title = (string)reader["title"];

m.name = (string)reader["name"];

data.Add(m);

}

return data;

}

public void Create(ASoratModel model)

{

model.name = "";

model.title = "";

String sql =

"INSERT INTO [test] (name,title) VALUES ('" + model.name + "','" + model.title + "')";

using (SqlConnection connection = new SqlConnection(sqlCnStr))

{

connection.Open();

using (SqlCommand command = new SqlCommand(sql, connection))

{

command.ExecuteNonQuery();

}

public void Update(ASoratModel model)

{

String sql =

"update [test] set name='" +model.name+"',title='"+model.title+"' where id="+model.id;

using (SqlConnection connection = new SqlConnection(sqlCnStr))

{

connection.Open();

using (SqlCommand command = new SqlCommand(sql, connection))

{

command.ExecuteNonQuery();

}

public void Delete(ASoratModel model)

{

}

and my controller as following :

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

return Json(aSoratService.Read().ToDataSourceResult(request));

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Update([DataSourceRequest] DataSourceRequest request,

IEnumerable<ASoratModel> asorats

){

foreach(var item in asorats)

{

aSoratService.Update(item);

}

return Json(asorats.ToDataSourceResult(request,ModelState));

}

and this is my view :

@using webArta.Models

@using System.Linq

@using System.Data

@(Html.Kendo().Grid<webArta.Models.ASoratModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.name);

columns.Bound(p => p.title);

//columns.Command(c =>

//{

// c.Edit();

// c.Destroy();

//});

})

.ToolBar(t =>

{

t.Save();

t.Create();

})

.DataSource(dataSource => dataSource

.Ajax()

.AutoSync(true)

.Batch(true)

.Model(m => m.Id(p => p.id))

.Read(r => r.Action("Read", "MY_CONTROLLER"))

.Create(update => update.Action("Create", "MY_CONTROLLER"))

.Update(update => update.Action("Update", "MY_CONTROLLER"))

.Destroy(update => update.Action("EditingInline_Destroy", "MY_CONTROLLER"))

.ServerOperation(true)

)

.Navigatable()

.Pageable()

.Sortable()

.Editable(ed =>

{

ed.Mode(GridEditMode.InCell);

ed.CreateAt(GridInsertRowPosition.Bottom);

})

.Scrollable()

.Filterable()

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

)

yet when we try to update the data inside the Grid the Update method will get null value for it's second argument (IEnumerable<ASoratModel> asorats) but when we omit the IEnumerable<T> we only get one item.

we want need to get collection of all items when they are updated for showing them correctly in the Grid.

We are confused since we can't find any clue where are we doing wrong.
One thing to note : we don't have any ViewModel class it is all we have that I've copied here.

Grid

answered on 15 Aug 2018

3 answers

328 views

[Solved] Grid Popup editing update command

Is there a way to have the pop up editor only call the update command on an edited item when the update button is pressed on the popup? It looks like when they click in the next field to update the previous field calls the update command and it causes a lot of database overhead/ time waste if there are multiple fields that need to be updated. I may be missing something or my update code is messy (which it is) but it seems like I should be able to only have the one write back to the model instead of one after every field change.

Grid

answered on 14 Aug 2018

1 answer

207 views

Infinite loop in IE using a virtual scroll in a grid

Hi,

In my html page I use a grid with virtual scroll:

Html.Kendo().Grid<dynamic>(). ....

.DataSource(dataSource => dataSource
.Ajax()
.Read( read => read.Action(....))

.Scrollable(scroll =>
{
scroll.Height("100%");
scroll.Virtual(true);
}) ...

Everything works fine except for :

- a special request (filter)

- Only on IE11 (It's OK for Chrome, FF & Edge)

In this case, my browser freezes.

I launched an analysis and it would seem that there is an javascript infinite loop (see attachment)

If I remove the virtual scroll, everything works properly

Regards

Grid

answered on 14 Aug 2018

4 answers

1.0K+ views

DatePicker: Execute Custom Function when any date is selected

How would I execute a custom function when any date has been selected?

I searched for examples, but couldn't find a function that takes into consideration dynamic datepicker ID/class.

Can we add a custom function here without using Events? Or if we have to use events, can we pass the datepicker id/class to the function -- if so how?

My markup:

@(Html.Kendo().DatePicker()

.Name(@Model.Name)

.Footer("Today - #= kendo.toString(data,'ddd, MMM dd, yyyy') # ")

.Min("1/1/1900")

.Max("1/1/2200")

.Events(e => e.Close("onClose"))

//.Enable((Model.SelectedValues != null && Model.SelectedValues.Length > 0) || !Model.AllowNullValue)

.Value(string.IsNullOrEmpty(Model.SelectedValues)

? null

: Model.SelectedValues

.Replace("[OneMonthAgo]", DateTime.Now.AddMonths(-1).Date.ToString())

.Replace("[OneYearAgo]", DateTime.Now.AddYears(-1).Date.ToString())

.Replace("[CurrentDate]", DateTime.Now.Date.ToString())

)

.HtmlAttributes(new { AllowNullValue = Model.AllowNullValue.ToString().ToLower(), Prompt = Model.Prompt, onblur = "DatePickerChangeHandler(this)", Class = "DatePicker" })

)

DatePicker

answered on 13 Aug 2018

3 answers

365 views

How to get the destroyed data items from the Grid's dataSource

HI

Everyone always ask how to delete the record,
But my question is :

How to get the destroyed data items from the Grid's dataSource ?
Is there have any official/public method or property ?

Best regards

Chris

Grid

answered on 13 Aug 2018

3 answers

569 views

Grid's Destroy command trigger the dataBound event unexpectedly

HI

dataBound
Fired when the widget is bound to data from its data source.

But why the Destroy command trigger the dataBound event too ???

*XXXXX_Read method not executed while the Destroy command clicked.

--

Incell mode

@(Html.Kendo().Grid<MyCompany.Entity.Models.TXXXXX>)
.Name("XXXXXGrid")
...
.Pageable(pageable => pageable.Enabled(false))
.Columns(columns =>
{
...
columns.Command(command => command.Destroy().Text("Delete")).Width(100);
})
.DataSource(dataSource =>
{
dataSource
.Ajax()
.Batch(true)
//.PageSize(GridConst.PAGE_SIZE)
.Model(model =>
{
model.Id(m => m.UniqueID);
})
.ServerOperation(false)
.Read(read => read.Action("XXXXX_Read", "XXX").Data("xxxxx.filterXXXXXGrid"))
.Events(events =>
{
...
});
})
.Events(events =>
{
events.Change("xxxxx.XXXXXGrid_Change");
events.DataBound("xxxxx.XXXXXGrid_DataBound");
events.Edit("xxxxx.XXXXXGrid_Edit");
})
.HtmlAttributes(new { @style = "height: 100%; min-height: 180px" }))

*Visual Studio 2015
*Telerik DevCraft 2017.2.621.545 (UI for ASP.NET MVC).

Best regards

Chris

Grid

answered on 13 Aug 2018

4 answers

570 views

[Solved] Drop Down List inside Grid, custom navigation

Hi,

I have specific requirements for keyboard navigation within a grid. I have implemented custom navigation in the grid that works very well for text box inputs. However, it does not work well when I navigate across cells containing dropdownlists, as the arrow keys change the values in the list as the user navigates away from these cells.

I use the following function to capture keydown events within the grid:

            // Key-down event handler to provide custom navigation within the grid.
            $("#auto_gen_conn_mngr_grid table").on("keydown", "td", function (e) {
                switch (e.keyCode ? e.keyCode : e.which) {
                    case kendo.keys.UP:
                        e.preventDefault();
                        e.stopPropagation();
                        NavigateVertically(this, navDirection.UP);
                        break;
                    case kendo.keys.ENTER:
                    case kendo.keys.DOWN:
                        e.preventDefault();
                        e.stopPropagation();
                        NavigateVertically(this, navDirection.DOWN);
                        break;
                    case kendo.keys.LEFT:
                        e.preventDefault();
                        e.stopPropagation();
                        NavigateHorizontally(this, navDirection.LEFT);
                        break;
                    case kendo.keys.TAB:
                        e.preventDefault(); // Keep Tab from navigating to elements outside of the grid.
                        e.stopPropagation();
                    case kendo.keys.RIGHT:
                        e.preventDefault();
                        e.stopPropagation();
                        NavigateHorizontally(this, navDirection.RIGHT);
                        break;
                }
            });

The problem is, that before this function executes, the dropdown list has already received the 'select' event and modified it's selected item. I can add an event handler to my list's editor template, which uses preventDefault() to cancel the selection. But I can't tell how to differentiate between events that should vs. should not modify the selection.

I would like the selection to be modified only when the user uses holds the 'ctrl' key while pressing the navigational key (i.e. arrows, tab, or enter) or uses a mouse click to click the new selection.

I can do this in one of two ways, but I am stuck on both:

method 1: intercept the keydown event before it is handled at the dropdownlist.

problem 1: the event has already gone to the dropdownlist before I capture it, using the code above.

method 2: add a handler in the list's editor template for the 'select' event, then use e.preventDefault() when the user is pressing a navigational key without holding down the 'ctrl' key.

problem 2: I don't know if it is possible to get the keystroke information from the context of the list editor's onSelect handler.

And finally, if there is no way to accomplish either of the above, disabling keyboard navigation within the dropdown list would be an acceptable compromise. This is not the preferred approach, but if it is possible to configure the dropdownlist to only accept mouse clicks in order to change the selection, that would enable the users to navigate the grid with the keyboard without modifying the selections in the dropdown lists.

Thanks,

Ryan

DropDownList

answered on 10 Aug 2018

3 answers

480 views

Prevent scheduled task from being deleted

Hi,

Is it possible to prevent certain scheduled tasks from being deleted in the user interface?

Scheduler

answered on 10 Aug 2018

3 answers

535 views

MultiSelect - If any value is selected, then execute custom function, if none, also execute custom function

I'm looking to show/hide the "require input" asterisk (*) once a value is not selected/selected. Is there a way to do this with MultiSelect? I see that there are onSelectAll & onDeselectAll but there's no function that handles onSelect of any value -- how would I handle this with MultiSelect?

My current markup:

<div id="@(Model.Name + "InitialLoading")" class="CheckboxListInitializing"><img style="height: 13px;margin-right: 5px;" src="../Content/images/loading.gif">Loading...</div>

<span id="@(Model.Name + "Loading")" style="display:none;position: absolute;">

<img src='../Content/kendo/2016.1.406/Bootstrap/loading.gif' />

</span>

<script>

$(function ()

{

$("#@(Model.Name)").multiselect({

includeSelectAllOption: true

//, selectAllValue: "[All]"

, selectAllText: "(Select All)"

, enableFiltering: true

, enableCaseInsensitiveFiltering: true

, onDropdownShown: function (event) {

this.$select.parent().find("button.multiselect-clear-filter").click();

this.$select.parent().find("input[type='text'].multiselect-search").focus();

$(".@(Model.ItemName)").hide();

}

, nonSelectedText: " "

, onInitialized: function () { $("#@(Model.Name)InitialLoading").hide(); $(".@(Model.ItemName)").hide(); }

, onChange: function () { ListChangeHandler( $("select[id=@Model.Name]"));}

, onSelectAll: function () { ListChangeHandler( $("select[id=@Model.Name]")); $(".@(Model.ItemName)").hide();}

, onDeselectAll: function () { ClearWholeList($("select[id=@Model.Name]")); ListChangeHandler($("select[id=@Model.Name]")); $(".@(Model.ItemName)").show(); }

@*@(!string.IsNullOrEmpty(Model.ChangeHandler) ? ", onChange: " + Model.ChangeHandler + ", onSelectAll: " + Model.ChangeHandler + ", onDeselectAll: " + Model.ChangeHandler : "")*@

});

LoadListBox("@(!string.IsNullOrEmpty(Model.CascadedFromName) ? Model.Name : "")");

})

</script>

MultiSelect

answered on 10 Aug 2018

4 answers

205 views

Sass themes issues

Hi,

I have some issues with sass themes.

My context : Asp.Net MVC & scss files from https://github.com/telerik/kendo-theme-default

1) IE11 & grid

There are positioning problems with the filter, column and refresh icons on the grid (cf themebuilder & filter icon on header).
One of them comes from the use of nested calc for the bottom property

2) IE11 & charts

When launching the themebuilder/asp.net on IE11, the first time the charts don't display correctly.
If we change the theme via color swatch, they are OK.

3) Tabstrip color

When you put an item (Treeview, ...) in a tab, it takes the main color ($accent) instead of the text color ($text-color).

This is due to the class '.k-tabstrip .k-item' which must be replaced by '.k-tabstrip .k-tabstrip-items .k-item'

Regards

General Discussions

answered on 10 Aug 2018