Questions on UI for ASP.NET MVC Forum

7 answers

130 views

[Solved] DropDownList / Server filtering problem when control near bottom of page (bug?)

I've noticed a problem with server filtering when the DropDownList is near the bottom of the page. To reproduce the problem, go to http://demos.telerik.com/aspnet-mvc/dropdownlist/serverfiltering , and shrink the browser window so that the bottom of the browser comes up to to the bottom of the box around the products dropdown. (See attached image for example.)

Click the products dropdown and notice the list is expanded above the control, which is good.

Now type "c", followed by "h". The list now moves below the control, off the page, and it can't be seen. I haven't found a way to be able to see the products in the filtered list, because if I click the scrollbar to try to scroll down the control loses focus and selects the current item, and the same happens if I try to use my mouse's scroll wheel. I am able to arrow down through the products, but it is still very awkward to not be able to see the list.

Also, this example is not a huge problem on this page, because the user could scroll the page down before entering the dropdown, and then be able to see all the contents. But in my app several pages have DropDownLists at the very bottom of the page, which makes it impossible to ever see the filtered list.

I think a good fix for this would be that if the DropDownList starts off expanded above the control, to force it to stay displaying above the control while filtering is taking place.

DropDownList

answered on 24 Nov 2015

1 answer

141 views

[Solved] Does NumericTextBox support Mouse Wheel?

Hi Telerik,

I'm using NumericTextBox in ASP.NET MVC now, and I don't see it support Mouse Wheel like control for ASP.NET AJAX?

NumericTextBox

answered on 24 Nov 2015

1 answer

321 views

[Solved] How to find the parent grid in a opened Kendo window

Hi,

I have a Kendo grid in which a Kendo window is opened when you click on each row. The code is:

<% Html.Kendo().Grid<EvaluationsQuestionsEvaluationVersionGridViewModel>(Model.VersionsGridModel)
.Name("Versions")

......
            .Columns(columns =>
            {
                columns.Bound(s => s.VersionId)
                    .Width(180);
                columns.Bound(s => s.OrganizationTypeName)
                    .Width(180);

......          columns.Command(commands =>
                {
                       commands.Custom("Copy").Click("copyEvaluationVersion");
                       commands.Edit();
                })

        <% Html.Kendo().Window()
            .Name("CopyVersion")
            .Title()
            .Content(() =>
                { %>

......                  <input type="submit" value="Submit" />
                       <input type="hidden" id="copyEvaluationVersionId" name="copyEvaluationVersionId" value="<%= ViewData["evaluationVersionId"] %>" />
                    <% } %>
                <%})
            .Draggable(true)
......

        $("#CopyEvaluationSubmit").click(function (e) {
            var yearCombo = $("#copyToYear").data('kendoDropDownList');
            SetRingCookie('ck_year', yearCombo.text(), { path: '/' });
            return true;
        });

        function copyEvaluationVersion(e) {
            $("#CopyVersion").data("kendoWindow").open();
            $("#copyToYear").data('kendoDropDownList').read();
        }

I want to know how to find the parent grid Name("Versions") in $("#CopyEvaluationSubmit").click(function (e), which is invoked when submit button is clicked in Kendo window. Thanks.

Grid

answered on 24 Nov 2015

4 answers

178 views

[Solved] Kendo UI Scaffolder (UI for MVC Grid) generate the incorrect code

HI

I found that the generated code by UI for MVC Grid are not correct.

Add > New Scaffolded Item... > Kendo UI Scaffolder > UI for MVC Grid

Options : Editable/Ajax/InCell/Create/Update/Destroy

\Controllers\GridController.cs

The code generated by the newest Kendo UI Scaffolder :

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Menus_Create([DataSourceRequest]DataSourceRequest request, MenuClass menuClass)
{

ASP.NET MVC source EditingController.cs

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Editing_Create([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products)
{

*Grid / Batch editing
http://demos.telerik.com/aspnet-mvc/grid/editing

The problems of code generated by newest Kendo UI Scaffolder :

.[Bind] expression lacked, any changes action should marks with [Bind], Right?
.The type of parameter Model not is IEnumerable<T>, Grid can create more than one record at a time, Right?

The generated code of Update/Destroy have the same problems as above.

---------------------------------------------

And I met another error while save changes using code generated by the newest Kendo UI Scaffolder:

Unhandled exception at line 9, column 30392 in http://localhost:43223/Scripts/kendo/2015.3.930/kendo.all.min.js

0x800a03ec - JavaScript Runtime error: ';' required

function(e,t){var n=e+t;return Le[n]=Le[n]||Function("d","return "+ve.expr(e,t))},setter:function(e){return He[e]=He[e]||Function("d,value",ve.expr(e)+"=value")},accessor:function(e){...

kendo.all.min.js have BUGS ???
===========================================================
*Error are marks from ＂return He[e]=＂ to ＂"=value")＂.

Visual Studio 2015 Enterprise
Telerik DevCraft 2015 Q2

Best regards

Chris

Grid

answered on 24 Nov 2015

2 answers

908 views

Attemping to retain grid options with setOptions() not working

I am attempting to use setOptions() on a grid to save changes a user makes to a grid (page size, page, filter, sort, etc.) then restore those changes when the user comes back to the page. I see numerous examples of this working in forum threads but I cannot get the examples working so I must be doing something wrong. The saving of the grid options seems to be working fine but when I return to the page I'm getting "undefined" when I try to get a reference to my grid (see attached image). Any help would be appreciated as I have spent a good day on this and cannot get it working.

Other threads where I see setOptions being used successfully.

http://www.telerik.com/forums/retaining-page-size

http://www.telerik.com/forums/persist-state-issues

http://www.telerik.com/forums/excel-export-settings-don't-work-after-setoptions()

My Javascript

var localStorageKey = "MainTransferInOptions";

var areOptionsLoaded = false;

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

loadGridOptions(undefined);

});

function bindSaveRestoreCliks() {

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

e.preventDefault();

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

var dataSource = grid.dataSource;

var state = {

page: dataSource.page(),

pageSize: dataSource.pageSize(),

sort: dataSource.sort(),

filter: dataSource.filter()

};

localStorage[localStorageKey] = kendo.stringify(state);

});

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

e.preventDefault();

loadGridOptions(e);

});

}

