Questions on Kendo UI for jQuery Forum

2 answers

449 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

320 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

3 answers

789 views

Kendo UI datasource filter in detail template not working

i created a testing grid (hierarchial grid) to be applied in our project. problem is that the datasource filter didn't apply the matching id (employee's id column to subordinate's ReportingTo column).

<body>

<div id="testGrid"></div>

<script>

var employee = [{

empID: 1, lastName: "Sarsonas", firstName: "Christine", ReportingTo: 0

},

{

empID: 2, lastName: "Sarsonas", firstName: "Alyssa", ReportingTo: 0,

}

];

var subordinate = [

{

empID: 10, lastName: "Hatake", firstName: "Kakashi", ReportingTo: 1

},

{

empID: 11, lastName: "Maito", firstName: "Gai", ReportingTo: 1

}

];

$("#testGrid").kendoGrid({

columns: [

{ title: "Emp ID", field: "empID" },

{ title: "Last Name", field: "lastName" },

{ title: "First Name", field: "firstName" },

{ title: "Reporting To", field: "ReportingTo" }

],

dataSource: { data: employee },

detailInit: detailInit

,dataBound: function() {

this.expandRow(this.tbody.find("tr.k-master-row"));

}

});

function detailInit(e) {

console.log(e.data.empID);

$("<div/>").appendTo(e.detailCell).kendoGrid({

dataSource: {

data: subordinate,

serverPaging: true,

serverSorting: true,

serverFiltering: true,

pageSize: 10,

filter: { field: "ReportingTo", operator: "eq", value: e.data.empID }

},

scrollable: false,

sortable: true,

pageable: true,

columns: [

{ title: "Emp ID", field: "empID" },

{ title: "Last Name", field: "lastName" },

{ title: "First Name", field: "firstName" },

{ title: "Reporting To", field: "ReportingTo" }

]

});

}

</script>

</body>

Grid

answered on 27 Jan 2017

3 answers

407 views

Issues with refresh of Grid

Any help on the following code would be greatly appreciated. I have the following :

