Questions on Kendo UI for jQuery Forum

12 answers

578 views

Grid filter dateTime independent of time

Hi, I am converting a page from webforms and used the Telerik for AJAX RadGrid control originally which provided filtering by date only if specified for dateTime values. Is this Telerik product lacking this feature?

Grid

answered on 27 Jan 2017

3 answers

158 views

Create Tab Stip Items not "inline" ?

HI --

We have existing code creating a tab strip with a series of tabs like this

@(Html.Kendo().TabStrip().Name("tabStrip_#=MeterID#")
.SelectedIndex(0)
.Events(events => events.Show("loadDetails(#:EnrollmentID#, #:MeterID#, #:IsCrossSell#)"))
.Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
.Items(items =>
{
items.Add().Text("Documents").Content(
"<div id='divDocumentDownload_#=MeterID#'></div>" +
);

items.Add().Text("Other Fields").Content(
"<div id='divOtherFields_#=MeterID#'></div>"
);

items.Add().Text("Error Report").Content(
"<div id='divErrorReport_#=MeterID#' style='padding-top: 5px; padding-left: 5px; border:solid; border-width: 1px; margin-top: 10px; background-color: \\#F0F0F0;'>" +
"</div>"
);

items.Add().Text("Bill Images").Content(
"<div id='divBillLinks_#=MeterID#'></div>" +
);

items.Add().Text("Photo ID").Content(
"<div id='divPhotoIdWrapper_#=MeterID#'>" +
);

}).ToClientTemplate())

Is it possible to create the tabs ("items") separately and then add them in the code? Something like this

.Items(items =>
{item.Add(itemA).Add(itemB)}

The reason I'm asking is that the items themselves are fairly complicated (I have simplified the code above) and it would be much easier to modify and debug code if it wasn't one large chunk.

Thanks

Rich

TabStrip

answered on 27 Jan 2017

1 answer

398 views

How Do I force a postback to controller when combo item selected

hello,

I am new to the Kendo UI so I really need some help. I'm sure this is simple for those knowledgable, but I have tried everything.

I have a kendo combobox on my index.cshtml view. The combo is filling correctly. It is bound to a list within my model.

What I need to do is make it post back to my index controller when a user makes a selection. I have spent hours reading the forums and other online blogs and cannot seem to find an example like mine using combobox.

Here is my combobox:

.Content(@<text>
<div style="padding:5px">
@(Html.Kendo().ComboBox()
.Name("PaystubsCombo")
.Placeholder("Select a Paystub")
.BindTo(Model.PaystubsAvailable)
.DataTextField("WedDDDisplay")
.DataValueField("WedValue")

)
</div>
</text>)
)

Thanks for the help in advance!

ComboBox

answered on 27 Jan 2017

1 answer

763 views

Grid Inline editing - accept and start new record

I am using grid with inline editing and looking for advice on how to auto-trigger 'Add new record' when a current new record update is Ctrl-Clicked or Ctrl-Entered.

If the edit row is for an existing row the Ctrl- modifier should not cause a new record.

Also, if a new row is being edited and 'Add new record' is clicked I would like to alert the user there is unsaved data. At which point they can cancel and continue editing, accept inputs and create a new record or ignore inputs and create a new record.

Grid

answered on 27 Jan 2017

3 answers

2.0K+ views

Display Up/Down Sorting

Is there a way to display a up/down sorting icon (see attached) in the header of a grid column to indicate that you can sort that column?

Grid

answered on 27 Jan 2017

3 answers

437 views

Display a dictionary using ClientRowTemplate in Kendo Grid

I have a dictionary (string, string) that I need to bind within a ClientRowTemplate. What's the syntax for binding the key and value within the template?

0down vote favorite

I have a dictionary (string, string) that I need to bind within a ClientRowTemplate. What's the syntax for binding the key and value within the template?

Grid

answered on 27 Jan 2017

1 answer

91 views

DataGrid not refreshing

I'm new to Kendo and having issues with the following data grid not refreshing. Not sure what the issue is, but any help is greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>

