Questions on UI for ASP.NET MVC Forum

1 answer

469 views

I'm not sure what control or group of controls would best be used to accomplish the following:

I need a page for reviewing submitted images(look similar to a carousel)
- At any given time a Reviewer may have 1000 images to review. They can either skip(arrow right), accept(button) or reject(button).
- If they skip, it should go to the next image
- Once they have skipped any images they should be able to go back(arrow left)
- If they accept or reject, it should remove that image from the queue and go to the next image

- A page with a control to view a single image, description and name
- Buttons for accept and reject
- Left and Right arrow buttons to advance or go back(to skipped images only)
- At any given time there may be 1000 images to review so we don't want to hold them all in memory or go to the database for each one...maybe get 10 at a time and when we have zero go get 10 more?

ListView

answered on 21 Sep 2018

3 answers

283 views

SPA on the MVC default route

Hi,

I'm doing my first SPA application and things are going relatively well.

One annoying glitch that I've noticed is that since my app is on the default route, the router reacts to the fully qualified route as a different page and reloads it.

E.g. http://localhost:5849/#/alert is not the same as http://localhost:5849/Home/Index/#/alert even though it really is.

I can certainly understand why this is happening.

My question, before I go off and spend a couple days coming up with my own unique hack for this, is there an established method for handling this situation?

Thanks,

Will

General Discussions

answered on 21 Sep 2018

1 answer

297 views

Server import excel

Sheet does not fit properly with in the content area when working with server side import excel.Find the attached screen shot for your reference. Please provide solution for this issue.

Example of server side import code:

var path = Server.MapPath("~/Excel/Dummy.xlsx");
var workbook = Telerik.Web.Spreadsheet.Workbook.Load(path);

return Content(workbook.ToJson(), Telerik.Web.Spreadsheet.MimeTypes.JSON);

Spreadsheet

answered on 20 Sep 2018

2 answers

646 views

Handling Circular Reference in EF and DataSourceResult

HI, I try to search and I can't found a way to handling the circular reference error caused when serialize DataSourceResult containing EF FK with Include.

For exemple my 2 EF class:

public class ActionGES

{

public int ActionGESID { get; set; }

[Required]

public int MunicipaliteId { get; set; }

[MaxLength(250), Required]

public string Titre { get; set; }

[Required]

public string Description { get; set; }

[Required]

public int AnneeDepart { get; set; }

[Required]

public int AnneeCible { get; set; }

[Required]

public int ObjectifCible { get; set; }

[Required]

public string UniteIndicateur { get; set; }

public ICollection<IndicateurAction> Indicateurs { get; set; }

public int SecteurId { get; set; }

public Secteur Secteur { get; set; }

public int Ordre { get; set; }

public string FormuleGES { get; set; }

public string ImageUrl { get; set; }

public bool ApprouveEA { get; set; }

[Required]

public bool Archive { get; set; }

}

public class IndicateurAction

{

public int IndicateurActionID { get; set; }

[Required]

public int Indicateur { get; set; }

[Required]

public int Annee { get; set; }

public bool ApprouveEA { get; set; }

//FK Key

public int ActionGESId { get; set; }

public ActionGES ActionGES { get; set; }

}

The EF line for the Get (called be the controller)

var ctx = new PortailGESContext();

Actions = ctx.Actions.Where(a => a.Archive == false & a.MunicipaliteId == MunicipaliteId).OrderBy(o => o.Ordre).Include(s=>s.Secteur).Include(s => s.Indicateurs);

Then the controller action:

//GET: ActionSommaire_Read

[Authorize]

public async Task<ActionResult> Actions_ReadAsync([DataSourceRequest]DataSourceRequest request)

{

IQueryable<ActionGES> actions;

if (Session["MunicipaliteIdSel"] != null && Convert.ToInt32(Session["MunicipaliteIdSel"]) > 0)

{

actions = this.actionService.GetActionsActive(Convert.ToInt32(Session["MunicipaliteIdSel"]));

}

else

{

actions = Enumerable.Empty<ActionGES>().AsQueryable();

ModelState.AddModelError("Error: no ID...", "");

}

DataSourceResult dsResult = await actions.ToDataSourceResultAsync(request, ModelState);

return Json(dsResult, JsonRequestBehavior.AllowGet);

}

This give me a circular reference when serializing Json. After reading on the web, I try to add this line to convert myself in JSON before returning it to the view:

var result = JsonConvert.SerializeObject(dsResult, Formatting.None,

new JsonSerializerSettings

{

ReferenceLoopHandling = ReferenceLoopHandling.Ignore

});

This time the convertrion work well with out circular reference, but the Json receive by the view is not the same. So the grid do not work.

