Questions on UI for ASP.NET MVC Forum

2 answers

291 views

Bind To MVC Hierachial Data Model

Hi ,

the data model structure the following :

public class TreeMainItem

{

private IList<TreeSubItem> _SubItems;

private bool _hasChildren =true;

public TreeMainItem()

{

_SubItems = new List<TreeSubItem>();

}

public int ItemIndex { get; set; }

public string Title { get; set; }

public string CssClass { get; set; }

public string TargetUrl { get; set; }

public string IconUrl { get; set; }

public bool hasChildren

{

get { return this._hasChildren; }

set { this._hasChildren = value; }

}

public IList<TreeSubItem> SubItems

{

get { return this._SubItems; }

set { this._SubItems = value; }

}

public class TreeSubItem

{

private bool _hasChildren = false;

public int ItemIndex { get; set; }

public string Title { get; set; }

public string CssClass { get; set; }

public string TargetUrl { get; set; }

public string IconUrl { get; set; }

public bool hasChildren

{

get { return this._hasChildren; }

set { this._hasChildren = value; }

}

I use Html.Kendo().TreeView().DataSource() , but treeview can't render subitem ,

how could I fix or use other method ?

TreeView

answered on 17 May 2017

1 answer

125 views

auto open

Does Dialog have any attribute/method to control auto open behavior?

Dialog

answered on 17 May 2017

9 answers

1.8K+ views

Getting rows from grid and subgrid

I am wanting to get the data from column 1 on the main grid and the template grid when a checkbox within the template grid is checked.

The grid will hold this type of data. Each row on the main grid will have 4 rows on the template grid. When a checkbox is checked I would like to get the \

data from the main grid row and the template grid row.

Currently I cannot work out what is the main grids row that has been selected and how to get the grid name of the template grid so I can get the data. The JS I have been playing with is below as well. This JS is not what I want but close. I just need to get the info from different grids on selection.

Thanks in advance

function selectColumn(e) {


        var grid = $("#siteCriteriaCriteria").data("kendoGrid");
        // Get selected rows
        var sel = $("input:checked", grid.tbody).closest("tr");
        // Get data item for each
        var items = [];
        $.each (sel, function(idx, row) {
            var item = grid.dataItem(row);
            var update = item.name;
            alert(update);
            items.push(item);
        });
        alert ("selected: " + JSON.stringify(items));

}

@(Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
                                     .Name("siteCriteriaCriteria")
                                     .HtmlAttributes(new { style = "height:60vh; " })
                                        .Scrollable()
                                     .Columns(columns =>
                                     {
                                         columns.Bound(p => p.siteId).Title("siteId").Width(50).Hidden();
                                         columns.Bound(p => p.areaId).Title("AreaId").Width(50).Hidden();
                                         columns.Bound(p => p.name).Title("Hazard Area").Width(150);
                                         columns.Template(p => "").HtmlAttributes(new { @class = "templateCell" }).Title("criteria").Width(200)
                                            .ClientTemplate(

                                             Html.Kendo().Grid<WebSite.Library.Models.SiteCriteria>()
                                                   .Name("areaCriteria_#=areaId#")

                                                   .Columns(c =>
                                                   {
                                                       c.Bound(e1 => e1.name).Title("Training").Width(150).HeaderHtmlAttributes(new { style = "display:none;" }).HtmlAttributes(new { style = "height: 15px" });
                                                       c.Bound(e1 => e1.areaId).Title("Area").Width(100).Hidden();

                                                       c.Bound(e1 => e1.siteCriteria).Title("Access Criteria").ClientTemplate("<input type='checkbox' #=siteCriteria# '    onchange='requestStartHandler(\"grid\");' />")
                                                                                .HtmlAttributes(new { style = "height: 15px" }).HeaderHtmlAttributes(new { style = "display:none;" });
                                                   })
                                                   .Events(events => events.DataBound("siteCriteriaCriteria_onDataBound"))
                                                    .DataSource(source1 => source1
                                                   .Custom()
                                                                     .Transport(transport => transport
                                                   .Read(read =>
                                                   {
                                                       read.Url("/Api/SiteInfo/_getTrainingAreas/_si=" + Model.SiteId)
                                                           .DataType("json");
                                                   })

                                                    ))

                                                    .ToClientTemplate().ToHtmlString()

                                                );
                                         columns.Command(command => { command.Edit(); }).Width(250);

                                     })

                                       .Events(events => events.Save("onSaveCriteria").DataBound("hideEditCommand"))

                                       .NoRecords("No criteria exists.")
                                       .ToolBar(toolbar => toolbar.Create())
                                       .Editable(editable => editable.Mode(GridEditMode.InLine))
                                       .DataSource(source => source
                                       .Custom()
                                        .Schema(schema => schema
                                       .Model(m => m.Id(p => p.siteId)))
                                       .Transport(transport => transport
                                       .Read(read =>
                                       {
                                           read.Url("/Api/SiteInfo/_getPremiseArea/_si=" + Model.SiteId)
                                               .DataType("json");
                                       })
                                    ))
                        )

Grid

answered on 17 May 2017

1 answer

842 views

RadioButtons in ClientTemplate using an enum

I have a grid in which one of the columns I would like to display/edit using RadioButtons. The underlying value is an enum. I'm still working on getting the column to display the correct choice. Right now, none of the radio buttons are checked. What am I doing wrong? Below please see the grid, and the enum declaration (in case that's an issue)

@(Html.Kendo().Grid<HVMS.BusinessLayer.Models.Metric>()

.Name("MetricGrid")

.Columns(columns =>

{

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

columns.Bound(c => c.ThresholdAssignment).ClientTemplate(

"<span>Unassigned</span> <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' # if (ThresholdAssignment == 'Unassigned') { # checked = 'checked' # } # />" +

" <span>Weekly</span> <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' # if (ThresholdAssignment == 'Weekly') { # checked = 'checked' # } # />" +

" <span>Monthly</span> <input type='radio' name='Metrics[#= index(data)#].ThresholdAssignment' # if (ThresholdAssignment == 'Monthly') { # checked = 'checked' # } # />"

);

})

.ToolBar(toolbar =>

{

toolbar.Save();

toolbar.Excel();

toolbar.Pdf();

})

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

.Navigatable()

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

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row))

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

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