<div id="app"></div>
<div><button id="btnRefresh" onclick="refresh()">refresh</button></div>
<script id="grid-view" type="text/x-kendo-tmpl">
<div class="manage-roles">
<div id="grid" data-role="grid"
data-scrollable="true"
data-editable="inline"
data-columns='[
{ field : "JobTitle", width: 120, title : "Job Title Code" },
{ field : "Description" },
{ field : "CategoryId", template: "${Category}" },
{"command": "edit"}]'
data-bind="source: roles"
style="height: 500px">
</div>
</div>
</script>

<script>

var roleViewModel = kendo.observable({
categories: new kendo.data.DataSource({
data: [
{ "CategoryId": 1, "Description": "IT" },
{ "CategoryId": 2, "Description": "Billing" },
{ "CategoryId": 3, "Description": "HR" },
{ "CategoryId": 4, "Description": "Sales" },
{ "CategoryId": 5, "Description": "Field" },
{ "CategoryId": 10, "Description": "Stuff" },
{ "CategoryId": 11, "Description": "Unassigned" }
]
}),
roles: new kendo.data.DataSource({
data: [
{ "RoleId": 1, "JobTitle": "AADM1", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
{ "RoleId": 2, "JobTitle": "AADM2", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
{ "RoleId": 3, "JobTitle": "ACCIN", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
{ "RoleId": 4, "JobTitle": "ACCSU", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
]
})
});

function refresh() {
console.log('am here too');
var grid = $('#grid').data("kendoGrid");
console.log(grid);


grid.dataSource.data = new kendo.data.DataSource ({
data: [
{ "RoleId": 10, "JobTitle": "AADM11", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
{ "RoleId": 12, "JobTitle": "AADM12", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
{ "RoleId": 13, "JobTitle": "ACCIN1", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
{ "RoleId": 14, "JobTitle": "ACCSU1", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
]
});

console.log('am here');
//grid.read();
grid.refresh();
}

var categoryEditor = function(container, options) {
$('<input data-bind="value: ' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
dataSource: roleViewModel.categories,
dataTextField: 'Description',
dataValueField: 'CategoryId'
});
};

var view = new kendo.View($("#grid-view").html(), {
model: roleViewModel,
init: function() {
var widget = this.element.find("[data-role=grid]").data("kendoGrid");

widget.columns[2].editor = categoryEditor;
}

});

var layout = new kendo.Layout("<header>Header</header><section id='content'></section><footer></footer>");

layout.render($("#app"));

layout.showIn("#content", view);
</script>
</body>
</html>

Grid

answered on 27 Jan 2017

1 answer

498 views

Custom Template for Gantt Delete confirmation popup?

Hello

I am using gantt with angularjs.I want custom Confirmation modal while deleting Task,Based on your documentations i tried,,but i didnt work

<script id="editor" type="text/x-kendo-template"><br> Some Delete Message<br> <button ng-click="customFunction()">Absolutely!</button><br></script>

AngularJs controller:-

gantt configuration object I am adding this field

messages: {

deleteTaskConfirmation:kendo.template($("#editor").html())

}

$scope.customFunction=function()

{console.log("Custom function triggered");

}

Firstly,Popup it is not displaying properly.please look into the attached screenshot

Secondly,how can i bind the custom button functionality with controller. ($scope.customFunction())

Gantt

answered on 27 Jan 2017

2 answers

390 views

Grid ajax binding, re-binding and Json issues

My app is pretty straight-forward: It's a kendo pageable grid, with a search form above it which refines the data displayed in the grid each time the search button is clicked based on the criteria specified in the form fields. Here are my current issues I could use some help with:

I have a primary action method I use to get my IEnumerable collection for the grid, which takes the DataSourceRequest as a parameter, as instructed in the docs. This method returns a JsonResult. If I call this method in my Index action, I get this error: "This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet." If I change the method to allow Get, I get a page full of json text instead of the grid.
If I instead put the collection into the Index action and call the View, it works fine, but if I do a search, or any kind of paging the grid resets to the full colection every time.
I have some code that toggles the css class on $(document).ready(). It works great, but as soon as I go to the next page it's broken. How do I get this to work through all the paging, filtering, grouping, etc.?
I have a "Reset" button on the search form that is used to reset the values of the form and reset the grid to the full collection of data. Right now the way I am doing that is to call the Index view again, which seems to me to be an inefficient way to go about this. I can reset the fields using Javascript, but I'm not sure how to re-bind the grid?

Here's my code, and thanks so much for the help!

View:

@model IEnumerable<WatchSummaryViewModel>

@{

ViewBag.Title = "Watch Summaries";

ViewBag.OrgId = 18;

ViewBag.FullName = "USER, TEST";

}

<h2>@ViewBag.Title</h2>

@Html.ActionLink("Create New", "Create")

<div id="container">

<div id="searchForm">

@using (Ajax.BeginForm("Search", "Home", new AjaxOptions { HttpMethod = "POST" })) {

<table style="width:911px;padding:7px;margin-bottom:10px;">

<tr>

<td>

<label class="label" for="location">Location</label>

@(Html.Kendo().AutoComplete().Name("location").BindTo(WatchSummaryBL.DoGetLocations()).HtmlAttributes(new { style="width:200px" }).Placeholder("Start typing a location"))

</td>

<td>

<label class="label" for="reportNum">Report Number</label>

@Html.TextBox("reportNum", "", new { style = "width:140px;vertical-align:middle;" })

</td>

<td>

<label class="label">Officer</label>

@{

var officers = OfficersCollection.DoGetOfficerList((int)ViewBag.OrgId);

var list = officers.Select(officerInfo => new SelectListItem {Text = officerInfo.FullNameWithBadgeClass.ToUpper(), Value = officerInfo.OfficerId.ToString()}).ToList();

}

@(Html.Kendo().DropDownList()

.BindTo(list)

.DataTextField("Text")

.DataValueField("Value")

.Name("officerId")

.Height(300)

.HtmlAttributes(new { style = "width:400px"})

)

</td>

</tr>

<tr>

<td>

<label class="label" for="xref">Inmate XREF</label>

@Html.TextBox("xref", "", new { style = "width:200px;vertical-align:middle;" })

</td>

<td>

<label class="label">Incident Days</label>

@{

var days = new List<SelectListItem>

{

new SelectListItem {Text = "All", Value = "365"},

new SelectListItem {Text = "30 days", Value = "30"},

new SelectListItem {Text = "60 days", Value = "60"},

new SelectListItem {Text = "90 days", Value = "90", Selected = true},

new SelectListItem {Text = "6 months", Value = "180"}

};

}

@(Html.Kendo().DropDownList()

.BindTo(days)

.DataTextField("Text")

.DataValueField("Value")

.Name("days")

)

</td>

<td>

<label class="label">Incident Types</label>

@{

var types = new List<SelectListItem>

{

new SelectListItem {Text = "-- SELECT --", Value = "-1", Selected = true},

new SelectListItem {Text = "ASSAULT", Value = "1"},

new SelectListItem {Text = "C.E.R.T. EXERCISE", Value = "2"},

new SelectListItem {Text = "SHAKEDOWN", Value = "3"},

new SelectListItem {Text = "C.E.R.T. CALL-OUT", Value = "4"},

new SelectListItem {Text = "POD/CELL/BARRACK INSPECTION", Value = "5"},

new SelectListItem {Text = "FIRE", Value = "6"},

new SelectListItem {Text = "OTHER", Value = "7"},

new SelectListItem {Text = "FIRE DRILL", Value = "8"},

new SelectListItem {Text = "INTELLIGENCE", Value = "9"}

};

}

@(Html.Kendo().DropDownList()

.BindTo(types)

.DataTextField("Text")

.DataValueField("Value")

.Name("incidentTypeId")

.HtmlAttributes(new { style = "width:300px"})

)

</td>

</tr>

<tr>

<td colspan="3">

<button type="button" id="btnSearch" value="Search" onclick="Search();">Search</button>

<button type="button" id="btnReset" value="Reset" onclick="Reset();">Reset</button>

</td>

</tr>

</table>

}

</div>

@(Html.Kendo().Grid(Model)

.Name("tblGrid")

.Columns(columns =>

{

columns.Bound(w => w.Id).Hidden();

columns.Bound(w => w.IncidentType).Width(160);

columns.Bound(w => w.Location).Width(180);

columns.Bound(w => w.IncidentDateTime).Width(120).Format("{0: MM/dd/yyyy H:mm tt}");

columns.Bound(w => w.PostDateTime).Width(120).Format("{0: MM/dd/yyyy H:mm tt}");

})

.Events(events => events.Change("gridChange"))

.Pageable()

.Sortable()

.Selectable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(w => w.Id))

.PageSize(15)

.Read(read => read.Action("GetSummaries","Home")

.Data("searchParams")

)

.Create("Editing_Create", "Home")

))

</div>

<script type="text/javascript">

$(document).ready(function () {

$("#officerId").width("220px");

$("#tblGrid tbody tr").hover(function () {

$(this).toggleClass("k-state-hover");

});

function gridChange() {

var propId = this.select().closest("tr").find("td:eq(0)").text();

location.href = kendo.format('@(Server.UrlDecode(Url.Action("Details", "Home", new { id = "{0}" })))', propId);

}

function Reset() {

location.href = '@(Server.UrlDecode(Url.Action("List", "Home")))';

}

function Search() {

var loc = $("#location").val();

var report = $("#reportNum").val();

var officer = $("#officerId").val();

var inmateXref = $("#xref").val();

var daysBack = $("#days").val();

var incidentType = $("#incidentTypeId").val();

location.href = kendo.format('@(Server.UrlDecode(Url.Action("Search","Home", new { location = "{0}", reportNum = "{1}", officerId = "{2}", xref = "{3}", days = "{4}", incidentTypeId = "{5}" })))', loc, report, officer, inmateXref, daysBack, incidentType);

}

function searchParams() {

var location = $("#location").val();

var report = $("#reportNum").val();

var officerId = $("#officerId").val();

var xref = $("#xref").val();

var days = $("#days").val();

var incidentType = $("#incidentTypeId").val();

return {

location: location,

reportNum: report,

officerId: officerId,

xref: xref,

days: days,

incidentTypeId: incidentType

};

}

</script>

Controller:

namespace WatchSummaries.Kendo.Controllers

{

public class HomeController : Controller

{

public ActionResult Index([DataSourceRequest] DataSourceRequest request)

{

return GetSummaries(request);

// return View("List", GetAllSummaries());

}

public ActionResult List([DataSourceRequest] DataSourceRequest request)

{

return GetSummaries(request);

// return View(GetAllSummaries());

}

public ActionResult Create()

{

ViewBag.FullName = SessionUser.CurrentUser != null ? SessionUser.CurrentUser.FullName : "USER, TEST";

return View();

}

private static IEnumerable<WatchSummaryViewModel> GetAllSummaries()

{

var summaries = DoGetWatchListApproved(90, 18);

var allSummaries = new List<WatchSummaryViewModel>();

if (summaries != null && summaries.Count > 0)

allSummaries.AddRange(summaries.Select(summary => new WatchSummaryViewModel

{

Id = summary.ID,

IncidentDateTime = summary.WatchDateTime,

IncidentType = summary.IncidentType,

InmateXref =

summary.InmateInfo != null && summary.InmateInfo.Count > 0 ? summary.InmateInfo[0].XREF : -1,

Location = summary.Location,

OfficerId = summary.OfficerId,

PostDateTime = summary.PostDateTime,

ReportNumber = summary.ReportNumber

}));

return allSummaries;

}

public ActionResult DoGetInmateName(int xref)

{

var name = Inmate.DoGetInmateName(xref);

return Content(!string.IsNullOrEmpty(name) ? name : "none found");

}

[HttpPost]

public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<WatchSummaryInfo> watchSummaries)

{

var results = new List<WatchSummaryInfo>();

if (watchSummaries != null && ModelState.IsValid)

{

results.AddRange(watchSummaries);

}

return Json(results.ToDataSourceResult(request, ModelState), JsonRequestBehavior.AllowGet);

}

[HttpPost]

public ActionResult GetSummaries([DataSourceRequest] DataSourceRequest request)

{

var allSummaries = GetAllSummaries();

var result = allSummaries.ToDataSourceResult(request);

return Json(result);

}

public ActionResult Search([DataSourceRequest] DataSourceRequest request, string location, string reportNum, int? officerId, int? xref, int? days, int? incidentTypeId)

{

List<WatchSummaryInfo> summaries;

try

{

var blnIsAssault = false;

var blnIsCertExcercise = false;

var blnIsShakeDown = false;

var blnIsFireDrill = false;

var blnIsCertCallout = false;

var blnIsInspection = false;

var blnIsFire = false;

var blnIsIntelligence = false;

var blnIsOther = false;

if (incidentTypeId.HasValue)

switch (incidentTypeId.Value)

{

case 1:

blnIsAssault = true;

break;

case 2:

blnIsCertExcercise = true;

break;

case 3:

blnIsShakeDown = true;

break;

case 4:

blnIsCertCallout = true;

break;

case 5:

blnIsInspection = true;

break;

case 6:

blnIsFire = true;

break;

case 7:

blnIsOther = true;

break;

case 8:

blnIsFireDrill = true;

break;

case 9:

blnIsIntelligence = true;

break;

}

days = days > 0 ? days : 0;

officerId = officerId > 0 ? officerId : 0;

xref = xref > 0 ? xref : 0;

if (location == "Start typing a location") location = string.Empty;

summaries = WatchSummaryBL.DoGetWatchListBySearch(officerId.Value,xref.Value,location,reportNum,days.Value, blnIsAssault, blnIsCertCallout, blnIsCertExcercise, blnIsFire, blnIsFireDrill, blnIsInspection, blnIsIntelligence,blnIsOther,blnIsShakeDown, 18).ToList();

}

catch (Exception ex)

{

throw new Exception(ex.Message);

}

var filtered = new List<WatchSummaryViewModel>();

try

{

foreach (var summary in summaries)

{

var sum = new WatchSummaryViewModel

{

Id = summary.ID,

IncidentDateTime = summary.WatchDateTime,

IncidentType = summary.IncidentType,

Location = summary.Location,

OfficerId = summary.OfficerId,

PostDateTime = summary.PostDateTime,

ReportNumber = summary.ReportNumber

};

if (summary.InmateInfo != null && summary.InmateInfo.Count > 0)

sum.InmateXref = summary.InmateInfo[0].XREF;

filtered.Add(sum);

}

catch (Exception ex)

{

throw new Exception(ex.Message);

}

return View("List", filtered);

}

public ActionResult Details(int id)

{

var summary = DoGetWatchDetails(id);

return View(summary);

}

Viewmodel:

namespace WatchSummaries.Kendo.Models

{

public class WatchSummaryViewModel

{

public int Id { get; set; }

public string Location { get; set; }

public DateTime? IncidentDateTime { get; set; }

public DateTime? PostDateTime { get; set; }

public string IncidentType { get; set; }

public string ReportNumber { get; set; }

public int InmateXref { get; set; }

public string OfficerId { get; set; }

public int IncidentDays { get; set; }

}

Thanks again for your help!

Eddie

Grid

answered on 27 Jan 2017

1 answer

292 views

Locale agnostic numeric validation in grid

Hi,

I'm using Kendo UI for JSP and I have the following definition in my database schema model for a grid:

<kendo:dataSource-schema-model-field name="density" type="string" >

<kendo:dataSource-schema-model-field-validation required="true" min="0" pattern="\d{0,8}(\.\d{1,4})?" />

</kendo:dataSource-schema-model-field>

Obviously this is only going to work if a . (full stop) is used as the decimal point. However, my application is going to be deployed in multiple countries so I need a locale agnostic solution.

In plain html5 I can have an input type="number" and use the step attribute to control the number of decimal places. However, if I use type="number" in a grid then Kendo UI renders it as a NumericTextBox and I can't see how to set the number of decimal places. (It defaults to 2 and I need 4).

I don't want my input field to be rendered as a NumericTextBox but I want to be able to validate it as a valid numeric whatever the locale. Could you please tell me how to achieve this?

Validation

answered on 27 Jan 2017