Questions on UI for ASP.NET MVC Forum

1 answer

234 views

Grid Filtering on null DropDownList Item

I am trying to filter the Grid based on what the user types. One of my fields is a drop down list and if the foreignKey ID is null the filter breaks because it cannot get the value.

The field is Gender. Is there a way to first check if Gender_Id is null before I check Gender_Types.Gender? Because if Gender_Id is null then so is Gender_Types.

Here is my code:

// Filter the Grid as a user types
    $("#Search").on("keyup click input", function () {
        grid = $("#Grid").data("kendoGrid");
        var searchFilter = { logic: "and", filters: [] };

        if (this.value.length > 0) {
            var search = this.value.trim();
            var search_array = search.split(" ");
            for (var i = 0; i < search_array.length; i++) {
                var filter = { logic: "or", filters: [] };

                filter.filters.push({ field: "Full_Name", operator: "contains", value: search_array[i] });
                filter.filters.push({ field: "Gender_Types.Gender", operator: "contains", value: search_array[i] });

                searchFilter.filters.push(filter);
            }

            grid.dataSource.query({ filter: searchFilter });

            // When done filtering select page one otherwise no page is selected
            grid.dataSource.page(1);

        } else {
            grid.dataSource.query({ filter: searchFilter });

            // When done filtering select page one otherwise no page is selected
            grid.dataSource.page(1);
        }
    });

Grid

answered on 09 Dec 2014

1 answer

208 views

Redline from Timeline View

Hello,

I'm trying to show the redline you can see in timeline view at http://www.telerik.com/kendo-ui/ganttchart (also in attached file).
How I can do it? I don't see any option to enable it. I'm actually not using Dependencies between task or additional Resource.

Anyway, it's supposed to show the actual time (today) from the timeline? or what's his purpose?

Gantt

answered on 08 Dec 2014

1 answer

140 views

How to set chart series from jQuery script?

I have a script like this:

$.ajax(

{

url: '@Url.Action("GetThrowData", "UserConsoleViewModels")',

type: 'POST',

dataType: 'json',

data:

{

throwId: _throwId

}

).done(

function (response) {

console.log(response);

$("#direction").text(response.Data.Action);

$("#lblRawData").text(response.Data.RawData);

}

).error(

function (xhr, status, error) {

alert(xhr.responseText);

}

);

Right now the RawData property (a comma delimited list of floats) is just being printed to a label. What I would like to do is apply it as a series in a chart similar to this:

@(Html.Kendo().Chart()

.Name("currentGraph")

.Title("Switch Current Graph")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Format("{0}"))

.Title("Current")

).HtmlAttributes(new { style = "height:300px" })

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}")

)

How would I do that?

Chart

answered on 08 Dec 2014

1 answer

190 views

Problem Binding Kendo Pivot grid

Hi,

We are right now in the trial period of the Telerik MVC suite.
We tried binding Kendo Pivot Grid using MVC by referring examples available on
http://demos.telerik.com/aspnet-mvc/pivotgrid/local-flat-data-binding (showing data binding using XML).
We need to bind list data to view. Please provide some examples which will bind List format data returned by model to view in ASP.NET MVC4.

This would help us a lot in the evaluation process.

Thanks and regards,
Vaibhavi Shinde

PivotGrid

answered on 08 Dec 2014

1 answer

198 views

Custom popup editor for Kendo grid

My custom editor template consists of a table with one row of two columns. Each of those columns have a table. The two tables have a one to one relationship. All CRUD operations are working fine, concerning Inserts, Updates, and Deletes. My only complaint is appearance. I can't get the kendo created and controlled Update and Cancel buttons to float all the way to the right after exhausting ever example I could find.

I've tried:
.k-edit-buttons {
float: right;
}

