Questions on UI for ASP.NET MVC Forum

11 answers

555 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

515 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

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

)

</script>

Grid

answered on 18 Sep 2018

23 answers

1.9K+ views

ClientGroupFooterTemplate - Get Aggregate Field Value

I have a grid which displays a summary of data along with totals and subtotals.

Each cell value has a link that enables a user to 'drill-down' to the individual records , by making a JavaScript call via a ClientTemplate.

I want to add this drill-down functionality to the sub-total rows, but I need to pass the value of the aggregating field (in my case the patient class field). However, I'm not able to reference this field in the ClientGroupFooterTemplate.

The ClientTemplate:-

ClientTemplate("<a href='javascript:showData(\"#= PATCLASS #\",\"#= CONSPEF #\",\"p4p\")'> #= _4p #</a>")

The ClientGroopFooterTemplate:-

ClientGroupFooterTemplate("<a href='javascript:showData(\"-X-\",\"-X-\",\"-X-\")'>#= sum #</a>")

This works passing a string ("-X-" - which shows all values), but I need to pass the patient class value relating to the sub-total. How can I do this?

Thanks

Grid

answered on 18 Sep 2018

9 answers

1.2K+ views

Accessing Model within Popup Editor template

I am opening a template via the Popup Editor on a Kendo Grid. I would like to be able to access the Model to conditionally render markup depending on the value of a property.

Here is a partial view of the html in the template:

@Html.HiddenFor(m => m.IsCopy)

    <table>
        <tr><td colspan="2" align="center"><h4 class="text-info"> Pipe Details
            @{if (Model.IsCopy == true)
                {
            @Html.Label("Copy", new { id = "lblCopy", style = "display:none; color:red" })
                    }
                }
              </h4></td></tr>

</table>

When I inspect in the browser, the hidden field IsCopy is true:

But the html for Label "Copy does not render.

General Discussions

answered on 17 Sep 2018

1 answer

200 views

HTML content inside a diagram/splitting text into multiple rows

I found an example using an older code base of kendo that allows for HTML content inside of a diagram but seems to have been removed under current release (see link below). Is there a way to add HTML content to a diagram?

https://jsfiddle.net/Orbifold/mfcar358/

Second question I have is how to do a newline character inside content to split text on two rows? I tried \r\n, etc. but nothing works.

var diagram = $('#diagram')

.kendoDiagram({

shapes: [{

width: 150,

height: 100,

content:{

text:"I want to split this\r\n into two rows",

align: "center middle"

}

}]

})

.getKendoDiagram();

Diagram

answered on 17 Sep 2018

2 answers

6.8K+ views

MVC Grid Height

When rendering a grid using the HTML helper, the grid (k-grid-content) has a style height attribute of 200px. This only seems to occur when the grid is scrollable and or when grouping is allowed. How do I set the height to a custom value? I have tried adding a custom.css with the class k-grid-content set to a custom height, but this does is overridden by the inline style. I cannot find where this style is being set. The container div for the grid is set to 500 px.

Grid

answered on 17 Sep 2018

4 answers

1.4K+ views

Get Current row's data from the click of context menu's item

i have a Telerik grid with the following code.

@(

Html.Kendo().Grid<IMCC.PAS.Models.ProjectViewModel>()

.Name("ProjectsGrid")

.Scrollable(scr => scr.Height("auto"))

.Columns(columns =>

{

columns.Template(t => { }).Title("S No").ClientTemplate("#=renderNumber()#").Width("60px");

columns.Bound(c => c.project_no).Width(100);

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

columns.Bound(c => c.start_date).Width(120);

columns.Bound(c => c.finish_date).Width(120);

columns.Bound(c => c.project_status).Width(100);

columns.Bound(c => c.project_type).Width(130);

columns.Bound(c => c.project_manager).Width(120);

columns.Command(command => { command.Custom("EditClientsOfProject").Click("EditClientsOfProject").Text("Clients"); }).Width(90);

columns.Command(command => { command.Custom("editProject").Click("EditProject").Text("Edit"); command.Destroy().Text("Del"); }).Width(160);

})

.Events(ev => ev.DataBinding("onDataBinding"))

.ToolBar(toolbar =>

{

toolbar.Custom().HtmlAttributes(new { id = "RegisterProject", title = "Register" });

})

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.DataSource(dataSource => dataSource

.Ajax()

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

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

.Read(read => read.Action("Projects_Read", "Projects"))

.Destroy(destroy => destroy.Action("Project_Destroy", "Projects"))

)

and I have linked a context menu with this grid like below.

@(

Html.Kendo().ContextMenu()

.Name("menu")

.Target("#ProjectsGrid")

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

.Orientation(ContextMenuOrientation.Vertical)

.Animation(animation =>

{

animation.Open(open =>

{

open.Fade(FadeDirection.In);

open.Duration(500);

});

})

.Items(items =>

{

items.Add().Text("Show Clients");

items.Add().Text("Edit");

items.Add().Text("Delete");

})

)

I want to capture the click of the context menu items like below.

function onSelect(e) {

if (e.item.textContent == "Show Clients") {

EditClientsOfProject(e.target);

}

else if (e.item.textContent == "Edit") {

alert("Edit");

}

else if (e.item.textContent == "Delete") {

alert("Delete");

}

EditClientsOfProject function is supposed to work on the grid row for which user selected the "Show Clients" option. How do I pass the current row in "e" as argument to EditClientsOfProject function from onSelect event handler?

Grid

answered on 17 Sep 2018

1 answer

128 views

Why does the Nuget package contain so many files

Hi,

I started updating the Telerik.UI.for.AspNet.Mvc5 nuget package today and it takes forever. The problem is that I have a very slow connection to our source repository and the package contains a huge amount of files that needs to be added to source control. The majority of these files are files that we are not using in our application since we are not offering the option of switching theme but has defined our own. Would it be possible to move the source and theme files to separate packages and only keep the core files and the default theme in the main package?

That would help me a lot.

Regards,

Emil

General Discussions

answered on 14 Sep 2018

1 answer

97 views

Cannot get MVC grid to auto-size to content

I'm having an issue with the ASP.Net MVC wrappers for Kendo.

I'm using "@progress/kendo-ui": "2018.2.806" via npm, and the Visual Studio MVC Plugin version 2018.1.221.

I'm also using the SASS theme via "@progress/kendo-theme-default": "2.54.1".

This is a change from using older versions of the library and the LESS themes. An issue I'm running into is paged grids that used to auto-size to full height are not. (These grids are also scrollable to facilitate horizontal scrolling).

I've tried combinations of HtmlAttributes(new {style = "height: auto"}) and Scrollable(s => s.Height("auto")) but the k-grid-content section keeps having an element specific style set on it specifying the height at a fixed value. This is a problem if the grid loads in a filtered view with fewer rows (the height gets set to the max height of three rows) then a filter is removed and more data loads (the grid remains at a height of three rows).

Is there anything I'm missing to try? I don't want to have to write custom js for each grid to remove that style and set it to `auto`.

Grid

answered on 14 Sep 2018