Questions on UI for ASP.NET MVC Forum

1 answer

832 views

Conditional CheckBox for Enabling and Disabling

Hi All,
I am stuck with a very small problem. Please help me in solution to the problem.
Basically, I need to compare the value in the BatchingStatus field in my dataset accordingly need to disable the checkbox in the grid.
Following is my code. Attached the screen shot of portal.

@using (Html.BeginForm("ReplaySelectedMessages", "Home"))
{

<div id="gridContent">
<h1></h1>
@(Html.Kendo().Grid<XYZ.MessageReplay.MvcApp.Models.LogModel>(Model)
.Name("gridTable")
//.EnableCustomBinding(true)

.HtmlAttributes(new {style = "font-family: verdana,arial,sans-serif; font-size: 11px;color: #333333;border-color: #999999;"})
.Columns(columns =>
{

columns.Template(@<text>#if(@item.BatchingStatus) == 0 { # <input class='box' id='assignChkBx' name='assignChkBx' type='checkbox' value='@item.LogID' /> #} else {# <input class='box' id='assignChkBx' name='assignChkBx' type='checkbox' value='@item.LogID' disabled='disabled'/> #} # </text>).HeaderTemplate(@<text><input class="selectAll" type="checkbox" id="allBox" onclick="toggleSelection()"/></text>).Width(20);
columns.Bound(p => p.LogID).Template(p => Html.ActionLink(((string)p.LogID), "MessageDetails", new { logid = p.LogID })).Width(200);
columns.Bound(p => p.ReceivePortName)
.Width(100)
.Filterable(ft => ft.UI("ReceivePortsFilter").Extra(false));
columns.Bound(p => p.SendPortName).Width(100).Filterable(ft => ft.UI("SendPortsFilter").Extra(false));
columns.Bound(p => p.loggedDate).Format("{0:MM/dd/yyyy hh:mm tt}").Filterable(f => f.UI("DateTimeFilter").Extra(true)).Width(100);
columns.Bound(p => p.ControlID).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.SenderID).Width(100).Filterable(ft => ft.UI("SenderIDFilter").Extra(false));
columns.Bound(p => p.ReceiverID).Width(100).Filterable(ft => ft.UI("ReceiverIDFilter").Extra(false));
columns.Bound(p => p.InterchangeID).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.ReplayedCount).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.RetryCount).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.AckCode).Width(100).Filterable(e => e.Extra(false));
columns.Bound(p => p.BatchingStatus).Width(100).Filterable(e => e.Extra(false));
})
// .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Filterable()
.Pageable(page => page.PageSizes(new int[]{10,25,50,100}).Enabled(true))
.Sortable()
.Scrollable(src => src.Height("auto"))
.Resizable(resize => resize.Columns(true))
)

Grid

answered on 10 Mar 2015

1 answer

114 views

Behavior stange in combobox

I show you the scenario, we have a combobox with filter “contains”.

Combobox ProductorSearch

@model int

@(Html.Kendo().ComboBox()

.Name("ContactID")

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

.AutoBind(false)

.Placeholder("Escriu...")

.DataTextField("Nom")

.DataValueField("ContactID")

.Filter(FilterType.Contains)

.MinLength(4)

.DataSource(source =>

{

source.Read(read => read.Action("SearchProductors", "Productors", new { area = "Comercial" }).Data("filterProductors"))

.ServerFiltering(true);

})

//.HeaderTemplateId("ProductorSearch_HeaderTemplate")

.TemplateId("ProductorSearch_ItemTemplate")

)

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

<div>

<span class="k-widget k-header">Productor</span>

<span class="k-widget k-header">Poblacio</span>

</div>

</script>

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

<div style="width:300px">

@*<span class="k-state-default">#: data.Poblacio #</span>*@

<p><span class="k-state-default">#: data.Nom #</span><span class="k-state-default">#: data.Poblacio #</span></p>

</div>

</script>

Model

public class CollectServiceViewModel