.Read(read => read.Action("Metrics_Read", "MetricThreshold").Data("additionalData"))

.Update(update => update.Action("Metrics_Update", "MetricThreshold"))

)

public enum ThresholdAssignment { Unassigned, Weekly, Monthly }

Grid

answered on 16 May 2017

1 answer

451 views

auto trim non-numeric pasted data

How can I let users paste '123456 ' into my numeric textbox and have it auto-strip the spaces? The spaces are usually at the end but are possibly at the beginning too.

Currently unless I copy/paste all digits nothing gets pasted. I can see it trying to paste but then it automatically disappears.

@(Html.Kendo().NumericTextBoxFor(model => model.DocumentId)
.Spinners(false).Decimals(0).Format("#")

)

Perhaps there's a property to help me do this or an event where I can reliably get the pasted value, strip all but the digits and replace the text before any validation occurs.

NumericTextBox

answered on 16 May 2017

8 answers

1.5K+ views

Set an initial filter in a grid

Using the KendoUI ASP.NET MVC Grid, it is possible to create a filter in the DataSource property so that on the initial load of the grid, it only displays the filtered records. However, when using this method to create an initial filter on the data source, it does just that, actually filters the data source completely. it does not allow the end user to click the filter button, display the current filter criteria, click clear, and create a new filter to include some of the data that was not initially filtered out. This is because the data source is filtered.

In a grid, is there a way of setting an initial filter when the grid loads so that when the end user is clicks on the filter button, they will see the contents of the initial filter (for example "Hanari Carnes" - see step1...png), and can clear the filter to display all of the data (step2...png)?

Grid

answered on 16 May 2017

1 answer

216 views

Remote Data Binding

Hello,

I try create a Stacked chart with remote data

view model:

public class PerformanceChartViewModel

