Questions on UI for ASP.NET MVC Forum

3 answers

369 views

Canceling Add New Record leaves empty row behind

In my Grid, using a custom PopUp editor, when adding a new record, if the user Presses Cancel, the PopUp closes appropriately but there is a blank record left at the top of my grid. How do I prevent this from happening? I imagine I have to refresh the dataSource, but from where?

Grid

answered on 30 Mar 2021

1 answer

319 views

Display only icons

Is there a way to have only icons in the commands of the tree list like there is for Grid?

I manage to do this for Edit, Delete and CreateChild. But I can not do this for Update and Cancel buttons

TreeList

answered on 30 Mar 2021

7 answers

2.3K+ views

Kendo DateTimePicker ASP.NET MVC UI

Hi Team,

I am using the Telerik DateTimePicker ASP.NET MVC, and I noticed that after clicking onto the calendar, once I navigate to "Time" tab of the calendar, "Hour" and "Minutes" are not aligned properly. The higher "Minute" I select does not align in the center. For example, if I select "minute" 10, then it would stay in the center of the minute column. However, if I select 58 minute, then it would not be in center of the minute column.

Please find the attached screenshot to review the issue I am having, and please get back to me as soon as you can.

I am looking forward to hearing back from you.

Best,

Mayur Maisuria

DatePicker

answered on 30 Mar 2021

1 answer

227 views

DateTimePicker ASP.NET MVC

Hi Team,

I am using the DateTimePicker and below is the code.

@(Html.Kendo()
.DateTimePicker()
.ComponentType("modern")
.Name("dpLTSummaryCompletionDate")
.HtmlAttributes(new { style = "width: 185px;"} )
.Events(e => e.Change("dpLTSummaryCompletionDate_change"))
.Value(Model.CompletionDtTm)
.Format("MM/dd/yyyy h:mm:ss tt")
.ParseFormats(new string[] { "MM/dd/yyyy h:mm:ss tt" })
.DateInput(true)
.Max(Model.TakenDtTm.AddYears(1))
.Min(Model.OnsiteDtTm))

//In the Jquery file

$(document).on('keydown keyup', '#dpLTSummaryCompletionDate ', function () {

let dateTimePicker = $("#dpLTSummaryCompletionDate").data("kendoDateTimePicker");
let dateInput = dateTimePicker._dateInput;

let input = dateInput.value().getTime();
let min = dateTimePicker.min().getTime();
let max = dateTimePicker.max().getTime();

if (input < min || input > max) {
dateInput.value(null);
}
});

I have the "keydown keyup" event in the .js file. It seems like the ".getTime()" value for the first time I enter the date by keyboard into the date field is not the same as I get it from the second time and onwards.

For example, I have set up the Min and Max date, and I want to allow a user to enter any date between and including Min and Max dates. However, right now for the first time I enter the date, it allows only Min but not Max since ".getTime()" values for the Max date and user input (assuming user enters the max date) are not the same. As a result, the below condition gets true and date field gets null/empty.

NOTE - It allows me to enter the max date from the second time and onwards, but not the first time because ".getTime()" values are the different for the "Max()" date and the date I enter even though I enter the same Max date.

if (input < min || input > max) {
dateInput.value(null);
}

Please help me out on this since I am having issue and could not resolve.

Best,

Mickey

DatePicker

answered on 29 Mar 2021

1 answer

504 views

Can't get the value of an input element to use in dataSource.read()

Below is my MultiSelect for a List<long> property of my model. In DataSource Read I am giving a js Function name "userIdFilter"

