Questions on UI for ASP.NET MVC Forum

2 answers

99 views

Custom View

Is it possible to make a custom view for the Kendo ui MVC Gantt chart?

I've found documentation on how to do this in JavaScript.
Is this possible? If so is there any documentation or demo instructing on how to do this?

Thanks in advance!

Gantt

answered on 22 Feb 2016

20 answers

1.2K+ views

MVC - inline client-side grid - clicking "Cancel" removes row. Probably not the model ID issue.

I have a Kendo grid set up for client-side only. Whenever I add a row, then edit it, then cancel - it gets removed. Multiple questions have been asked here about this same issue, and all the suggestions point to incorrect setup of the model's ID.Well, in my case the ID seems to be set up correctly. I am assigning a new ID to the model in the onGridSave() javascript event, like this:

var _curId = 1;

function onGridSave(e) {

var newId = _curId++;

e.model.set('id', newId);

e.model.set('EncryptedIngredientId', newId);

}

And when I look at the data in the grid after having added multiple rows, all of their IDs are unique - from 1 to n.

But when I cancel an edit, in the onGridChange() event the action is "remove", and the cancelled row is removed. This happens for new rows as well as for edited rows, while it should only be the case for new rows.The grid is set up as follows:

@(Html.Kendo().Grid<IngredientViewModel>(Model.ServerData)

.Name("IngredientsGrid")

.Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(true))

.BindTo(Model.DataAfterEdit ?? Model.ServerData)

.DataSource(ds => ds

.Ajax()

.ServerOperation(false)

.Events(ev => ev.Change("onGridChange").Error("onGridError"))

.Model(m => {

m.Id(p => p.EncryptedIngredientId);

m.Field(p => p.EncryptedIngredientId).DefaultValue(Guid.NewGuid().ToString());

m.Field(p => p.PercentInfo).DefaultValue(new PercentInfoViewModel());

})

.Read("IngGrid_Read", "Company") // <-- dummy action that doesn't exist in controller

.Update("IngGrid_Update", "Company") // <-- dummy action that doesn't exist in controller

.Create("IngGrid_Create", "Company") // <-- dummy action that doesn't exist in controller

.Destroy("IngGrid_Destroy", "Company")) // <-- dummy action that doesn't exist in controller

.ToolBar(tbar => tbar.Create())

.Columns(c => {

c.AutoGenerate(false);

c.Bound(m => m.CasNumber);

c.Bound(m => m.IngredientName);

c.Bound(m => m.PercentInfo).ClientTemplate("#= makePercentageDisplayString(data.PercentInfo) #").Width(180);

c.Bound(m => m.ReachRegNumber);

c.Bound(m => m.ReachSvhc);

c.Bound(m => m.RohsSubstance);

c.Bound(m => m.Prop65Substance);

c.Command(command => {

command.Edit();

command.Destroy();

}).Width(200);

})

.Events(evt => {

evt.Save("onGridSave");

evt.Edit("onGridEdit");

})

)

What am I doing wrong?

Grid

answered on 22 Feb 2016

1 answer

543 views

Hide Grid toolbar template while exporting

Hello,

I have Kendo grid which has Export to PDF button and other Buttons on toolbar. So i am using a toolbar template. As mentioned in Posts to hide toolbar i used the following css to hide toolbar button in exported pdf.

.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-grouping-header {
display: none;
}

But my pdf file Shows the toolbar with all Buttons. So i believe must be something to do with template. Please suggest how can i hide toolbar template in export

Thanks

Anamika

Grid

answered on 22 Feb 2016

1 answer

416 views

Select Text for Copy/Paste with Multiple Row Select Enabled

In my search to resolve an issue I'm having, I found this post:

http://www.telerik.com/forums/select-text-although-allowrowselect-is-true

How do we set the EnableDragToSelectRows property to false using the Telerik UI for ASP.NET MVC (powered by Kendo UI) grid? I have this applied:

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

...and need to disable the marquee select so the users can select and copy text. Thank you!

-Anthony

Grid

answered on 22 Feb 2016

1 answer

153 views

Local Databinding with Multiple series

Hey there,

I'm currently using MVC, and have a view model that contains two Enumerables, each one representing a different series for use in the Donut Chart.

Normally, with a single enumerable, I would use the code below to bind the series.

In my case the view model has two enumerables, Model.Series1 and Model.Series2. How would I go about modifying this code to accommodate the two series?