function loadGridOptions(e) {

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

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

var state = localStorage[localStorageKey];

if (state) {

var data = JSON.parse(state);

var options = grid.options;

options.dataSource.page = data.page;

options.dataSource.pageSize = data.pageSize;

options.dataSource.sort = data.sort;

options.dataSource.filter = data.filter;

grid.destroy();

$("#MainGrid").empty().kendoGrid(options);

}

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

//grid.dataSource.read();

}

bindSaveRestoreCliks();

areOptionsLoaded = true;

}

</script>

My Controller

public class HomeController : Controller

{

private readonly IDbConnection _db = new SqlConnection(ConfigurationManager.ConnectionStrings["Reporting"].ConnectionString);

public ActionResult Index()

{

ViewBag.Message = "Welcome to ASP.NET MVC!";

var data = GetData();

return View(data);

}

public ActionResult About()

{

ViewBag.Message = "Your app description page.";

return View();

}

public ActionResult Contact()

{

ViewBag.Message = "Your contact page.";

return View();

}

public ActionResult GridRead([DataSourceRequest]DataSourceRequest request)

{

var data = GetData();

var serializer = new JavaScriptSerializer();

var result = new ContentResult();

serializer.MaxJsonLength = Int32.MaxValue;

result.Content = serializer.Serialize(data);

result.ContentType = "application/json";

return result;

}

private IEnumerable<EngineFamily> GetData()

{

return _db.Query<EngineFamily>("dbo.uspGetEngineFamilyInformation", commandType: CommandType.StoredProcedure);

}

My Grid

<a href="#" class="k-button" id="save">Save Grid Options</a>

<a href="#" class="k-button" id="load">Load Grid Options</a>

<a href="#" class="k-button" id="reset">Clear Saved Grid Options</a>

@{ Html.Kendo().Grid(Model)

.Name("MainGrid")

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

.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("GridRead", "Home"))

.ServerOperation(false)

)

//.AutoBind(false)

.Columns(columns =>

{

columns.Bound(e => e.EngineFamilyNumber)

.Width(200)

.HtmlAttributes(new {style = "text-align:left"})

.Title("Engine Family Number")

.Filterable(filter => filter.Extra(false));

columns.Bound(e => e.Authority)

.Width(100)

.HtmlAttributes(new {style = "text-align:left"})

.Title("Authority")

.Filterable(filter => filter.Extra(false));

columns.Bound(e => e.ValidFrom)

.Width(100)

.HtmlAttributes(new {style = "text-align:left"})

.Title("Valid From")

.Filterable(filter => filter.Extra(false));

columns.Bound(e => e.ValidTo)

.Width(100)

.HtmlAttributes(new {style = "text-align:left"})

.Title("Valid To")

.Filterable(filter => filter.Extra(false));

})

.Render();

}

Grid

answered on 23 Nov 2015

1 answer

246 views

[Solved] How to add TreeList into template of Grid?

Hi Telerik,

I was trying add TreeList in Grid with ClientDetailTemplate but It's not running, I afraid Grid is not support ClientDetailTemplate with TreeList,
Can you please give me a demo about this issue?
Thanks alot

TreeList

answered on 23 Nov 2015

5 answers

295 views

removing an item from doesn't remove from list

Anyone know why when I remove an item from my datasource it removes it from my database, but not my Mobile List View? Below is basically what I'm doing:

model = dataSource.getByUid($(e.touch.target).attr("data-uid"));
dataSource.remove(model);
dataSource.sync();

I got this from the mobilelistview sample app and it works correctly, just not with my modified mobile list view. Could it be because of a filter I have or my type of model or something? Here is the Mobile list view control section:

Html.Kendo().MobileListView<eAgentWeb.Models.CallLogModel>()
.Name("MainListView")
.TemplateId("itemTemplate")
.PullToRefresh(true)
.EndlessScroll(true)
.DataSource(dataSource => dataSource
.Sort(sort => sort.Add("DateModified").Descending())
.Filter(filters => { filters.Add(calllog => calllog.IsArchive).IsEqualTo(false); })
.Read(read => read.Action("GetCallLogData", "CallLog"))
.Destroy("callLog_Destroy", "CallLog")
.PageSize(30)
.Events(events => events.RequestEnd("listViewRequestEnd"))
.Model(model => model.Id(c => c.CallLogID))
)
)
)

Any help would be greatly appreciated!

ListView (Mobile)

answered on 23 Nov 2015

6 answers

359 views

ComboBox saves text instead of value

I created a ComboBox with a data source of one item (KeyValuePair<string, string>) and set the Value to that one item's value. If I post the page without typing or changing the ComboBox, then the values sent to the server via FormCollection are the Text of the ComboBox, not the Value.

ComboBox

answered on 20 Nov 2015

1 answer

463 views

[Solved] Need an older Older Version...

I'm am about to inherit a project developed with Kendo UI for ASP.NET MVC version 2015.1.408.

The older versions that I can download are:

2015.3.1111

2015.3.930

2015.2.624

I there any way that I can get to version 2015.1.408?

A similar question in the WinForms forum (http://www.telerik.com/forums/unable-to-get-an-older-version-of-the-controls) mentions backdating the license.

General Discussions

answered on 20 Nov 2015

3 answers

377 views

Chart Display Issues

I have a column chart, defined in MVC as below:-

@(Html.Kendo().Chart<Dashboard.Models.BarChartDataItem>(Model)

.Name((string)ViewBag.ChartName)

.Title((string)ViewBag.ChartTitle)

.Theme("bootstrap")

.Legend(legend => legend

.Position(ChartLegendPosition.Top)

.Visible(false)

)

.Series(series =>

{

series.Column(model => model.BarValue).Name("Actual").Tooltip(t=>t.Visible(true).Template("<div><p>Category:#=dataItem.AxisDescription#</p><p>Contribution: £#=dataItem.DisplayBarValue#</p></div>"));

})

.ChartArea(area => area

.Height(350)

.Background("transparent")

)

.ValueAxis(axis => axis.Numeric()

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

.Title((string)ViewBag.Yaxis)

.AxisCrossingValue(0, int.MinValue)

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

)

.CategoryAxis(axis => axis

.Labels(false))

.CategoryAxis(axis => axis

.Categories(model => model.AxisValue)

.Labels(labels => labels.Rotation(-45).Padding(5))

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

.Title((string)ViewBag.Xaxis)

)

.Events(e=>e.SeriesClick("seriesClick"))

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0:N2}")

)

I then use the SeriesClick event, to implement a data drill-down, which refreshes with the chart with new data (based on the level of drill-down and the value of the clicked column), based on an Ajax call, which gets new JSON data.

function PODDrillDown(pod,conscode,specialtycode,directorateCode, period)

{

var directorate = directorateCode;

selectedDirectorate = directorateCode;

selectedspec = specialtycode;

selectedcons = conscode;

selectedPOD = pod;

var chartData;

$.ajax({

type: "POST",

async: true,

contentType: "application/json;charset=utf-8",

url: "@Url.Content("~/ChartMaker/GetHRGChapterBarChartData")",

data: '{"id":2,"periodID":' + period + ',"DirectorateCode":"' + directorate + '","SpecCode":"' + specialtycode + '","ConsCode":"' + conscode + '","POD":"' + pod + '" }',

dataType: "json",

success: function (data) {

if (data.Success == true) {

chartData = data.chartData;

var dataSource = new kendo.data.DataSource({

data: chartData

});

var chart = $("#Chart_ID_1").data("kendoChart");

chart.dataSource = dataSource;

chart.options.title.text = data.ChartTitle;

chart.options.valueAxis.title.text = data.YAxisTitle;

chart.options.categoryAxis[1].title.text = data.XAxisTitle;

chart.dataSource.read();

chart.refresh();

}

else {

alert(data.Error);

}

},

error: function () {

alert("An error has occurred");

}

});

}

This works well, however with one particular drill-down , the chart doesn't render properly. The series labels are shown, the value axis seems scaled correctly, but the columns aren't rendered (I've attached an image of the chart). I can't see any issues with the data, all the data calls return data in the same structure, and no errors are thrown.

The Ajax call returns the data below :-

{"ChartTitle":"Performance for Consultant 4835","XAxisTitle":"Point of Delivery","YAxisTitle":"Contribution (£)","Success":true,"Message":"Data retrieved","Error":null,"chartData":[{"BarValue":-2476080.767381317,"AxisValue":"Other","AxisCode":"OTHER","ExtraValue":4,"AxisDescription":"Other","DisplayBarValue":"-2,476,081"},{"BarValue":-2476080.7673813165,"AxisValue":"Block","AxisCode":"BLOCK","ExtraValue":4,"AxisDescription":"Block","DisplayBarValue":"-2,476,081"}]}

Is this a bug in the chart, or is it something in the code?

Thanks

Chart

answered on 20 Nov 2015