@(Html.Kendo().MultiSelectFor(m => m.PositionIds)

.Filter("Contains")

.Name("PositionIds")

.Placeholder("Select Position")

.ValuePrimitive(true)

.DataTextField("Name")

.DataValueField("Id")

.DataSource(d => d.Read(read =>

{

read.Action("GetAllPositions","PositionCodeAjax").Data("userIdFilter");

}).ServerFiltering(true))

.HtmlAttributes(new { style = "width:95%;" })

this is userIdfilter method in a script tag

<script>

function userIdFilter() {

console.log($("#Id").val());

setTimeout(() => console.log($("#Id").val()), 100);

return { userId: $("#Id").val() };

}

</script>

This is the numeric text box that has id="Id". I have applied display:none to its parent element

@(Html.Kendo().NumericTextBoxFor(m => m.Id).Enable(false))

All these snippets lie in a PopupEditView.cshtml which is called when editing/creating and element from the grid in my index.cshtml file

Now When I call Test it with edit command Edit pop up appears and userIdFilter is called. and value "0" is printed. after 100ms value "1182" is printed. Also my actionMethod recieves value 0.

But when I call userIdFilter() from console it logs value 1182 (the correct value) also object { userId: 1182 } is also logged and after 100ms value 1182 is printed.

Also if I happen to inspect the multiselect in the popup before the request with wrong value for dataSource is sent, Kendo makes a second request with correct value and it works as it should

I just cannot understand this strange behaviour and what is going wrong. Need help

MultiSelect

answered on 29 Mar 2021

1 answer

144 views

DateTimePicker Date ASP.NET MVC

Hi Team,

I am using the below attached code for the date field.

@(Html.Kendo()
.DateTimePicker()
.ComponentType("modern")
.Name("dpLTSummaryCompletionDate")
.HtmlAttributes(new { style = "width: 185px;"} )
.Events(e => e.Change("dpLTSummaryCompletionDate_change"))
.Value(Model.CompletionDtTm)
.Format("MM/dd/yyyy h:mm:ss tt")
.ParseFormats(new string[] { "MM/dd/yyyy h:mm:ss tt" })
.DateInput(true)
.Max(Model.TakenDtTm.AddDays(365))
.Min(Model.OnsiteDtTm))

Since I am using the "DateInput()", I can change the date (Month, Day, Year, etc) from the keyboard (by pressing the arrow key). What I want to do is if I am changing the date and if the date gets prior to MIN date or later to Max date, then I want to display the "placeholder" instead of "date being automatically reset" to either MIN or MAX. For example, let's assume the MIN date is set to "12/12/2012 12:12:12 PM" and as soon as I have the date "12/12/2012 12:12:11 PM" in the date field which is less to MIN date by 1 second (assuming I am changing the date by arrow key), I want to display the placeholder.

I am not sure how to trigger an event for the keyboard input to the date field (by changing a date by an arrow key)

Please reach out to me as soon as you can since I am working on essential project.

DatePicker

answered on 29 Mar 2021

2 answers

462 views

Grid popup edit mode to config all fields are readonly

I have a grid with Edit mode Popup code like below, this popup is good to add a new record.

Is there a way I can have 'View Only' Command instead of 'Edit' to show all data fields of a row in the popup?

I need it is because I need pull out more fields which are not in grid row.

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ItemEdit").Window(w => w.Title("Edit Item").Width(800)))

Thanks.

Grid

answered on 29 Mar 2021

5 answers

3.3K+ views

Converting DataSourceRequest filters to SqlServer parameterized query in controller Read method

For the use case of a remote data source delivering json to a grid one would typically use a simple combination of an entity framework object using extension method ToDataSourceResult. For example:

using Kendo.Mvc.Extensions;

namespace MyProject.Controllers

{

public partial class MyDataEditorController : Controller

{

public ActionResult MyData_Read([DataSourceRequest]DataSourceRequest request)

{

DataSourceResult result = db.MyData.ToDataSourceResult(request, myData => new {

MyDataID = myData.AnalysisID,

...

});

return Json(result);

}

ToDataSourceResult() takes care of inspecting the request and applying the supplied criteria for filtering, sorting, grouping, paging, etc... to create an EF query in the connected database.

What happens if the database object being queried does not have an EF model ?

The above pattern of coding can not be used.

The lack of an EF model could be by design oversite, or the object is dynamic in nature. A dynamically constructed pivot view can not be compile time modeled for EF. The following method shows how the DataSourceRequest filter data is used to construct a parameterized where clause for a query in SqlServer. Slight modifications may be needed for other target data bases:

private string DescriptorToSqlServerQuery (FilterDescriptor fd, SqlCommand command)

{

string parameterName = "@PARAMETER" + command.Parameters.Count;

string result;

// Some string filter values are modified for use as parameteres in a SQL LIKE clause, thus work with a copy.

// The original value must remain unchanged for when ToDataSourceResult(request) is used later.

Object filterValue = fd.Value;

switch (fd.Operator)

{

case FilterOperator.IsLessThan: result = "[" + fd.Member + "]" + " < " + parameterName; break;

case FilterOperator.IsLessThanOrEqualTo: result = "[" + fd.Member + "]" + " <= " + parameterName; break;

case FilterOperator.IsEqualTo: result = "[" + fd.Member + "]" + " = " + parameterName; break;

case FilterOperator.IsNotEqualTo: result = "[" + fd.Member + "]" + " <> " + parameterName; break;

case FilterOperator.IsGreaterThanOrEqualTo: result = "[" + fd.Member + "]" + " >= " + parameterName; break;

case FilterOperator.IsGreaterThan: result = "[" + fd.Member + "]" + " > " + parameterName; break;

case FilterOperator.StartsWith:

filterValue = fd.Value.ToString().ToSqlSafeLikeData() + "%";

result = "[" + fd.Member + "]" + " like " + parameterName; break;

case FilterOperator.EndsWith:

filterValue = "%" + fd.Value.ToString().ToSqlSafeLikeData();

result = "[" + fd.Member + "]" + " like " + parameterName; break;

case FilterOperator.Contains:

filterValue = "%" + fd.Value.ToString().ToSqlSafeLikeData() + "%";

result= "[" + fd.Member + "]" + " like " + parameterName; break;

case FilterOperator.IsContainedIn:

throw new Exception("There is no translator for [" + fd.Member + "]" + " " + fd.Operator + " " + fd.Value);

case FilterOperator.DoesNotContain:

filterValue = "%" + fd.Value.ToString().ToSqlSafeLikeData();

result = "[" + fd.Member + "]" + " not like " + parameterName; break;

case FilterOperator.IsNull: result = "[" + fd.Member + "]" + " IS NULL"; break;

case FilterOperator.IsNotNull: result = "[" + fd.Member + "]" + " IS NOT NULL"; break;

case FilterOperator.IsEmpty: result = "[" + fd.Member + "]" + " = ''"; break;

case FilterOperator.IsNotEmpty: result = "[" + fd.Member + "]" + " <> ''"; break;

default:

throw new Exception("There is no translator for [" + fd.Member + "]" + " " + fd.Operator + " " + fd.Value);

}

command.Parameters.Add(new SqlParameter(parameterName, filterValue));

return result;

}

is called from this method

private string

FiltersToParameterizedQuery(IList<IFilterDescriptor> filters, FilterCompositionLogicalOperator compositionOperator = FilterCompositionLogicalOperator.And, SqlCommand command =

null)

{

// See https://www.telerik.com/forums/how-to-access-datasourcerequest-filters-in-controller-

if (!filters.Any()) return "";

string result = "(";

string combineWith = "";

foreach (var filter in filters)

{

if (filter is FilterDescriptor fd)

{

result +=

combineWith + "("

+ DescriptorToSqlServerQuery(fd, command)

+ ")"

;

}

else if (filter is CompositeFilterDescriptor cfd)

{

result +=

combineWith + "("

+ FiltersToParameterizedQuery(cfd.FilterDescriptors, cfd.LogicalOperator, command)

+ ")"

;

}

combineWith =

(compositionOperator == FilterCompositionLogicalOperator.And)

? " and "

: " or "

;

}

result += ")";

return result;

}

Which is utilized by this read method that applies the data of the DataSourceRequest in the making of a 'manual' query

public ActionResult MyData_Read(DataSourceRequest request)

{

// KendoUI Grid, Custom binding - https://docs.telerik.com/aspnet-mvc/helpers/grid/binding/custom-binding

// db.Database.Log = s => System.Diagnostics.Debug.WriteLine(s);

SqlCommand command = new SqlCommand();

string whereClause = FiltersToParameterizedQuery(request.Filters, command: command);

string orderClause = "";

string pageClause =

" OFFSET " + (request.Page-1)*request.PageSize + " ROWS"

+ " FETCH NEXT " + request.PageSize + " ROWS ONLY"

;

string apv1stColName = chemistryColumns[0].ColumnName;

List<string> orderedMembers = new List<string>();

string comma = "";

if (request.Groups != null)

{

foreach (var group in request.Groups)

{

if (orderedMembers.Contains(group.Member)) continue;

orderClause += comma

+ group.Member

+ ((group.SortDirection == System.ComponentModel.ListSortDirection.Ascending) ? " ASC" : " DESC");

comma = ",";

orderedMembers.Add(group.Member);

}

if (request.Sorts != null)

{

foreach (var sort in request.Sorts)

{

if (orderedMembers.Contains(sort.Member)) continue;

orderClause += comma

+ sort.Member

+ ((sort.SortDirection == System.ComponentModel.ListSortDirection.Ascending) ? " ASC" : " DESC");

comma = ",";

orderedMembers.Add(sort.Member);

}

if (!orderedMembers.Contains(apv1stColName))

{

orderClause += comma + apv1stColName + " ASC";

}

if (whereClause.Length > 0) whereClause = " WHERE " + whereClause;

if (orderClause.Length > 0) orderClause = " ORDER BY " + orderClause;

// --- connect and execute page query and count all rows per filter

string pageQuery = "select * from MY_UNMODELED_DATABASE_OBJECT" + " " + whereClause + orderClause + pageClause;

string countQuery = "select count(1) from MY_UNMODELED_DATABASE_OBJECT" + " " + whereClause;

var dataTable = new System.Data.DataTable();

int total = 0;

using (var connection = new SqlConnection(db.Database.Connection.ConnectionString))

{

command.Connection = connection;

command.CommandText = pageQuery;

using (var dataAdapter = new SqlDataAdapter(command))

{

dataAdapter.FillSchema(dataTable, System.Data.SchemaType.Mapped);

dataAdapter.Fill(dataTable);

}

command.CommandText = countQuery;

total = (int) command.ExecuteScalar();

}

// --- a little fakery to request.Page to make things work in ToDataSourceResult()

request.Page = 1;

DataSourceResult result = dataTable.ToDataSourceResult(request);

result.Total = total;

return Json(result);

}

Enjoy and happy coding.

Grid

answered on 28 Mar 2021

1 answer

3.1K+ views

Custom Group header for Grouping column

Hi Team,

I am working on Kendo grid grouping , my requirement is need to change the group header name instead of column name .

Example :

My grid contains following columns

name , city , state , language

we need to group by language column and is set to visible false in grid.

Tried with

1. GroupHeaderTemplate

2. ClientGroupHeaderTemplate(@<text>Language (local language) : </text>)

Thanks & Regards,

Sp

Grid

answered on 26 Mar 2021

1 answer

656 views

Nested Grid in columns bound dataitem

Hi,

i use nested grid. The inner grid too (grid name: YemekTipGrid_#=Id#) I want to create a dynamic button

columns.Bound(b => b.Id).Width(205).Title(Localizer["View_Common_Operation"]).ClientTemplate("#=operationButtonsInner(data)#");

this works fine for the grid above.Seems to work for the inner grid but the data of the above grid is coming

shown in telerikforum_3.jpg. data-id = 2 seen here is the first address of the upper grid. However, the expected value is 7 instead of 2 How can I get the PK IDs of the grid object at the bottom

@(Html.Kendo().Grid<ListYemekTipDto>()
.Name("YemekTipGrid")
.Columns(columns =>
{
//columns.Bound(b => b.Id).Title("").ClientHeaderTemplate("<input type='checkbox' id='ck-check-all' />").ClientTemplate(("<input type='checkbox' selector=#=ID# class='ck-secim' ID='#=ID#' name='Sec' />")).Filterable(false);
columns.Bound(b => b.Tip).Title(Localizer["View_YemekTip_Model_Tip"]);
columns.Bound(b => b.Ucret).Title(Localizer["View_YemekTip_Model_Ucret"]);
columns.Bound(b => b.ParentYemekTipId).Title(Localizer["View_YemekTip_Model_ParentId"]);
columns.Bound(b => b.Not).Title(Localizer["View_YemekTip_Model_Not"]);
columns.Bound(b => b.Aciklama).Title(Localizer["View_YemekTip_Model_Aciklama"]);

columns.Bound(b => b.KayitDurumu).Title(Localizer["View_Common_KayitDurumu"]).Width(50).ClientTemplate("<span id='badge_#=Id#' class='badgeTemplate'></span>");
columns.Bound(b => b.Id).Width(205).Title(Localizer["View_Common_Operation"]).ClientTemplate("#=operationButtons(data)#");
})
.ToolBar(toolbar =>
{
toolbar.Search().Text(Localizer["Grid_Common_Search"]);
//toolbar.Excel().Text(Localizer["Grid_Common_Excel"]);
//toolbar.Pdf().Text(Localizer["Grid_Common_Pdf"]);
//toolbar.Custom().Text(Localizer["Grid_Common_NewRecord"]).IconClass("fa fa-plus").HtmlAttributes(new { @class = "modal-action", data_type = "get", data_url = Url.Action("Ekle", "YemekTip", new { area = "Yonetim" }), data_grid = "#YemekTipGrid", data_title = Localizer["View_Common_CreateOperation"], data_buttons = "true", data_savetext = Localizer["View_Common_Create"] });
})
.Pageable()
.Sortable()
.Filterable()
.Navigatable()
.ColumnMenu()
.ClientDetailTemplateId("templateInner")
.HtmlAttributes(new { style = "height:430px;" })
.Resizable(r => r.Columns(true))
.Reorderable(r => r.Columns(true))
.Groupable(g => g.ShowFooter(false))
//.Events(events => events.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(15)
.AutoSync(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("Grid", "YemekTip", new { area = "Yonetim" }).Type(HttpVerbs.Post))
).Events(events => events.DataBound("dataBound"))
)

Grid

answered on 26 Mar 2021