didn't work. It puts the buttons about half way there. The code in my form looks like the following:

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<table id="crossarm_values" style="height: 500px; margin: 20px 20px 20px 40px; background-color: rgba(10, 10, 10, 0.11);" class="ui-grid-b ui-corner-all ui-shadow ui-dialog-titlebar">
<tr id="crossarm_data">
<td style="width: 375px; height: 475px; margin: 1px 1px 1px 1px;">
<fieldset id="master">
<legend style="font-family: 'Bookman Old Style'; color:orangered; font-weight: bold; font-size:16px; border: none;">Master Crossarm Data</legend>
<table style="font-size: 12px; color:black; width: 325px; height: 375px; margin-bottom: 85px; margin-left: 20px;">
@Html.HiddenFor(e => e.EquipmentId)
<tr style="margin-left: 1px; margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.EquipmentName)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.EquipmentName)
</td>
</tr>
<tr style="margin-left: 1px; margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.EquipmentDescription)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.EquipmentDescription)
</td>
</tr>
<tr style="margin-left: 1px; margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(c => c.Category)
</td>
<td style="width: 130px;">
@Html.DropDownListFor(c => c.Category, Model.CategoryTypes)
</td>
</tr>
<tr style="margin-left: 1px;margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.EquipmentType)
</td>
<td style="width: 130px;">
@Html.DropDownListFor(t => t.EquipmentType, Model.CrossarmTypes, "-- Select A Type --")
</td>
</tr>
<tr style="margin-left: 1px;margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.Length)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.Length)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.Height)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.Height)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.Width)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.Width)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.CanEditLength)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.CanEditLength)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.CanEditHeight)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.CanEditHeight)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.CanEditWidth)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.CanEditWidth)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px; margin-right: 5px; width: 150px;">
@Html.LabelFor(e => e.IsObsolete)
</td>
<td style="width: 130px;">
@Html.EditorFor(e => e.IsObsolete)
</td>
</tr>
</table>
</fieldset>
</td>
<td style="width: 50px; padding: 15px 15px 15px 15px;"></td>
<td style="width: 325px; height: 475px; margin: 1px 1px 1px 1px; float: right;">
<fieldset id="detail">
<legend style="font-family: 'Bookman Old Style'; color:orangered; font-weight: bold; font-size:16px;">Detail Crossarm Data</legend>
<table style="font-size: 12px; color:black; width: 300px; height: 465px; margin-left: 10px;">
@Html.HiddenFor(c => c.CrossarmId)
<tr style="margin-left: 1px; margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.AttachOffset)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.AttachOffset)
</td>
</tr>
<tr style="margin-left: 1px;margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.AttachSlope)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.AttachSlope)
</td>
</tr>
<tr style="margin-left: 1px;margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.CanAttachOffset)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.CanAttachOffset)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.CanAttachSlope)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.CanAttachSlope)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.Number, null, new { pattern = @"\d{0, 12}" })
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.Number)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.Weight)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.Weight)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.Slope)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.Slope)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.VerticalOffset)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.VerticalOffset)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.HasBrace)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.HasBrace)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.HorizontalBraceSpace)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.HorizontalBraceSpace)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.VerticalBraceSpace)
</td>
<td style="width: 130px;">
@Html.EditorFor(c => c.VerticalBraceSpace)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(s => s.Species)
</td>
<td style="width: 130px;">
@Html.DropDownListFor(s => s.Species, Model.SpeciesTypes)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.Quantity)
</td>
<td style="width: 40px;">
@Html.EditorFor(c => c.Quantity)
</td>
</tr>
<tr style="width: 275px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@Html.LabelFor(c => c.CrossarmSortOrder)
</td>
<td style="width: 40px;">
@Html.EditorFor(c => c.CrossarmSortOrder)
</td>
</tr>
<tr style="margin-left: 1px; margin-right: 5px;">
<td style="margin-left: 1px;margin-right: 5px; width: 175px;">
@*@Html.LabelFor(c => c.EquipmentName)*@
</td>
<td style="width: 130px;">
@*@Html.EditorFor(e => e.EquipmentName, new { disabled = "disabled", @readonly = "readonly" })*@
@*@Html.DisplayFor(e => e.EquipmentName)*@
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr id="crossarm_list" style="display: none">
@foreach (var item in @ViewBag.Crossarms)
{
<td>@item</td>
}
</tr>
</table>

}

