Questions on UI for ASP.NET MVC Forum

1 answer

140 views

Hi, I would like for the listview items to be clickable but not selectable. By that I mean that a user can click on one, and the OnChange event to occur. However, I do not want the item to take on the "selected" styles. I would like the styles to remain the same as an unselected item. How might I accomplish this?

Thanks!

ListView

answered on 15 Oct 2019

10 answers

681 views

Grid popup edit template with dropdownlist with no FK

Hi Guys

I have a grid with popup edit template with a dropdownlist that has to be populated based on a column value from the grid which is not the FK one.

My problem is that the model is empty at the time of populating the dropdown. Could you please help me how to achieve this?

here is the edit template:

@using PartnerLink.Models

@model AssignmentDocTypesExt

@{

Layout = "~/Views/Shared/_EmptyLayout.cshtml";

ViewBag.Title = "Customer Document - "+Model.documentDescription;

var currentUserId = ((TBL_USER)(ViewBag.LoggedUser)).USER_ID;

bool isAdmin = ((TBL_USER)(ViewBag.LoggedUser)).LEAD_PROVIDER_ID == null;

EntitiesModel entities = new EntitiesModel();

var DocumentStatusList = entities.TBL_DOCUMENT_TYPE_Status

.Where(d => !d.OUT_OF_USE && d.DOCUMENT_TYPE_ID == Model.DOCUMENT_TYPE_ID)

.Select(d => new

{

d.DOCUMENT_TYPE_STATUS_ID,

d.DOCUMENT_TYPE_STATUS_DESCRIPTION

}

).ToList();

}

@Html.HiddenFor(model => model.ASSIGNMENT_DOCUMENT_TYPE_ID)

@Html.HiddenFor(model => model.DOCUMENT_TYPE_ID)

<div class="grid-popup">

@Html.LabelFor(m=>m.DOCUMENT_TYPE_STATUS_ID,"Type Status")

@Html.Kendo().DropDownListFor(m => m.DOCUMENT_TYPE_STATUS_ID).Name("DOCUMENT_TYPE_STATUS_ID").BindTo(DocumentStatusList).DataValueField("DOCUMENT_TYPE_STATUS_ID").DataTextField("DOCUMENT_TYPE_STATUS_DESCRIPTION")

<br />

@Html.Kendo().CheckBoxFor(m => m.COMPLETE_FLAG).Name("COMPLETE_FLAG").Label("Complete")

</div>

<br />

<div class="grid-popup">