{

public double[] Zero { get; set; }

public double[] Standart { get; set; }

public double[] Premium { get; set; }

public double[] PremiumPlus { get; set; }

public string[] Categories { get; set; }

}

Controller action:

public ActionResult UpdateChart()

{

var model = new PerformanceChartViewModel();

model.Zero = new[] {1.0, 13, 12, 10};

model.Standart = new[] {2.0, 13, 12, 10};

model.Premium = new[] {3.0, 13, 12, 10};

model.PremiumPlus = new[] {4.0, 13, 12, 10};

model.Categories = new[] {"a", "b", "c", "d"};

return Json(model);

}

View:

@(Html.Kendo().Chart<PerformanceChartViewModel>()

.Name("performanceChart")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.DataSource(ds => ds.Read(read => read.Action("UpdateChart", "Dashboards")))

.SeriesDefaults(seriesDefaults =>

seriesDefaults.Bar().Stack(ChartStackType.Stack100)

)

.Series(series => {

series.Bar(m => m.Zero).Name("Zero").Color("#f82831");

series.Bar(m => m.Standart).Name("Standart").Color("#00ae58");

series.Bar(m => m.Premium).Name("Premium").Color("#ffde56");

series.Bar(m => m.PremiumPlus).Name("Premium Plus").Color("#033e7b");

})

.CategoryAxis(axis => axis

.Categories(m => m.Categories)

.MajorGridLines(lines => lines.Visible(false))

)

.ValueAxis(axis => axis

.Numeric()

.Line(line => line.Visible(false))

.MajorGridLines(lines => lines.Visible(true))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Template("#= series.name #: #= value #")

)

But chart is empty, could You help with it?

Chart

answered on 15 May 2017

1 answer

1.2K+ views

Kendo Grid Export to Excel

Please refer attached screen shot.

I have parent and child grids. Child grid has Export to Excel button. When we click Export to Excel in child grid, it should export the expanded row as well as all child grid rows. Right now I can export child grid data only.

Grid

answered on 15 May 2017

21 answers

1.1K+ views

Persist state issues

Hi, after loading state for a grid, the toolbar disappears. Also, the Scrollable.Height property is no longer recognized and grid auto-sizes. Basically, I'm trying to save the user's grid state on every dataBound event. Then on initial load of page, the user's grid state is loaded. Any ideas?

function onDataBound(arg)

{

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

if (initialLoad) {

var options = localStorage["kendo-grid-options"];

if (options) {

grid.setOptions(JSON.parse(options));

}

initialLoad = false;

}

localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());

}

Grid

answered on 15 May 2017

1 answer

109 views

Suggestions not working with cascaded multiselects with serverFiltering(true).

Hi Team,

We are using cascaded multiselects with serverfiltering set to true.

But when we are typing some characters in the second multiselect, the suggestions are not showing up.

However it is working fine with serverfiltering set to false but in this case the second multiselect is not filtering on selection from first multiselect.

First Multiselect:

@(Html.Kendo().MultiSelect()
.Name("drp_Sector")
.DataTextField("SectorName")
.DataValueField("SectorId")
.Placeholder("Select").HtmlAttributes(new { @class = "drpWidth fontforcontrol" })
.Events(e =>
{ e.Change("onChange_SectorPreDefinedComps").DataBound("onDataBound_SectorPreDefinedComps").Filtering("OnFilter_SectorPreDefinedComps");
})
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSectors", "ManageComps");
}).ServerFiltering(true);
}).AutoBind(false)
)

Second Multiselect:

@(Html.Kendo().MultiSelect()
.Name("MulSel_SubSector")
.DataTextField("SubSectorName")
.DataValueField("SubSectorId")
.Placeholder("Select")
.AutoBind(false)
.HtmlAttributes(new { @class = "fontforcontrol" })
.Enable(false)
.Events(e =>
{
e.Change("onChange_SubSectorPreDefinedComps").DataBound("onDataBound_SubSectorPreDefinedComps");

})

.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSubSectors", "TickComp")
.Data("PostSectorIdPreDefined");
}).ServerFiltering(true);
}))

Please help asap.

Thanks in advance,

Abhinav

MultiSelect

answered on 15 May 2017