Grid

answered on 08 Dec 2014

0 answers

245 views

Binding DateTimePicker to DateTimeOffset

I have 3 date attributes defined as timestamp with timezone in Oracle database. I ise EF 5.0 and LINQ to get the data from Oracle and it works fine. I have defined the attributes in my VM As DateTimeOffset and I can populate them without any issues. However when I try to bind them to DateTimePicker in my EditorTemplate it breaks and crashes the page.

Is this not supported? If so what alternatives do I have. Does anyone have an example that I can see.

I am doing a basic MVC app using EF 5.0 and using LINQ to get the data using repository patter.

Here is a snippet of my code.

VM

[DisplayName("Activate Date")]

public DateTimeOffset? activateDate { get; set; }

[DisplayName("Inactivate Date")]

public DateTimeOffset? inactivateDate { get; set; }

[DisplayName("Energizing Date")]

public DateTimeOffset? energizingDate { get; set; }

DAO

var x = dao.CONNECTIVITY_UNIT

.Join(dao.OP_AREA_ORG, cu => cu.OP_AREA_CODE, oa => oa.OP_AREA_CODE, (cu, oa) => new { CONNECTIVITY_UNIT = cu, OP_AREA_ORG = oa })

.Where(w => w.CONNECTIVITY_UNIT.UNIT_TYPE.Equals("SUBSTATION"))

.Where(w => w.CONNECTIVITY_UNIT.IS_ACTIVE_FLAG.ToUpper().Equals("Y"))

.Where(w => w.CONNECTIVITY_UNIT.ABBR.ToUpper().Equals("BRA"))

.Select(c => new SubstationVM

{

energizingDate = c.CONNECTIVITY_UNIT.ENERGIZING_DATE,

activateDate = c.CONNECTIVITY_UNIT.ACTIVATE_DATE,

inactivateDate = c.CONNECTIVITY_UNIT.INACTIVATE_DATE,

updateTime = c.CONNECTIVITY_UNIT.UPDATE_TMSTMP

})

.OrderBy(o => o.substationABBR)

.ToList();

return x;

View EditorTemplate

<div class="form-group">

@Html.LabelFor(model => model.energizingDate, new { @class = "control-label col-xs-2" })

<div class="col-xs-2">

@Html.EditorFor(model => model.energizingDate)

@Html.ValidationMessageFor(model => model.energizingDate)

</div>

<div class="col-xs-3">

<div class="form-group">

@Html.LabelFor(model => model.activateDate, new { @class = "control-label col-xs-4" })

<div class="col-xs-7">

@Html.EditorFor(model => model.activateDate)

@Html.ValidationMessageFor(model => model.activateDate)

</div>

<div class="col-xs-3">

<div class="form-group">

@Html.LabelFor(model => model.inactivateDate, new { @class = "control-label col-xs-4" })

<div class="col-xs-7">

@Html.EditorFor(model => model.inactivateDate)

@Html.ValidationMessageFor(model => model.inactivateDate)

</div>

Am I missing anything? Is there another or better way of doing this?

Thanks for the help.

DatePicker

asked on 05 Dec 2014

3 answers

121 views

Which cell got clicked in a row?

I have a grid and event like this. The text placed in a label in the last line of the script depends upon which of two columns got clicked; HomeAddress or BizAddress. .If the user clicked the Name column instead of one of the two address columns, I want to do nothing.

How can I tell that so I can pick which field to put in the label text?

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

.Name("grid")