{

[DisplayName("Ordre")]

[HiddenInput(DisplayValue = false)]

[Required(ErrorMessage = "El número d'ordre es obligatori.")]

public int ServiceID { get; set; }

[DisplayName("Albarà")]

public string RefExt { get; set; }

[DisplayName("Full Seguiment")]

public string DocNum { get; set; }

[DisplayName("Data Comanda")]

//[DisplayFormat(DataFormatString = "{0:d}")]

[DataType(DataType.Date)]

public DateTime DataOrdre { get; set; }

[DisplayName("Data Servei")]

[DataType(DataType.Date)]

[UIHint("CustomDate")]

public Nullable<DateTime> DataServei { get; set; }

[DisplayName("Expedició")]

[UIHint("ExpeditionsByData")]

public Nullable<int> ExpeditionID { get; set; }

//public Nullable<short> Position { get; set; }

[DisplayName("Urgent")]

public bool Urgent { get; set; }

[DisplayName("Reclamat")]

[DataType(DataType.Date)]

public Nullable<DateTime> DataClaim { get; set; }

[DisplayName("Recollida Extra")]

public bool Extra { get; set; }

[DisplayName("Productor")]

[Required(ErrorMessage = "El productor es obligatori.")]

[UIHint("ProductorSearch")]

public int ContactID { get; set; }

[DisplayName("Productor")]

[HiddenInput(DisplayValue = false)]

public string ProductorName { get; set; }

Grid in View

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

.Name("collects")

.HtmlAttributes(new { style = "height: 100%; border: 0;" })

.Scrollable()

.ToolBar(t =>

{

if (User.IsInRole("Modify"))

{

t.Create().Text("Nou Servei");

}

})

.Columns(columns =>

{

columns.Bound(f => f.ServiceID).Width(80);

columns.Bound(f => f.DataServei).Width(110);

columns.Bound(f => f.RefExt).Width(110);

columns.Bound(f => f.DocNum).Width(110);

columns.Bound(f => f.ProductorName).Width(300).Filterable(f => f.Operators(g => g.ForString(h => { h.Clear(); h.Contains(

"Conté"); })));

columns.Bound(f => f.ContactID).Title("Codi").Width(80);

The first time I write a text with 4 o more chars my chars are hidden and then I can see a char 0. This behavior is only occurred the first time, after that the behavior is normal.

Thanks in advance.
Xavier

Grid

answered on 10 Mar 2015

2 answers

107 views

The right combination of MobileApplication and MVC forms

Hi guys,

I have an MVC app built using the MobileApplication wrapper. Everything is working fine but I'm struggling with incorporating a form that submits to the controller. Everything I've found says the MobileApplication wrapper turns your site into a SPA which is great so no postbacks. That means all of the forms have to be created using Ajax.BeginForm rather than Html.BeginForm. I can't seem the find the right combination of setting ServerNavigation(true|false) and building a form that works in my MobileViews.

In my View I have the form defined as Content but looking at the markup it never actually created the <form> tag. Here's an example of one of my form markup:

@(Html.Kendo().MobileView()

.Title("Site Verification")

.Name("outage-details-view")

.Content(@<text>

@using (Ajax.BeginForm("OutageDetails", "Outage", new AjaxOptions

{

HttpMethod = "POST"

}))

{

@Html.ValidationSummary(true);

@Html.AntiForgeryToken()

<div class="form-group">

@Html.LabelFor(model => model.MeterNumber)

@Html.TextBoxFor(model => model.MeterNumber, new { @type = "number", @class = "form-control", placeholder = "Meter Number" })

</div>

<div class="form-group">

<label>OR</label>

</div>

<div class="form-group">

@Html.LabelFor(model => model.SiteId)

@Html.TextBoxFor(model => model.SiteId, new { @class = "form-control", @type = "number", placeholder = "Site ID" })

</div>

<input type="submit" value="Next"/>

}

</text>)

)

The markup is displaying the form elements, but not the surrounding <form> tag so nothing is firing.

Thanks

Application

answered on 09 Mar 2015

1 answer

93 views

Grid PDF Export

I know that the 2015 Q1 release has a fix in it to allow all pages to be included when doing a PDF export from a grid.

I also know that the beta version is only a trial and not a commercial version of the product and why this is so.

I'm coming under a fair bit of pressure to get this fix in place.

So,

What will the impact be on my application if I use the trial version?
Do we have any sort of a timescale for the official release if Q1 for UI for MVC

Grid

answered on 09 Mar 2015

1 answer

383 views

Excel export settings don't work after setOptions()

Hi

I'm using 2014.3.1119.440 version of Kendo MVC UI.
I configured the grid to export all data and a custom filename, and a custom toolbar with export to excel button.

It works fine, when I don't restore grid options using setOptions function.
When I restore it, with my custom toolbar preserve, it looks, like the export options are ignored.
There are only records from current page exported and exported file has a standard name.

I found the settings are correct in the page source.

Do I need some extra steps to make the settings working after restoring grid options?

Here's my razor grid code:

@{ Html.Kendo().Grid<Vectra.CPN.CPNLibrary.ViewModel.TRANSFER_IN_V>()

.Name("MainGrid")

.ToolBar(toolBar => toolBar.Template(@<text>

<input class="t-button" type="button" id="ShowCreateNewExtFormId" name="ShowCreateNewExtForm" value="@Resources.Create" onclick="location.assign('@Url.Content("~/" + ControllerName + "/New")')"/>

<input class="t-button" type="button" id="ShowEditFormId" name="ShowEditForm" value="@Resources.Edit" />

<input class="t-button" type="button" id="ShowDetailFormId" name="ShowDetailForm" value="@Resources.Details" />

<a class="k-button k-button-icontext k-grid-excel" href="#"><span class="k-icon k-i-excel"></span>Zapisz do Excela</a>

<a href="" class="k-button" id="save">Save View</a>

<a href="" class="k-button" id="load">Restore View</a>

</text>)

)

.Excel(ex => ex.AllPages(true).FileName("cpn_do_vectry_" + DateTime.Now.ToShortDateString() + ".xlsx"))

.ColumnMenu(column => column.Columns(true))

.Columns(columns => columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewBag.GridColumns))

.Reorderable(reorder => reorder.Columns(true))

.Sortable(sortable => sortable.Enabled(true).SortMode(GridSortMode.SingleColumn).AllowUnsort(true))

.Pageable(pageable => pageable.Enabled(true).Refresh(true).ButtonCount(5).PageSizes(true).PageSizes(new int[] { 5, 10, 20, 50 }))

.Filterable(filtering => filtering.Enabled(true))

.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Single).Type(GridSelectionType.Row))

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

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("TransferIn_Read", "TransferIn"))

