Questions on UI for ASP.NET MVC Forum

1 answer

218 views

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

Date/Time Pickers

answered on 29 Mar 2021

1 answer

484 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

132 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.

Date/Time Pickers

answered on 29 Mar 2021

2 answers

423 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

2.9K+ 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

617 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

1 answer

392 views

GridView in ASP.NET Migration to use Kendo Grid

We are trying to migrate from using ASP.NET GridView (.ascx file extensions) to use kendo grid features. Currently we are using the licensed product of Kendo UI for our other coldfusion applications. During this research we figured out that migrating ASP.NET requires additional license features like Kendo ASP.NET MVC product. Also our page is very simple dynamic page which displays users table with all the details from the stored procedures. It has only one main functionality to activate/deactivate multiple users using a checkbox. Currently we are using asp:GridView features to handle this. Could you please give more inputs on the following questions.

1. Whether ASP.NET migration to use Kendo Grid feasible?

2. System requirements

3. Kendo Products needed.

4. Steps to setup Kendo in existing ASP.NET Project

5. Configuration level changes needed

6. Any examples on this .ascx pages to use kendo grid with simple functionality.

7. OR Can we use current license product (Kendo UI ONLY) to address this change?

Thanks,

Sujatha

General Discussions

answered on 25 Mar 2021

4 answers

277 views

Using bearer auth token on excel export Kendo MVC

Hello

I'm using an external api for my grid datasource, for authorization I'm using this solution:

https://www.telerik.com/forums/asp-net-core-custom-datasource-pass-bearer-token

and is working fine for read event.

$(() => {
var grid = $("#grid").data("kendoGrid");
grid.dataSource.transport.options.read.beforeSend = beforeSendHandler;
});

But unfortunately is not working in Excel Export option, apparently is creating a new web request that doesn't follow the beforeRequest function flow.

Is it possible to add the header to the export request or should I create be a custom action?

Greetings

Grid

answered on 24 Mar 2021

2 answers

145 views

Master-Detail Grid onload all rows collapsible

I designed the Master-detail grid view. But, when I run the code it always show the first row expanded. How to make all rows collapsible on load of page? Rows will be expanded when I click on expand icon.

Example followed : https://demos.telerik.com/aspnet-mvc/grid/detailtemplate

Grid

answered on 24 Mar 2021