Questions on UI for ASP.NET MVC Forum

2 answers

321 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

345 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

375 views

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

114 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.2K+ 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

276 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

637 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

1 answer

465 views

ClientTemplate doesn't work on a grid

Hi, I've got a problem with clientTemplate on my grid. I'm not fetching data from server. When I try to switch to Template, it throws an exception. This is my code :

@(Html.Kendo().Grid<PRR405.ViewModels.BatchViewModel>(Model.LotsOuverts)
.Name("LotsOuvert")
.Columns(columns =>
{
columns.Bound(p => p.Post_date).Title(PRR405.Resources.OpenLot.OpenLot.DateDOuverture).Format("{0: yyyy/MM/dd}").Width(150).Filterable(f => f.UI("DatePickerFormated"));
columns.Bound(p => p.Btch_num).Title(PRR405.Resources.OpenLot.OpenLot.NumLotPRR).ClientTemplate(@"<a href='/ResumeLot/ResumeLot?btchNum=#: Btch_num #'>#: Btch_num #</a>").Width(170);
columns.Bound(p => p.Comp_num).Title(PRR405.Resources.OpenLot.OpenLot.Assureur).Width(110);
columns.Bound(p => p.Br_cd).Title(PRR405.Resources.OpenLot.OpenLot.SuccursaleLabel).Width(120);
columns.Bound(p => p.Batch_cd).Title(PRR405.Resources.OpenLot.OpenLot.CodeDeLot).Width(120);
columns.Bound(p => p.Entry_Date_Formated).Title(PRR405.Resources.OpenLot.OpenLot.DateInscription).Width(160);
columns.Bound(p => p.Batch_type_Name).Title(PRR405.Resources.OpenLot.OpenLot.TypeDeLot).Width(140);
//columns.Bound("").Title(PRR405.Resources.OpenLot.OpenLot.ImprimerResume).ClientTemplate(string.Format(@"<a href='/OpenLot/PrintLot?btchNum=#: Btch_num #'>{0}</a>", PRR405.Resources.OpenLot.OpenLot.Imprimer)).Filterable(false);
})
.Scrollable(s => s.Height("100%"))
.HtmlAttributes(new { style = "max-height: 333px; margin-bottom:20px;" })
.Sortable()
.Scrollable()
.Filterable(f => f.Extra(false).Operators(o => o.ForString(str => str.Clear().IsEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_EstEgaleA).IsNotEqualTo(PRR405.Resources.Shared.Shared.GridFiltre_NestPasEgaleA))))
.Resizable(resize => resize.Columns(true))

Thank you for your help

Grid

answered on 03 Oct 2019

2 answers

408 views

Splitter with partial views in panes doesn't display correctly

I am trying to set up my index page such that it has a splitter with two horizontal panes, left and right. Each pane gets its contents from a partial view. The left pane should contain a text box, button and a TreeView. The right pane is a map. If I try to load the partial view in the left pane, the page does not display correctly. If I only have a simple string in the left pane content, the page (and map) work. Please advise.

Index.cshtml:

@(Html.Kendo().Splitter()

.Name("splitter")

.Orientation(SplitterOrientation.Horizontal)

.Panes(hPanes =>

{

hPanes.Add()

.HtmlAttributes(new { id = "left-pane" })

.Size("25%")

.Scrollable(false)

.Collapsible(true)

.Content(Html.Partial("_TreeView").ToHtmlString());

//.Content("<h1>TEST</h1>");

hPanes.Add()

.HtmlAttributes(new { id = "right-pane" })

.Size("75%")

.Scrollable(false)

.Collapsible(false)

.Content(Html.Partial("_MapView").ToHtmlString());

})

)

<style>

#splitter {

height: 100vh;

/*width: 100vw;*/

padding: 0;

margin: 0;

}

#left-pane {

color: #000;

background-color: #ccc;

}

#right-pane {

color: #000;

background-color: #aaa;

}

</style>

<script>

</script>

_TreeView.cshtml:

@{

Html.Kendo().TextBox()

.Name("searchTextBox");

Html.Kendo().Button()

.Name("SearchTrigger")

.Content("Search");

}

_MapView.cshtml:

@(Html.Kendo().Map()

.Name("map")

.Center((double)ViewBag.BicLat, (double)ViewBag.BicLong)

.Zoom(14)

.Layers(layers =>

{

layers.Add()

.Type(MapLayerType.Bing)

.ImagerySet(MapLayersImagerySet.AerialWithLabels)

.Key("ApiZL7kfQK2OAVUEfEtIUds-61ZYq1QHeX8DF6fm7kKWlLuzreW4anD5v8DeuvEu");

//.Type(MapLayerType.Tile)

//.UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")

//.Subdomains("a", "b", "c");

})

.Markers(markers =>

{

markers.Add()

.HtmlAttributes(new {id = "bicMarker" })

.Location((double)ViewBag.BicLat, (double)ViewBag.BicLong)

.Shape(MapMarkersShape.PinTarget)

.Tooltip(tooltip => tooltip.Content("BIC"));

})

)

<style>

#map {

height: 100%;

margin: 0;

padding: 0;

}

</style>

Splitter

answered on 02 Oct 2019

3 answers

798 views

SetOptions and Toolbar

Hello guys,

I need this functionality (https://demos.telerik.com/kendo-ui/grid/persist-state) but there are some problems.

I want to clarify one thing:
- You have a grid (you may check your own link - https://demos.telerik.com/aspnet-mvc/grid/editing-popup)
- In console I write:

var grid = $(".k-grid").data("kendoGrid");

grid.setOptions(grid.getOptions())"

and suddenly the toolbar breaks down.

I've checked a javascript version (https://demos.telerik.com/kendo-ui/grid/editing-popup) and everything is fine over there.

Let's check how "grid.options.toolbar" looks like:
JS:

{name: "create"}{name: "save"}{name: "cancel"}

MVC:

{ command: { { name: null, buttonType: "ImageAndText", text: "create"}, ...

So, it seems as "grid.options.toolbar" is useless when we talk about "MVC Wrappers".

The most important part - https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions
Yes, I see this note "When using the Grid MVC wrapper, any server templates will not be retrieved by the getOptions", but what can be counted as a "server template" talking about "toolbar"? If I use Kendo MVC, then everything or only when I use this one ".ToolBar(s => s.Template("<a random template>"))"?

So should I use what's described in this link?
https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-preserve-server-toolbar-template-after-set-options/GridPerserveToolbarServerTemplate/Views/Home/Index.cshtml

Thank you for your time and sorry, probably I'm not the first who's asked it
Have a nice day

Grid

answered on 01 Oct 2019