.Columns(columns =>

{

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

columns.Bound(c => c.HomeAddress).Width(140);

columns.Bound(c => c.BizAddress).Width(140);

})

.HtmlAttributes(new { style = "height: 380px;" })

.Scrollable()

.Groupable()

.Sortable()

.Selectable()

.Events(events => events.Change("grid_change"))

.Pageable(pageable => pageable

.Refresh(true)

.PageSizes(true)

.ButtonCount(5))

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("FilteredPeople_Read", "UserConsoleViewModels"))

)

<script>

function grid_change(e) {

var data = this.dataItem(this.select());

if (clickedColumnIndex != 0) // How do I find selectedColumnIndex?

{

$("#labelName").text(data.Name);

$("#labelAddress").text(selectedColumnIndex == 1 ? data.HomeAddress : data.BizAddress);

}

</script>

Grid

answered on 05 Dec 2014

1 answer

208 views

Panel bar custom helper : how to add item

Hello,

I need to make my own helper of panel bar to manage conditional displaying of items.

I made it like this

public static Kendo.Mvc.UI.Fluent.PanelBarBuilder MovementPanel(this HtmlHelper helper, string name, Boolean withContainer,string Controller, RouteValueDictionary export)

{

Kendo.Mvc.UI.Fluent.PanelBarBuilder myPanel = helper.Kendo().PanelBar()

.Name(name)

.ExpandAll(true)

.ExpandMode(PanelBarExpandMode.Multiple);

PanelBarItem itAction = new PanelBarItem();

itAction.Text = "Actions";

itAction.Items.Add(NewBarItem("Error detail","javascript:void(0)"));

itAction.Items.Add(NewBarItem("File content", "javascript:void(0)"));

PanelBarItem itExcel = new PanelBarItem();

itExcel.Text = "Excel export";

itExcel.Action("ExportToExcel", Controller, export);

itAction.Items.Add(itExcel);

if (withContainer)

{

itAction.Items.Add(NewBarItem("Container history", "javascript:void(0)"));

}

myPanel.ItemAction(ac => ac.Items.Add(itAction));

myPanel.Events(events =>

events.Select("OnSelectAction")

);

return myPanel;

}

private static PanelBarItem NewBarItem(string text, string url)

{

PanelBarItem itTemp = new PanelBarItem();

itTemp.Text = text;

itTemp.Url = url;

return itTemp;

}

But how can I link items to the PanelBarBuilder ?

With this instructions : myPanel.ItemAction(ac => ac.Items.Add(itAction));

Method only returns javascript.

thanks for your help

PanelBar

answered on 05 Dec 2014

1 answer

468 views

[Solved] MVC Grid WebApi vs Ajax binding

Hi!
I've investigated grid control for few hours and came to the confusion with bindings. I found no principal differences between WebApi() and Ajax() bindings. Could you drop some light on this topic: why do they exist separately and when should I use one or another?

Investigation details:

- documentation for MVC grid doesn't have WebApi binding description. It has only a WebService which I think was the predecessor of WebApi binding. Anyway, that didn't explain the differences.

- one difference I've found so far is that by default Ajax binding use POST request, while WebApi binding use GET request. But this behavior can be overriden. So the following examples generate identical network traffik:
1) .DataSource(dataSource => dataSource
.WebApi()
.Read(read => read.Action("Grid", "People").Type(HttpVerbs.Get))
2) .DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Grid", "People").Type(HttpVerbs.Get))
Changing HttpVerbs.Get to HttpVerbs.Post again generates the same traffik for both bindings.
Obviously my MVC controller works the same too since I don't need to change it to work with one or another binding.