@(Html.Kendo().Upload()

.Name("files")

.Messages(m => m.Select("Select File"))

.Async(a => a

.Save("ClientDocUpload", "Home")

.AutoUpload(true)

)

.Files(files =>

{

var fs = new List<CreditCheckFileToParse>();

foreach (var f in fs)

{

files.Add().Name(f.Name).Extension(f.Extension).Size(f.Size);

}

})

.Events(c => c

.Success(@<text>

function() {

$(".k-grid-update").trigger('click');

}

</text>)

.Error(@<text>

function() {

alert("File Upload Failed");

}

</text>)

.Upload(@<text>

function(e) {

e.data = { id: $("#ASSIGNMENT_DOCUMENT_TYPE_ID").val() };

}

</text>)

)

</div>

<script>

function onSuccessfilesClientDocs(e)

{

$(".k-grid-update").trigger('click');

}

function onErrorfilesClientDocs(e) {

alert("Failed to upload file");

}

</script>

here is the main grid:

@using PartnerLink.Models

@using Telerik.OpenAccess.SPI

@model Tuple<TBL_ASSIGNMENT, IQueryable<TBL_ASSIGNMENT_EXPENDITURE_VALUE>, IQueryable<TBL_ASSIGNMENT_INCOME_VALUE>, IQueryable<TBL_ASSIGNMENT_VEHICLE>>

<div style="height:500px">

@(Html.Kendo().Grid<AssignmentDocTypesExt>()

.Name("gridCaseDocuments")

.Columns(columns =>

{

columns.Bound(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID).Hidden(true);

columns.Bound(p => p.ASSIGNMENT_ID).Hidden(true);

columns.Bound(p => p.DOCUMENT_TYPE_ID).Hidden(true);

columns.Bound(p => p.WHICH_APPLICANT).Hidden(true);

columns.Bound(p => p.DOCUMENT_TYPE_STATUS_ID).Hidden(true);

columns.Bound(p => p.CREDITOR_ID).Hidden(true);

columns.Bound(p => p.numOfUploadedFiles).Hidden(true);

columns.Bound(p => p.documentDescription).Title("Document").Width(350);

columns.Bound(p => p.whichApplicant).Title("Applicant").Width(100);

columns.Bound(p => p.documentTypeStatusDescription).Title("Type Status").Width(200);

columns.Bound(p => p.COMPLETE_FLAG).Title("Complete").ClientTemplate("<input type='checkbox' #= COMPLETE_FLAG ? checked='checked' :'' # disabled />").Width(90);

columns.Bound(p => p.autoCompleteOnUpload).Title("Auto Complete").ClientTemplate("<input type='checkbox' #= autoCompleteOnUpload ? checked='checked' :'' # disabled />").Hidden(true);

columns.Command(command => { command.Edit().Text("Upload"); }).Width(230);

})

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ClientDocumentUpload").Window(w => w.Events(e => e.Close("onCloseClientDocumentUpload"))))

.Sortable()

.Scrollable()

.ClientDetailTemplateId("gridCaseDocumentsDetails")

.Pageable(pager => pager.Refresh(true))

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

.HtmlAttributes(new { style = "height:500px;" })

.Events(clientEvents => clientEvents.DataBound("onRowDataBoundgridCaseDocuments"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handlerCaseDocuments"))

.Model(model => model.Id(p => p.ASSIGNMENT_DOCUMENT_TYPE_ID))

.Read(read => read.Action("CaseDocuments_Read", "Home", new { id = Model.Item1.ASSIGNMENT_ID }))

.Update(update => update.Action("CaseDocuments_Update", "Home"))

)

</div>

<script id="gridCaseDocumentsDetails" type="text/kendo-tmpl">

@(Html.Kendo().Grid<ClientDocumentsExt>()

.Name("gridCaseDocuments_#=ASSIGNMENT_DOCUMENT_TYPE_ID#")

.Columns(columns =>

{

columns.Bound(m=>m.ASSIGNMENT_DOCUMENT_ID).Hidden(true);

columns.Bound(m => m.FILE_NAME).Title("File Name");

columns.Bound(m => m.uploadedBy).Title("Uploaded By").Width(210);

columns.Bound(m => m.DATE_CREATED).Title("Upload Date").Format("{0:dd/MM/yyyy}").Width(110);

columns.Command(c => c.Custom("Download").Click("onClickDownloadClientDoc")).Width(110);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(5)

.Model(model => model.Id(m => m.ASSIGNMENT_DOCUMENT_ID))

.Read(read => read.Action("gridCaseDocumentsDetails_Read", "Home", new { id = "#=ASSIGNMENT_DOCUMENT_TYPE_ID#" }))

)

.Pageable(pager => pager.Refresh(true))

.Sortable()

.Scrollable()

.ToClientTemplate()

)

</script>

<script type="text/javascript">

function error_handlerCaseDocuments(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

$("#gridCaseDocuments").find(".k-grid-content").height(421);

function onClickDownloadClientDoc(e)

{

alert(e.ASSIGNMENT_DOCUMENT_ID);

}

function onRowDataBoundgridCaseDocuments(e) {

var grid = $("#gridCaseDocuments").data("kendoGrid");

var gridData = grid.dataSource.view();

for (var i = 0; i < gridData.length; i++) {

var currentUid = gridData[i].uid;

if (gridData[i].COMPLETE_FLAG) {

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).css("background-color", "rgb(164,198,57)");

} else if (gridData[i].numOfUploadedFiles > 0)

{

var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

$(currenRow).css("background-color", "rgb(255,191,0)");

}

function onCloseClientDocumentUpload()

{

alert("onCloseClientDocumentUpload");

}

</script>

Grid

answered on 11 Oct 2019

2 answers

965 views

MVC Readonly property

The readonly property from MVC only appears to be available on the Switch control. I have reviewed the TextBox flavors, Combobox, dropdownlist, and MultiSelect, I required to control the readonly property from Javascript.

I was looking for the product feedback/suggestion area, as I think this should be posted there.

FYI

General Discussions

answered on 11 Oct 2019

2 answers

365 views

Pass parameter to Read Method during Exports

A common problem with exporting to excel is you often may have columns that contain HTML or other content that doesn't work well with Excel.

A GENIUS friend of mine suggested that we just change the grid read when exporting so that it only provides the HTML or other non-friendly-to-Excel content during reads that aren't for an excel export. Thank you, Crankshaw! Here's how it works.

Just create a global parameter in javascript to identify when you're doing an excel export. Pass that parameter to the grid's Read.

Then give your standard excel export button an ID, so that you can tie events to it other than the normal excel export.

// toolbar.Excel().HtmlAttributes(new { id = "WIPDetailToXL" })

Then create two events in javascript.

NOTE: MouseDown happens prior to the Click event, but so does MouseUp. So use MouseDown and MouseOut, both on the ExcelExport button.

So when you Click to export, the mousedown will set the variable to let your read know that this is an "Excel Read". This happens BEFORE the export. And when you move your cursor off the Export button, the variable will change back so that subsequent reads will render your html correctly within your grid.

    $("#WIPDetailToXL").mousedown(function (e) {
        exportExcelFlag = 1;
    });

    $("#WIPDetailToXL").mouseout(function (e) {
        exportExcelFlag = 0;
    });

</script>

Hope this helps someone as much as it did me!

Grid

answered on 10 Oct 2019

2 answers

378 views

Change Template value for listview dynamically

Hello, I have a Kendo Listview with a template defined as follows:

<script type="text/x-kendo-tmpl" id="template">

<div class="product">

<div class="product-title">

<h3>#:Name#</h3>

</div>

<div class="product-img" id="area">

<img src="@Url.Content("~/content/images/#:Image#")" alt="#:Name# Image" />

<div id='tile_#:data.Id#' class="white" onclick="favClick('#:Id#')">

</div>

</script>

The object in the Listview is the following:

public class TileDto

{

public string AppId { get; set; }

public int Id { get; set; }

public string Name { get; set; }

public string Url { get; set; }

public string Image { get; set; }

public bool IsFavorite { get; set; }

public string CssClass { get; set; }

}

I would like for the "IsFavorite" property of the item to determine the value of the class property for the div (white if false, yellow if true):

<div id='tile_#:data.Id#' class="white" onclick="favClick('#:Id#')">

</div>

Can this be done within the template? Or, is there an event off of the Listview or its datasource where this can be done?

Thanks for any assistance here.

--- x

ListView

answered on 10 Oct 2019

2 answers

412 views

[Solved] Add Link to ListView template (or Div w/event)

I am trying to define a listview containing an element that has an event linked to it (a div or an <a/> tag). However, whenever I click on the item, the event is not invoked.

Here is my listview definition

<div class="demo-section k-content wide">

@(Html.Kendo().ListView<InsightPortalWeb.Models.RootObject>(Model)

.Name("listView")

.TagName("div")

.ClientTemplateId("template")

.DataSource(dataSource =>

{

dataSource.Read(read => read.Action("Application_Read", "Home"));

dataSource.PageSize(15);

})

.Pageable()

.Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))

.Events(events => events.Change("onChange").DataBound("onDataBound"))

)

</div>

Here is my template:

<script type="text/x-kendo-tmpl" id="template">

<div class="product">

<div class="product-title">

<h3>#:name#</h3>

</div>

<div class="product-img" id="area">

<img src="@Url.Content("~/content/images/")Picture1.png" alt="#:name# image" />

@*<div class="red" href="#"></div>*@

<div id="star" class="red"></div>

</div>

</script>

I've tried numerous ways to get an event to fire such as the following:

var reds = document.getElementsByClassName("red");

var redfunction = function() {

alert("in star");

return true; // Not needed, as long as you don't return false

};

for (var i = 0; i, reds.length; i++) {

reds[i].addEventListener('click', redfunction, false);

};

However, none seem to do the trick. What am I missing. How might I accomplish this?

Thanks for any help.

ListView

answered on 08 Oct 2019

3 answers

160 views

Rows being reordered when sending from client to server

I just updated the Kendo Spreadsheet components to the latest release and am now having a weird problem when data is posted back to the server, the row order changes.

I have a simple controller method that loads a file and returns data back to the client as a spreadsheet (it's doing some server-side validations but that's irrelevant to the problem).

Then client side I send the data back to the server. In the past this has worked great. Now, however, Rows 0 and 1 swap positions.

The only difference between the data coming back with the new component vs. the old is a height attribute. Aside from that everything else is the same.

Controller Method

public ActionResult LoadFile(HttpPostedFileBase file)

{

var workbook = Workbook.Load(file.InputStream, Path.GetExtension(file.FileName));

//workbook = KendoExcelLoader.ProcessWorkbook<MyObject>(workbook, ApplyRules);

return Content(workbook.ToJson(), MimeTypes.JSON);

}

Client Side (this is where rows 0 and 1 swap positions):

function saveData() {

kendo.ui.progress($("body"), true);

var sheetData = $("#spreadsheet").data("kendoSpreadsheet").sheets()[0];

$.ajax({

type: "POST",

url: "/import/SaveData",

data: {records: JSON.stringify(sheetData.toJSON())},

success: function (data) {

kendo.ui.progress($("body"), false);

}

});

}

Spreadsheet

answered on 08 Oct 2019

6 answers

1.4K+ views

TreeList with Id and parentId string type

Hi,

I have a requirement to bind data to TreeList where Id and ParentId field are of type string but this does not seem to work. Is it possible?

I have tried making id and parentId field int and then its works.

TreeList:

<div class="demo-section k-header">

@(Html.Kendo().TreeList<JobErrorLogController.MyClass>()

.Name("myClassTreelist")

.Columns(columns =>

{

columns.Add().Field(e => e.Item).Width(220);

})

.Filterable()

.Sortable()

.DataSource(dataSource => dataSource

.Read(read => read.Action("AllData", "JobErrorLog"))

.ServerOperation(false)

.Model(m =>

{

m.Id(f => f.id);

m.ParentId(f => f.parentId);

//m.Expanded(true);

m.Field(f => f.Item);

})

)

.Height(540)

)

</div>

Class that is bind to TreeList:

public class MyClass

{

public static IList<MyClass> TestData = new List<MyClass>()

{

new MyClass() {id = "parent1", Item = "Item0", parentId = null},

new MyClass() {id = "child1", Item = "Item1", parentId = "parent1"}

};

public string id { get; set; }

public string parentId { get; set; }

public string Item { get; set; }

}

Controller's code:

public JsonResult AllData([DataSourceRequest] DataSourceRequest request)

{

var result = MyClass.TestData.ToTreeDataSourceResult(request,

e => e.id,

e => e.parentId

);

return Json(result, JsonRequestBehavior.AllowGet);

}

TreeList

answered on 04 Oct 2019

1 answer

312 views

Upgrading from 2016.x to 2019.x

Hi,

Are there any upgrade guides that cover upgrading from a 2016 version to a 2019 version? Does the Upgrade API Analyzer cover more recent versions?

General Discussions

answered on 04 Oct 2019

7 answers

688 views

How to set editable mode of a particular cell

Hi,

I would like to set the editable mode to true for a particular Cell in Kendo UI MVC Grid.

I am able to set the editable of the Column. But I wan to set edit mode for a particular cell.

Can any body please help me in getting resolved this issue.

--Satish

Grid

answered on 04 Oct 2019