Questions on UI for ASP.NET MVC Forum

2 answers

598 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

574 views

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

186 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.6K+ views

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

120 views

Developer version js

How to get developer version javascript files for kendo spreadsheet

Spreadsheet

answered on 20 Sep 2018

9 answers

457 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()

)

</script>

Grid

answered on 19 Sep 2018

11 answers

563 views

Adding a querystring to a menu item's action?

I have a simple menu, but I need to add a querystring to one of the menu items.

What is the simplest way of doing this?

@(Html.Kendo().Menu()

.Name("mainMenu")

.Items(items => {

items.Add().Text("Monitors").Action("Index", "Home").Items(subItems => {

subItems.Add().Text("Monitors Requiring Admin").Action("Index", "Home");

});

items.Add().Text("Aliases").Action("Index", "Aliases");

})

)

The url for the sub item needs to have the querystring "?MonitorGrid-filter=HasBeenAdministered~eq~false" added to it as I want a pre-filtered view of the grid when the page loads.

Cheers,
Nick

Menu

answered on 18 Sep 2018

3 answers

525 views

More than one kendo mvc control into kendo template, not render correctly

Hi.

I´m trying to build a SPA MVC ASP NET web Project which uses partsviews as a view templates kendo. Like this:

File: Views/Home/Dashboard.cshtml.

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

    <div class="container-fluid">
        <div class="row">
            <div class="col">

                <p>
                 @(Html.Kendo()
                .Button()
                .Name("PrimaryButton")
                .Content("Boton 1 dashboard")
                .HtmlAttributes(new { @class = "textButton k-primary" }))
</p>
                <p>
                    @(Html.Kendo()
                .Button()
                .Name("PrimaryButton2")
                .Content("Boton 2 dashboard")
                .HtmlAttributes(new { @class = "textButton k-primary" }))

                </p>

            </div>
        </div>
    </div>

</script>

All is right when javascript router object is running, the views are created and destroyed correctly but when one of these view (kendo templates) has two or more kendo mvc controls, the render is no correctly, and de control is not render into <div id=”main”></div> how to explain your documentatio about SPA mvc Apps (Music Stored Dash Board Tutorial), like following (pay attention at <\/sctript> tag ):

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

    <div class="container-fluid">
        <div class="row">
            <div class="col">

                <p>
                    <button class="textButton k-primary" id="PrimaryButton"> 1 dashboard</button>
                    <script>
                        kendo.syncReady(function(){jQuery("#PrimaryButton").kendoButton({});});
                    </script>
                </p>
                <p>
                    <button class="textButton k-primary" id="PrimaryButton2"> 2 dashboard</button>
                    <script>
                        kendo.syncReady(function(){jQuery("\#PrimaryButton2").kendoButton({});});
                        <\/script>

                                        </p>

                                    </div>
                                </div>
                            </div>

                    </script>

I´d tried use the ToClientTemplate() method but it doesn´t work. And the result of view is the first control, render correctly into “body app” and the second one render outside.

Please, Is there some best practice guide to Spa MVC Apps with Kendo controls? What error is it?,

Thanks in advance. I´d attached a screenshot browser

General Discussions

answered on 18 Sep 2018

1 answer

720 views

Kendo master auto increment id showing in child grid when using clientTemplate of kendo UI Grid Hierarchy in C# MVC

I was implemented kendo Grid Hierarchy in my list page. but when i list child item without client template then auto increment id of each item showing properly but when i use clientTemplate property of kendo grid in child grid to show auto increment id then only auto increment id of parent item was showing. Example showing on bellow 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"))

)

Child Grid

<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 child order number but return parent order number using client template*

columns.Bound(p => p.OrderID).Width("50px").Sortable(false).Filterable(false).ClientTemplate(

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

);

columns.Bound(p => p.OrderNumber).Groupable(false).Width("200px").Template(@<text></text>).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.StoreName).Title("Store").Width(100).Template(@<text></text>).ClientTemplate("<div style='background:url(\"#=StoreImage_Icon#\") no-repeat left -2px; padding-left:20px;'>#=StoreName#</div>");

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#" }))

)

//.ClientDetailTemplateId("attributeOption")

.Pageable()

.Sortable()

.ToClientTemplate()