@(Html.Kendo().Chart(Model)

.Name("chart")

.Title("Single Series")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.Series(series =>

{

series.Donut(

model => model.Value, // The data to use

model => model.Category, // The category Name

model => model.Color, // The color to use for the category

null // How far out the donut section should pop out

);

})

.Tooltip(tooltip => tooltip

.Visible(true)

.Template("#= category # - #= kendo.format('{0:P}', percentage) #")

)

Chart

answered on 19 Feb 2016

6 answers

616 views

ClientEvent onEdit arguments all undefined (mode, dataItem, etc)

Hi,

I tried to intercept "Edit" ClientEvent and argument properties are all undefined.

Here is the function and alerts are displayed, so I know the event is called. What did I miss?

Thank you

function onEdit(e)
{
alert(e.dataItem);
alert(e.mode);
alert(e.form);
alert(e.isNew);
if (e.mode == "edit" && (typeof e.dataItem != 'undefined') && (e.dataItem != null)) {
alert('a');
$(e.form).find('#Description').hide();
}

}

Grid

answered on 19 Feb 2016

4 answers

150 views

change event should return value in new version

I've noticed then in new version (2016.1.112) of component KendoDropDownList was changed the logic of the change event. In previous version (2015. 3.1111) in the change function I don't have to return the proper value. Below is the razor code that works fine.

...................

<tr>

<td class="required-label">

@Html.LabelFor(m => m.FolderId)

</td>

<td>

@(Html.Kendo().DropDownList().Name("FolderId")

.HtmlAttributes(new { @class = "select-list" })

.OptionLabel("-- WYBIERZ RODZAJ ZGŁOSZENIA --")

.DataTextField("Description")

.DataValueField("Symbol")

.DataSource(source => source.Read(read => read.Action("GetFolders", "Zgloszenia"))))

</td>

</tr>

<tr>

<td class="required-label">

@Html.LabelFor(m => m.Subject)

</td>

<td>

@Html.Kendo().TextBoxFor(m => m.Subject).HtmlAttributes(new { @class = "textboxlong" })

</td>

</tr>

<tr>

<td>

@Html.LabelFor(m => m.ForeignCode)

</td>

<td>

@Html.Kendo().TextBoxFor(m => m.ForeignCode)

</td>

</tr>

<tr>

<td class="required-label">

@Html.LabelFor(m => m.ProductId)

</td>

<td>

@(Html.Kendo().DropDownList().Name("ProductId")

.HtmlAttributes(new { @class = "select-list", data_val = "true", data_val_required = "Musisz wybrać odpowiedni program z listy" })

.OptionLabel("-- Wybierz produkt, którego dotyczy zgłoszenie --")

.DataTextField("DescriptionValid")

.DataValueField("Symbol")

.DataSource(source => source.Read(read => read.Action("GetProducts", "Zgloszenia").Data("filterProducts"))

.ServerFiltering(true))

.Enable(false)

.AutoBind(true)

.CascadeFrom("FolderId")

)

</td>

</tr>

..................

<script>

$(function () {

var folderObj = $("#FolderId");

if (folderObj) {

folderObj.data("kendoDropDownList").setOptions({

change: function (e) {

var folderVal = folderObj.val();

if (folderVal == "ZSER") {

$("#versionLabel").removeClass("required-label");

$("#Version").removeAttr("data-val-required");

} else {

$("#versionLabel").addClass("required-label");

$("#Version").attr("data-val-required", "Podanie wersji programu jest wymagane");

}

});

}

});

</script>

In the new version it turned out that my dropdownlist doesn't work, operator cannot choose the item. Exactly after clicking on, it drop down, but after choosing the item it still remains the previous one. It looks like someone has disabled the control. I've found that if add to my function return value, everything will be OK. My question is if this logic will be developed in the future? Should I always remember to return the proper value? Below is new version of this function.

<script>

$(function () {

var folderObj = $("#FolderId");

if (folderObj) {

folderObj.data("kendoDropDownList").setOptions({

change: function (e) {

var folderVal = folderObj.val();

if (folderVal == "ZSER") {

$("#versionLabel").removeClass("required-label");

$("#Version").removeAttr("data-val-required");

} else {

$("#versionLabel").addClass("required-label");

$("#Version").attr("data-val-required", "Podanie wersji programu jest wymagane");

}

return folderVal;

});

}

});

</script>

DropDownList

answered on 19 Feb 2016

1 answer

232 views

Client-Side syntax for Datasource with a parameter on Dynamic creation of DropDownList

I'm having to dynamically create instances of the kenod dropdownlist and I have it working fine except I need to know what the equivalent syntax for defining the datasource.

Here is the razor server-side syntax:

@(Html.Kendo().DropDownList()
                        .Name("lineItemTypeCode")
                        .OptionLabel("..........")
                        .HtmlAttributes(new { style = "width:100%", @class = "itemTypeClass", required = "required" })
                        .DataValueField("Code")
                        .DataTextField("Name")
                        .DataSource(source => { source.Read(read => { read.Action("GetItemTypes", "RequestPONumber").Data("GetSelectedLocation"); }); })
      )

Action is GetItemTypes

Controller is RequestPONumber

Here is my client-side:

var newItemTypeDdl = $("#itemTypeddl" + poLinesCount).kendoDropDownList(
            {
                dataTextField: 'Name',
                dataValueField: 'Code',
                dataSource: ??????,
                optionLabel: "..........",
            });

DropDownList

answered on 19 Feb 2016

1 answer

102 views

Using Disable dates

Hello everyone.

Setup

I am using Telerik MVC Datepicker control to allow the user to select a date.

My date range is between the beginning of 1997 to current day.

The list of Valid dates are in a database and can be called via Stored Procedure.

My current list of valid dates number about 3500 and most represent end of month dates (though not always).

I want to disable all the other dates in my date picker so that the user only has access to dates that have data associated with them.

Is there a way to use the DisableDates feature of the Datepicker to do this?

Thanks

Corey

Date/Time Pickers

answered on 19 Feb 2016

1 answer

57 views

Chart obj ref error

I'm trying to get my chart title to be dynamic based on data in my chart. However, since changing my ViewModel, I'm not getting any data in the chart to show up. Here's my code so far.
ViewModel:

public class TargetZeroDetail

{

public String Title { get; set; }

public List<TargetZeroDetails> Details { get; set; }

}

public class TargetZeroDetails

{

public DateTime DetailDate { get; set; }

public String ShortDetailDate

{

get

{

return String.Format("{0:M/dd}", DetailDate);

}

public Decimal Score { get; set; }

}

Controller:

public ActionResult Index()

{

return View();

}

public ActionResult GetChartData([DataSourceRequest] DataSourceRequest request, DateTime passedDate)

{

TargetZeroDetail data = Utility.GetTargetZeroData(passedDate);

return Json(data, JsonRequestBehavior.AllowGet);

}

View:

@model Utilities.TargetZeroDetail

<head>

<link href="~/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />

<link href="~/Content/kendo/2015.3.1111/kendo.material.min.css" rel="stylesheet" />

<link href="~/Content/kendo/2015.3.1111/kendo.blueopal.min.css" rel="stylesheet" />

<script src="~/Scripts/kendo/2015.3.1111/jquery.min.js"></script>

<script src="~/Scripts/kendo/2015.3.1111/kendo.all.min.js"></script>

<script src="~/Scripts/kendo/2015.3.1111/kendo.aspnetmvc.min.js"></script>

</head>

<body>

@{

DateTime dateToPass = Convert.ToDateTime(Request.QueryString["date"]);

if (dateToPass == DateTime.MinValue)

{

dateToPass = new DateTime(DateTime.Now.Date.Year, DateTime.Now.Month, 1);

}

<table>

<tr>

<td valign="top">

@(Html.Kendo().Button()

.Name("prevButton")

.Content("Previous Month")

.Icon("expand-w")

.Events(ev => ev.Click("onPrevClick"))

)

</td>

<td>

<div id="example">

<div id="chart">

@(Html.Kendo().Chart(Model.Details)

.Name("targetZeroChart")

.DataSource(dataSource => dataSource

.Read(read => read.Action("GetChartData", "Home", new { passedDate = dateToPass }))

)

.ChartArea(ca => ca.Height(690).Width(690))

.Title(Model.Title)

.Legend(false)

.SeriesDefaults(series => series

.RadarLine()

.Width(0)

.Markers(markers => markers

.Visible(true)

.Background("blue")

.Border(border => border

.Width(2)

.Color("blue")

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Background("white")

)

.Series(series => series

.RadarLine(d => d.Score)

)

.CategoryAxis(axis => axis

.Categories(m => m.ShortDetailDate)

)

.ValueAxis(axis => axis.Numeric()

.Labels(l => l.Visible(false))

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

.PlotBands(pb =>

{

pb.Add().Color("green").From(0).To(1).Opacity(0.5);

pb.Add().Color("yellow").From(1).To(2).Opacity(0.5);

pb.Add().Color("gold").From(2).To(3).Opacity(0.5);

pb.Add().Color("orange").From(3).To(4).Opacity(0.5);

pb.Add().Color("red").From(4).To(10).Opacity(0.5);

})

)

</div>

</td>

<td valign="top">

@(Html.Kendo().Button()

.Name("nextButton")

.Content("Next Month")

.Icon("expand")

.Events(ev => ev.Click("onNextClick"))

.HtmlAttributes(new

{

@class = "right-icon"

})

)

</td>

</tr>

</table>

<style>

.right-icon .km-button .km-icon {

float: right;

margin-left: 0.3em;

}

</style>

<script>

function onPrevClick(e) {

var newAddress = getPathFromUrl(window.location.href);

if (newAddress.indexOf("Home") < 0) {

newAddress += "Home/Index";

}

newAddress += "?date=@dateToPass.AddMonths(-1).Date.ToShortDateString()";

window.location.replace(newAddress);

}

function onNextClick(e) {

var newAddress = getPathFromUrl(window.location.href);

if (newAddress.indexOf("Home") < 0) {

newAddress += "Home/Index";

}

newAddress += "?date=@dateToPass.AddMonths(1).Date.ToShortDateString()";

window.location.replace(newAddress);

}

function getPathFromUrl(url) {

return url.split(/[?#]/)[0];

}

$("#chart").css("width", "700px").css("height", "700px")

.data("kendoChart");

</script>

</body>

I'm assuming that since my initial call to the controller simply returns an empty View, that's why this is happening. However if I were to make the call to get data to return to my view initially, it still doesn't show up.

What am I missing here?

Chart

answered on 19 Feb 2016