- another difference is in the HTML output which is rendered on the view:
if(kendo.data.transports['webapi']){return 'webapi';} else{throw new Error(...
if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error(...
But that doesn't seem important since network traffik generated by both configurations is the same. Was it done for potential future needs, or did I miss something?

Grid

answered on 05 Dec 2014

1 answer

200 views

Hierarchy - problem with parent ID

How can I get the parent ID when I trying to add new subelement? See attachment.

Sub-grid code template looks like below:

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

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

.Name("podzakresy#=IdZakres#")

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

.ToolBar(toolbar =>

{

toolbar.Create().Text("<span class=\"fa fa-plus\"></span> " + SettingsStrings.DodajNowyPodzakres).HtmlAttributes(new { @class = "btn btn-warning", idZakresNadrzedny = "#=IdZakres#" });

})

.Columns(columns =>

{

columns.Bound(c => c.Numer).Width(80).Title(SharedStrings.Numer);

columns.Bound(c => c.Nazwa).Title(SharedStrings.Nazwa);

columns.Command(command => command.Edit().UpdateText(SharedStrings.Zapisz).CancelText(SharedStrings.Anuluj).Text(SharedStrings.Edytuj)).Width(100);

columns.Command(command => command.Destroy().Text(SharedStrings.Usun)).Width(100);

})

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model => { model.Id(p => p.IdZakres); })

.Read(read => read.Action("GridPodzakresy_Read", "Settings", new { IdZakresNadrzedny = "#=IdZakres#" }))

.Create(create => create.Action("GridPodzakresy_PopupCreate", "Settings", new { IdZakresNadrzedny = "#=IdZakres#" }))

.Update(update => update.Action("GridZakresy_PopupUpdate", "Settings"))

.Destroy(delete => delete.Action("GridZakresy_PopupDestroy", "Settings"))

)

.Pageable()

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

.Sortable()

.ToClientTemplate()

)

</script>

Main grid code looks like below:

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

.Name("grid-zakresy")

.HtmlAttributes(new { style = "height:100%; cursor:default" })

.ClientDetailTemplateId("template")

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

.ToolBar(toolbar => toolbar.Create().Text("<span class=\"fa fa-plus\"></span> " + SettingsStrings.DodajNowyZakres).HtmlAttributes(new { @class = "btn btn-primary" }))

.Columns(columns =>

{

columns.Bound(c => c.IdKontrakt).Visible(false).Filterable(false);

columns.Bound(c => c.IdZakres).Visible(false).Filterable(false);

columns.Bound(c => c.IdZakresNadrzedny).Visible(false).Filterable(false);

columns.Bound(c => c.Numer).Width(80).Title(SharedStrings.Numer);

columns.Bound(c => c.Nazwa).Title(SharedStrings.Nazwa);

columns.Command(command => command.Edit().UpdateText(SharedStrings.Zapisz).CancelText(SharedStrings.Anuluj).Text(SharedStrings.Edytuj)).Width(100);

columns.Command(command => command.Destroy().Text(SharedStrings.Usun)).Width(100);

})

.Pageable(pageable => pageable.Refresh(true).ButtonCount(3))

.Sortable(s => { s.AllowUnsort(true); s.SortMode(GridSortMode.MultipleColumn); })

.Scrollable(scr => { scr.Height("100%"); scr.Enabled(false); })

.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Model(model => { model.Id(p => p.IdZakres); })

.Read(read => read.Action("GridZakresy_Read", "Settings", new { IdKontrakt = Model.IdKontrakt }))

.Create(create => create.Action("GridZakresy_PopupCreate", "Settings"))

.Update(update => update.Action("GridZakresy_PopupUpdate", "Settings"))

.Destroy(delete => delete.Action("GridZakresy_PopupDestroy", "Settings"))

)

Action in controller when I trying to create new element. At this action I need parent ID.

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult GridPodzakresy_PopupCreate([DataSourceRequest] DataSourceRequest request, ZakresViewModel zakres)

{

if (zakres != null && ModelState.IsValid)

{

//some code

}

return Json(new[] { zakres }.ToDataSourceResult(request, ModelState));

}

Thanks in advance

Grid

answered on 05 Dec 2014