<!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 onClick: "refresh()">refresh</button></div>
<script id="grid-view" type="text/x-kendo-tmpl">
<div class="manage-roles">
<div 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() {
var grid = $("#grid").data("kendoGrid");
grid.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>

on the click of the refresh button I would expect the grid to be refreshed. Can someone tell me what I'm doing wrong?

Grid

answered on 26 Jan 2017

1 answer

310 views

Time picker masking

I am using the kendo timepicker and its working wonderfully

@(Html.Kendo().TimePicker()

.Name("EndTime")

.Value(@Model.EndTime)

.HtmlAttributes(new { style = "width: 100%", id = "EndTime", name = "EndTime", autocomplete = "off" })

)

The problem I'm running into is users who want to type values aren't including the AM/PM nor following the correct format. How can I apply a mask to the timepicker so that they are forced to format properly?

DatePicker

answered on 25 Jan 2017

4 answers

172 views

ListView DataSource Not Available on RequestEnd/Change Event

Hello!

I am using Kendo MVC UI. I have a Kendo Window that I do a refresh with a passed in url that obtains a MVC partial view which contains a Kendo ListView. This ListView, I do a DataSource read. I created a javascript function to call after the data is received to use the items returned. I tried using the RequestEnd/Change event to call it. It calls the function but the ListView does not appear to be done as the Loading icon is visible still and I don't have access to the dataItems. I am using version 2015.2.805.

How can I access the dataItems right after the request is made to get them?

Thanks!

ListView

answered on 25 Jan 2017

1 answer

439 views

Disable Column Autofit On Double Click

Hi,

The column resizes to fit to content on double clicking the separator.

Is there any way to keep the column resizable but disable the autofit on double click?

Thanks.

Grid

answered on 25 Jan 2017

3 answers

138 views

[Solved] Trouble updating children through model

Attached are the two simple files that demonstrate the problem. I'm trying to load a simple JSON file and then update the data through the model. The trouble is, while the field value is changing in the model, the screen never gets updated unless I change the root of the tree. Any assistance is appreciated.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>MVVM Demo 2</title>

<link href="/styles/kendo.common.min.css" rel="stylesheet">

<link href="/styles/kendo.rtl.min.css" rel="stylesheet">

<link href="/styles/kendo.default.min.css" rel="stylesheet">

<link href="/styles/kendo.default.mobile.min.css" rel="stylesheet">

<script src="/js/jquery.min.js"></script>

<script src="/js/jszip.min.js"></script>

<script src="/js/kendo.all.min.js"></script>

<style type="text/css">

th {

width: 135px;

}

</style>

</head>

<body>

<script>

var elementMapping = new Map();

</script>

<div id="example"

data-role="treeview"

data-bind="source: root"

data-text-field="_name">

</div>

<button type="button" data-bind="click: updateSomething" >Update</button>

<script>

var inputJSON="";

const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

$.ajax({

url: "this.json",

dataType: "json",

cache: false,

success: function(data) {

inputJSON = data;

var topSchema = {

model: {

id:"_secnum",

children: "section",

hasChildren: (e)=> e.section

}

};

var oh = kendo.observableHierarchy(

{

data: [inputJSON],

schema: topSchema

});

var viewModel = kendo.observable({

root: oh,

updateSomething: function(){

var r = this.get("root");

var g = elementMapping[4];

g.set("_name", "test this thing");

}

});

var rec = function(r){

elementMapping[r.id]=r;

r.items.forEach(h=>rec(h));

}

viewModel.root._dataSource.data().forEach(e=>rec(e));

kendo.bind($("body"), viewModel);

}

});

</script>

</body>

</html>

{

"_template": "Electronic Procedures Template",

"_revision": "1.4.0",

"section": [

{

"_name": "Cover Page",

"_secnum": "",

"rititle1": [ ],

"rinumber1": [ ],

"rititle2": [ ],

"rinumber2": [ ]

},

{

"_name": "Purpose",

"_secnum": "1",

"_sectype": "text"

},

{

"_name": "Scope",

"_secnum": "2",

"_sectype": "text",

"section": [

{

"_name": "Responsibilities",

"_secnum": "1",

"_sectype": "text"

},

{

"_name": "Background",

"_secnum": "2",

"_sectype": "text"

}

]

},

{

"_name": "Precautions & Limitations",

"_secnum": "3",

"_sectype": "text"

},

{

"_name": "Prerequisite Actions",

"_secnum": "4",

"section": [

{

"_name": "Radiological Concerns",

"_secnum": "1",

"_sectype": "text"

},

{

"_name": "Employee Safety",

"_secnum": "2",

"_sectype": "text"

},

{

"_name": "Special Tools and Equipment, Parts, and Supplies",

"_secnum": "3",

"_sectype": "text"

},

{

"_name": "Approvals & Notifications",

"_secnum": "4",

"_sectype": "single",

"procedure": {

"_seq": "9",

"_sid": "0",

"_refid": "",

"_pagetype": "Master",

"_procedurelevel": "1"

}

},

{

"_name": "Preliminary Actions",

"_secnum": "5",

"_sectype": "single",

"procedure": {

"_seq": "10",

"_sid": "0",

"_refid": "",

"_pagetype": "Master",

"_procedurelevel": "1"

}

},

{

"_name": "Field Preparations",

"_secnum": "6",

"_sectype": "single",

"procedure": {

"_seq": "11",

"_sid": "0",

"_refid": "",

"_pagetype": "Master",

"_procedurelevel": "1"

}

]

},

{

"_name": "Performance",

"_secnum": "5",

"_sectype": "multiple"

},

{

"_name": "References",

"_secnum": "6",

"section": [

{

"_name": "Performance References",

"_secnum": "1",

"_sectype": "text"

},

{

"_name": "Source Requirements",

"_secnum": "2",

"_sectype": "text"

}

]

},

{

"_name": "Records",

"_secnum": "7",

"_sectype": "text"

},

{

"_name": "Attachments",

"_secnum": "8",

"_sectype": "text"

},

{

"_name": "Monitor Response 1",

"_secnum": "11",

"_sectype": "monitortable"

}

],

"hashcode": "e388152e636cf0a2779c2da2dca7a534"

}

MVVM

answered on 25 Jan 2017

1 answer

798 views

[Solved] Use Edit button in Row to Navigate

Is there way to hook the Edit button in the row to navigate to another template? I would like to navigate to another template that has a hierarchical grid that would display relevant data. In this case the initial grid shows a listing of tests.

When the user clicks the "edit" button in the grid I want to navigate to another page representing the questions and answers for the selected test in a hierarchical grid. So how could the second page's Grid pass the testId from the action (URL) to the Read() function specified in the grid?

Thanks!

Grid

answered on 25 Jan 2017

1 answer

2.2K+ views

Strip HTML tags from content programatically

I am using the Kendo UI angular editor and need to save both the markup and the plain text from inside the control. I would like to keep the markup text encoded. This editor is being used within a custom template for a Kendo UI Grid popup edit. From what I have researched, I see two possible options to handle this.

Write code to programmatically call the cleanFormatting toolbar method, save the original copy of the text, create a range of the body of the editor, select this range, call the cleanFormatting method, and save the new copy of the text.
Programmatically replace all markup in the original copy of the text using some jQuery approach.

I would think that the first option would be the cleanest since it would be using Kendo throughout. However, the original copy of the text is encoded and calling the cleanFormatting method does not seem to call the exec method listed in the tools array for the editor. Furthermore, all HTML tags are still present. This is what I have so far for my tools and for the create method for my grid:

vm.editorOptions = {

tools: [

{

name: 'cleanFormatting',

tooltip: 'Clean formatting',

exec: function (e) {

console.log('ready to clean');

var editor = $(this).data('kendoEditor');

editor.exec('cleanformatting');

}

},

'insertUnorderedList',