.Model(model => model.Id(o => o.TRANSFER_ID))

.ServerOperation(false)

)

.AutoBind(false)

.Render()

;

}

and here's the part of my javascript for saving and restoring grid options:

var localStorageKey = "MainTransferInOptions";

var areOptionsLoaded = false;

function bindSaveRestoreCliks()

{

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

$("#save").click(function (e) {

e.preventDefault();

localStorage[localStorageKey] = kendo.stringify(grid.getOptions());

});

$("#load").click(function (e) {

e.preventDefault();

loadGridOptions(e);

});

}

function loadGridOptions(e)

{

if (e == undefined || e.type == "click" || (!areOptionsLoaded && e.type == "read"))

{

var rawGrid = $("#MainGrid");

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

var options = localStorage[localStorageKey];

var toolbar = $("#MainGrid").find(".k-grid-toolbar").html();

if (options) {

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

}

else if (!areOptionsLoaded && e == undefined)

{

grid.dataSource.read();

}

var newtoolbar = $("#MainGrid").find(".k-grid-toolbar");

$("#MainGrid").find(".k-grid-toolbar").html(toolbar);

bindSaveRestoreCliks();

areOptionsLoaded = true;

}

I restore the settings on page load:

$(window).ready(function (e) {

loadGridOptions(undefined);

}

);

Thanks in advance.

Paweł

Grid

answered on 07 Mar 2015

1 answer

93 views

Is there controls for Excel-like Power View functionality

Hello,

Does Telerik has something similar to Excel's Power View functionality?
Like this: https://support.office.com/en-za/article/Create-a-Power-View-sheet-in-Excel-2013-b23d768d-7586-47fe-97bd-89b80967a405#

I need something like a Pivot Grid at top and charts below it showing data presented in pivot Grid.
Here is DevExpress' functionality similar to what I want to have: https://demos.devexpress.com/MVCxPivotGridDemos/DataOutput/ChartsIntegration

Does having one datasource connected to both (grid and chart) make this integration work? Do you have any examples or demos?

Thank you,
Andrei

General Discussions

answered on 06 Mar 2015

2 answers

1.2K+ views

DatePicker display wrong format

Hello,

I've got a page with two DatePickerFor. My problem is that one display a good format and the other no.

They are implemented like this

<div class="col-md-3" style="vertical-align:middle">

@Html.LabelFor(m => m.DateFrom, new { @style = "width:100px" })

@(Html.Kendo().DatePickerFor(m => m.DateFrom)

.Format("{0:yyyy/MM/dd}")

.ParseFormats(new String[] { "MM/dd/yyyy hh:mm:ss" })

)

</div>

<div class="col-md-3" style="vertical-align:middle">

@Html.LabelFor(m => m.DateTo, new { @style = "width:75px" })

@(Html.Kendo().DatePickerFor(m => m.DateTo)

.Format("{0:yyyy/MM/dd}")

.ParseFormats(new String[] { "MM/dd/yyyy hh:mm:ss" })

)

</div>

These DatePickerFor are linked to my model. The properties are both DateTime

[Required]

[DataType(DataType.Date)]

[Display(Name = "Date from")]

public DateTime DateFrom { get; set; }

[Required]

[DataType(DataType.Date)]

[Display(Name = "Date to")]

public DateTime DateTo { get; set; }

When I look at the generated HTML, I've got this

<input aria-readonly="false"

aria-disabled="false"

aria-owns="DateFrom_dateview"

aria-expanded="false"

role="combobox"

class="k-input"

style="width: 100%;"

data-role="datepicker"

data-val="true"

data-val-date="The field Date from must be a date."

data-val-required="The Date from field is required."

id="DateFrom" name="DateFrom"

value="02/23/2015 00:00:00"

type="text">

jQuery(function(){jQuery("#DateFrom").kendoDatePicker({"format":"yyyy/MM/dd","parseFormats":["yyyy/MM/dd","yyyy.MM.dd","MM/dd/yyyy hh:mm:ss"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

<input aria-readonly="false"

aria-disabled="false"

aria-owns="DateTo_dateview"

aria-expanded="false"

role="combobox"

class="k-input"

style="width: 100%;"

data-role="datepicker"

data-val="true"

data-val-date="The field Date to must be a date."

data-val-required="The Date to field is required."

id="DateTo"

name="DateTo"

value="03/04/2015 23:59:00" type="text">

jQuery(function(){jQuery("#DateTo").kendoDatePicker({"format":"yyyy/MM/dd","parseFormats":["yyyy/MM/dd","yyyy.MM.dd","MM/dd/yyyy hh:mm:ss"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});

All seem all right, but one DatEpciker display "2015/02/23" (which is what I'm waiting for) and the other one display "03/04/2015 23:59:00".

I don't understand why with the same parameters, one DatePicker display value wiith the good format and not the other one.

Thanks for your help

Antoine

DatePicker

answered on 06 Mar 2015

1 answer

128 views

Problem with callback-function of the expandPath-function

Hi,

I have problems with the callback-function of the expandPath-function.
Is it possible that this callback-function is not executed, when the path-Array (first parameter of the expandPath-function) is [0]?

What i am trying to implement is when a new child-item is created then the parent-item should be reloaded and after that the new child-item should be selected.
This works fine, only when this new item is child of the root-item (with id 0) the callback-function, which selects the item, is not executed.

var parentItem = wpTreeView.dataSource.get(parentId);

parentItem.expanded = false;

parentItem.loaded(false);

parentItem.hasChildren = true;

wpTreeView.expandPath([parentId], function () {

var newItem = wpTreeView.dataSource.get(data.Id);

var newListItem = wpTreeView.findByUid(newItem.uid);

console.log(newListItem);

wpTreeView.select(newListItem);

});

Can someone give me some advice?

Regards,
Xaver

TreeView

answered on 06 Mar 2015

6 answers

775 views

Chart data binding to Datatable

Hi,

How can I use datatable as a datasource for any of the chart? Do you have any examples?

Thanks

Chart

answered on 06 Mar 2015

1 answer

93 views

Evaluating Telerik and have some scheduler questions

On day 3 of the eval and I have to say love the grid tools but am having some trouble with the scheduler.

The scenario is:
A Venue object has multiple event objects (not just recurring, unique multiple events). So the workflow is create the venue and then create and assign events.

Using the scheduler to create a new event the title field in the event needs to be the name of the venue. I am considering using a dropdown list but not really sure how to bind that to the title field. Resource bound to a viewbag item?

Additionally, we have regions. Venues are region agnostic but events are not. This is due to venues sitting on the regional borders and drawing crowds from different regions. I am thinking I need to add a multiselect to the template containing all the regions for event creation. On display however, I think there would be a drop down list of the regions and then the scheduler is filtered based on ddl selection. I was unable to find a filter example but think it is an onchange that would prompt the scheduler to refresh with the new parameter.

I think all this needs to be dumped into a custom editor template and I have seen plenty of examples on that and think I can get that done with the exception of recurrence. I am unsure how to add the recurrence options to a custom event editor. Is it possible to use partial views instead of using text?

Lastly, while I am not sure it is practical, would it be possible to create events outside of the scheduler. Think master/detail venue/events. I think this is possible but generating the recurrence inputs would be the tricky part again. Also, any edits would have to apply to the series in this format rather than a specific occurrence. So maybe it would create more problems than it would solve but would still like to try it out.

Hopefully all this makes sense and are fairly simple solutions that I have not learned yet.

I have included the basic classes below for reference.

Thanks in advance,
Chris

public class Venue

{

public Venue()

{

}

public int venueid { get; set; }

public string venuename { get; set; }

}

public class sEvent

{

public sEvent()

{

}

public int eventid { get; set; }

public DateTime start_time { get; set; }

public DateTime end_time { get; set; }

public string title{ get; set; }

public string description { get; set; }

public string reminder { get; set; }

public string recurrence_rule { get; set; }

public int recurrence_id { get; set; }

public virtual Venue venue { get; set; }

public virtual ICollection<Region> regionlist {get;set;}

}

Scheduler

answered on 06 Mar 2015