Result with Json(result): {"Data":[{"ActionGESID":1,"MunicipaliteId":1,"Titre":"test" ......

Result with JsonConvert.SerializeObject: "{\"Data\":[{\"ActionGESID\":1,\"MunicipaliteId\":1,\"Titre\":\"Test\" .....

Any idea to handle this?

Thanks

Grid

answered on 20 Sep 2018

7 answers

623 views

[Solved] Tooltips overlap in Kendo listview

I have a kendo list view in which there are two columns. Each column has a separate tooltip.

The issue I am having is once I hover from one column to the other the first column tooltip does not disappear. So it displays both the tooltips. How can I fix the issue. I am using VS 2015 Professional with .Net Framework 4.6.2. The Kendo library I am using is Kendo.Mvc (2017.3.1018.545). The browser is in chrome 68.0.3440.106 and IE 11

Below is the declaration of the same. Also I made sure I used different css class for both the columns.

@(Html.Kendo().Tooltip()

.For("#Documents")
.Filter(".descriptionTooltip")
.ContentHandler("getDescriptionTooltip")
.Position(TooltipPosition.Right)
.AutoHide(false).Width(300).Height(100).ShowOn(TooltipShowOnEvent.MouseEnter))

@(Html.Kendo().Tooltip()
.For("#Documents")
.Filter(".commentsTooltip")
.ContentHandler("getCommentsTooltip")
.Position(TooltipPosition.Right)
.AutoHide(false).Width(300).Height(100).ShowOn(TooltipShowOnEvent.MouseEnter))

-------------------------------

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

<div style="border:none; border-style:none;" >
<table cellspacing="5" cellpadding="5" border="1" style="padding:5px;border-spacing:5px;border-bottom:1px solid \\#ddd;">
<tr>
<td style="width:10px;text-align:center">
<strong>&\\#8226;  </strong>
</td>
<td width="150px">
  #if(Description != null && Description.length <= 20) {# <span>#=Description #</span> #} else if(Description == null) {#   #} else {# <span class='descriptionTooltip'>#=DescriptionShort #</span> #}#
</td>
<td width="150px">
  #if(Comments != null && Comments.length <= 20) {# <span>#=Comments #</span> #} else if(Comments == null) {#   #} else {# <span class='commentsTooltip'>#=CommentsShort #</span> #}#
</td>

</tr>
</table>
</div>
</script>

-------------------------------------------------

@(Html.Kendo().ListView(Model.Documents)
.Name("Documents")
.TagName("div")
.HtmlAttributes(new { style = "border:none; border-style:none;" })
.ClientTemplateId("SDtemplate")
.DataSource(dataSource => dataSource
.Batch(false)
.ServerOperation(false)
.Model(model => model.Id(p => p.DocumentID))
.PageSize(5)
)
.Selectable(s => s.Mode(ListViewSelectionMode.Single))
.Pageable(page =>
{
page.PageSizes(false);
page.PreviousNext(false);
page.Input(false);
page.PageSizes(new int[] { 5, 10, 20, 50, 100, 500 });
page.Enabled(false);
})
)

------------------------

function getDescriptionTooltip(e) {

var dataItem = $("#Documents").data("kendoListView").dataItem(e.target.closest("tr"));
var content = dataItem.Description;
return content;
}

function getCommentsTooltip(e) {
var dataItem = $("#Documents").data("kendoListView").dataItem(e.target.closest("tr"));
var content = dataItem.Comments;
return content;
}

ToolTip

answered on 20 Sep 2018

4 answers

234 views

Doesn't display window "add-new-record" when expand an existing parent row

Hi, Dear Telerik!

I migrated to a new version of Kendo UI Grid MVC for using scroll and had issue.

I'm using a hierarchical view with WebApi and with editing rows. And when wont to add a new record to row on parents table (clicked "add new record" in the table), can't do this. "Circle of loading" starting turn and turns endlessly.

But when added record to a parent table and in this time added a new record to a table - this works correctly!

wrong? Also, when used old version Kendo UI (2016) this option was ok. But must migrate for a new version.

Can u help me?

Regards, Andrey.

My index.cshtml

Grid

answered on 20 Sep 2018

6 answers

1.7K+ views

[Solved] Pass selected row's dataItem of the grid to controller/action of a context menu's item as a parameter

I have a Telerik MVC grid in my application and a context menu set on the grid as well. When user clicks on the context menu, the action of the controller expects current row's id and some other data as a parameter. How can I pass this information to the action/controller from the context menu's item click?

The action is supposed to return a PDF file, so I can't use .Ajax in this case.

Here is code for the grid, context menu and the Action method.

public ActionResult ExportToPdf(int caseId, string caseNo)

{

var rd = new ReportDocument();

var server = @"SERVERNAME\SQLEXPRESS";

var database = @"XYZ";

rd.Load(Path.Combine(Server.MapPath("~/Reports"), "reportName.rpt"));

rd.DataSourceConnections[0].SetConnection(server, database, "abc", "dbPassword");

Response.Buffer = false;

Response.ClearContent();

Response.ClearHeaders();

var stream = rd.ExportToStream(CrystalDecisions.Shared.ExportFormatType.PortableDocFormat);

stream.Seek(0, SeekOrigin.Begin);

return File(stream, "application/pdf", String.Concat(caseNo,DateTime.Now.ToShortDateString(), ".pdf"));

}

@(Html.Kendo().Grid<IMCC.CTS.Models.CaseMasterViewModel>()

.Name("caseSearchGrid")

.Columns(columns =>

{

columns.Bound(c => c.case_number).Width(105);

columns.Bound(c => c.note_number).Width(105);

columns.Bound(c => c.title).Width(300);

columns.Bound(c => c.instituion_date).Width(115);

})

.DataSource(dataSource => dataSource

.Ajax()

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

.Read(read => read.Action("Search_Read", "Search").Data("GetSearchData"))

)

01.@(Html.Kendo().ContextMenu()

02. .Name("menu")

03. .Target("#caseSearchGrid")

04. .Filter("tr[role = 'row']")

05. .Events(ev => { ev.Select("onSelect"); })

06. .Orientation(ContextMenuOrientation.Vertical)

07. .Animation(animation =>

08. {

09. animation.Open(open =>

10. {

11. open.SlideIn(SlideDirection.Down);

12. open.Duration(250);

13. });

14. })

15. .Items(items =>

16. {

17. items.Add().Text("Export").Action("ExportToPdf", "Search", new { caseId = 1, caseNo = " abc"}); //here grid's selected Model's id or row's id and selected row's case_number should be passed.

19.items.Add().Text("Export to PDF 2").Encoded(false).HtmlAttributes(new { id = "ExportToPdf2" }); // i can send this data through Ajax call, but that does not allow returning PDF from the action method.

20. })

21.)

Grid

answered on 20 Sep 2018

1 answer

155 views

Developer version js

How to get developer version javascript files for kendo spreadsheet

Spreadsheet

answered on 20 Sep 2018

9 answers

516 views

No Records message wrong documentation?

Hi,

in the doc under "define a custom No Records message"
http://www.kendoui.io/kendo-ui/aspnet-mvc/helpers/grid/configuration#no-records-template

there is written that I can use .NoRecords("Mystring") but this is not allowed (see Pictures)
and to set it like .NoRecords(n => n.Template("string HTML template, not centered")) is the non-centered method but I want to Center the message...

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

.Name("Grid")

.NoRecords("string HTML template, automatically centered")

)

Grid

answered on 19 Sep 2018

1 answer

1.9K+ views

How to use any if condition using clientTemplate in child grid of kendo UI Grid Hierarchy?

I was implementing some "if condition" in child grid of kendo UI Grid Hierarchy using clientTemplate.when i used if condition in master grid using clientTemplate then it works fine for me. but when i use same code in child grid of of kendo UI Grid Hierarchy then showing "Invalid Template" Refference link https://demos.telerik.com/kendo-ui/grid/hierarchy

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

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.OrderID).Width("50px").Sortable(false).Filterable(false).Title("<input type='checkbox' id='chkSelectAll' onchange='SelectAll();'/>").ClientTemplate(

"<input type='checkbox' id='orderselect_#=OrderID#' class='orderselect' value='#=OrderID#' onchange='chkOrUnchk(this)'/>"

);

})

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

//.Reorderable(r => r.Columns(true))

.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple).Enabled(true))

.Events(events => events.Change("Grid_OnRowSelect").DataBound("OrderGrid_OnDataBound").ColumnReorder("Grid_OnColumnReorder"))

.Pageable(settings => settings.PageSizes(new int[] { 25, 50, 100, 500 }))

.Sortable()

.Scrollable(s => s.Virtual(false).Height("600px"))

.Filterable()

.ClientDetailTemplateId("childOrders")

.DataSource(dataSource => dataSource

//.Server().Model(model => model.Id(p => p.OrderID))

.Ajax()

.PageSize(Model.DefaultOrderPageSize)

.Read(read => read.Action("ManageOrderLoadForGridAjax", "Order").Data("OrderSearchParameter"))

)

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

@(Html.Kendo().Grid(new List<SMOrderNew>())

.Name("grid_#=OrderID#") // template expression, to be evaluated in the master context

.Columns(columns =>

{

// *i want to add some condition using client template*

columns.Bound(p => p.OrderNumber).Groupable(false).Width("200px").Title("Order #").ClientTemplate(

"<a #if(DisplayDistribution){# class='OrderHover'#}# data-id='#= OrderID #' href='javascript:void(0);' style='float:left;' onclick='OpenOrderDetailsPopup(\"#= OrderID #\", 0);'> #=OrderNumber# </a>"

);

columns.Bound(p => p.BuyerUserID).Width("200px").Title("Buyer User ID").HtmlAttributes(new { style = "white-space: nowrap;" });

})

.Events(events => events.Change("Grid_OnRowSelect").DataBound("OrderGrid_OnDataBound").ColumnReorder("Grid_OnColumnReorder"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(100)

.Read(read => read.Action("ManageChildOrderLoadForGridAjax", "Order", new { OrderId = "#=OrderID#" }))

)

.Pageable()

.Sortable()

.ToClientTemplate()