Questions on UI for ASP.NET MVC Forum

3 answers

138 views

Cannot Select 0

I cannot select 0 in the example below. I could convert the data to a string type but that would not fit the underlying data. Does anybody have a fix for this issue?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [ 0, 1 ],
optionLabel: "Select"
});
</script>
</body>
</html>

DropDownList

answered on 10 Feb 2017

2 answers

253 views

[Solved] Updating my grid from DDL

public ActionResult AgentIndex([DataSourceRequest] DataSourceRequest request, string agencyNum)

{

using (var CB = new CentralBillingEntities())

{

var result = CB.GetAgentViewInfo(agencyNum).ToList();

return Json(result.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

When I set a breakpoint I actually see the value for my GetAgentViewInfo coming through. But, the grid just flashes and the data never comes back. What am I doing wrong?

Here's the rest of my code:

@model IEnumerable<CentralBilling.Models.CentralBillingEntities>

@{

ViewBag.Title = "View";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<div class="center">

<h3><u>Agent View</u></h3>

</div><br />

<div>

@(Html.Kendo().DropDownList()

.Name("ddlAgency")

.Events(e => e.Change("agencyChange"))

.BindTo(new List<SelectListItem>()

{

new SelectListItem() { Text = "" },

new SelectListItem() { Text = "250-Louisville", Value = "U00250" },

new SelectListItem() { Text = "590-OKC", Value = "U00590"},

}

))

</div>

<div>

@(Html.Kendo().Grid<CentralBilling.Models.GetAgentViewInfo_Result>()

.Name("gridAgent")

.DataSource(datasource => datasource

.Ajax()

.Read(read => read.Action("AgentIndex", "Agent")))

.Columns(columns =>

{

columns.Bound(o => o.Req).Width("130px").Title("Request Submission").Template(

@<text>

@Html.ActionLink("GetAgentDetail", "Agent", new { controller = "Agent", id = item.Full_Order_Number })

</text>

).ClientTemplate(@"<a href=/Agent/GetAgentDetail?id=#= Full_Order_Number #>#= Req #</a>");

columns.Bound(o => o.Master_OrderNum).Width("150px");

columns.Bound(o => o.Shipper).Width("175px");

columns.Bound(o => o.aom_shipment_type).Title("MoveType").Width("100px");

columns.Bound(o => o.AccountHeader).Width("150px");

columns.Bound(o => o.EarlyLoadDate).Format("{0:MM/dd/yyyy}").Width("135px");

columns.Bound(o => o.Date_Delv_Act).Format("{0:MM/dd/yyyy}").Width("135px");

columns.Bound(o => o.Book_Agent).Width("135px");

columns.Bound(o => o.Haul_Agent).Width("135px");

columns.Bound(o => o.Org_Agent).Width("135px");

columns.Bound(o => o.Dest_Agent).Width("135px");

})

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

.Resizable(resize => resize.Columns(true))

.Sortable()

.Scrollable()

.Filterable()

)

</div>

<script type="text/javascript" language="javascript">

function agencyChange() {

var ddlAgency = $("#ddlAgency").val();

alert("Drop down list value is: " + ddlAgency);

$.get('/Agent/AgentIndex', { agencyNum: ddlAgency }, function (data) {

onDataUpdated();

});

}

function onDataUpdated() {

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

grid.dataSource.read();

}

</script>

DropDownList

answered on 09 Feb 2017

25 answers

1.0K+ views

Latest online resources for Kendo UI for ASP.NET MVC

Using UTC time on both client and server sides.
This project shows how to keep a DateTime property in UTC format on both server and client sides when using a Grid with Ajax Binding and editing.

General Discussions

answered on 09 Feb 2017

1 answer

151 views

Bind Column to row order

I have a column ("Sequence") that will contain an integer. Is there some way to bind the column ("Sequence")'s value to the order?

I'd like to use the Sortable control with a Grid so that when they drag the row it will change the Sequence column's value to reflect the order.

How can I go about doing this?

Grid

answered on 09 Feb 2017

3 answers

178 views

jQuery Dialog popup - style to look lyke kendo grid popup?

Hi,

I am using kendo grids, and the default kendo popup works in most cases, but in some advanced cases I have to popup a modal window using jQuery dialog.

I do this like so:

<div id="popupEdit">
<div id="dataContainer">
</div>
</div>

$(function () {
$("#popupEdit").dialog({
autoOpen: false,
height: 470,
width: 650,
modal: true
});

$("#addItem")
.button()
.click(function () {
$("#popupEdit").dialog("open");
});
});

The jQuery popup doesn't look nearly as nice as the kendo grid popup window.
How can I style the jQuery dialog popup to look very similar to the kendo grid popup??
Has anybody done this before??

The dataContainer div gets loaded via ajax when something happens on the screen.
Unless there is a way to popup a kendo window that would make it look like the grid popup?

Regards.

General Discussions

answered on 09 Feb 2017

3 answers

772 views

Column editor template; textbox format option not working

Hello!

I have this editor template: @Html.Kendo().TextBoxFor(model => model).Format("{0:n3}")

When I use this editor template to create a form, the numbers get formatted according to the format string with three decimal digits.

But when I use the editor template for a grid column (in-cell / batch editing), the format option is ignored. Instead, numbers are shown exactly the way they are delivered from the server.

However, grid client templates work perfectly:
columnTest.Format("{0:n3}"); // or
columnTest.ClientTemplate("#: kendo.toString('columnTest', 'n3') #");

How can I configure the numeric formatting of the editor templates?

Best regards,

Kaan

Grid

answered on 08 Feb 2017

1 answer

374 views

ListView DataSource calling Create Action Multiple times

So we've read the docs; done all the appropriate searching; yet cannot keep the listview from repeating calls to the create service.

According to the docs the listview datasource expects the item that was added to be returned. Here is our server side controller method:

[HttpPost]

public ActionResult CreateMultiSelectItem([DataSourceRequest] DataSourceRequest request, long questionId, SurveyQuestionMultiSelectItem item)

{

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

{

var vm = new SurveyQuestionMultiSelectViewModel(_surveyQuestionService.GetById(questionId));

vm.SurveyQuestionDetails.Items.Add(item);

vm.UpdateRootSurveyQuestion(_surveyQuestionService);

}

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

}

as you can see we are returning the exact item being created.

The Datasource setup for the listview is as such:

<div class="demo-section k-content wide">

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

@(Html.Kendo().ListView<LMI.QMIMS.Business.SurveyQuestions.SurveyQuestionMultiSelectItem>()

.Name("listView")

.TagName("div")

.ClientTemplateId("template")

.DataSource(source=>source

.Model(model=>

{

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

model.Field(p => p.Id).DefaultValue(Guid.NewGuid());

}

)

.Create(create=>create.Action("CreateMultiSelectItem","SurveyQuestion", new { questionId = Model.SurveyQuestionId }))

.Read(read=>read.Action("ReadMultiSelectItem","SurveyQuestion",new { questionId = Model.SurveyQuestionId}))

.Update(update=>update.Action("UpdateMultiSelectItem", "SurveyQuestion", new { questionId = Model.SurveyQuestionId }))

.Destroy(destroy=>destroy.Action("DeleteMultiSelectItem", "SurveyQuestion",new { questionId = Model.SurveyQuestionId } ))

.Events(events=>events.Error("onDataSourceError"))

)

.Pageable()

.Editable()

)

</div>

So am I missing something totally obvious? I do this sort of behavior in the Grid control all day long without this issue.

-Scott Singleton

ListView

answered on 07 Feb 2017

2 answers

535 views

[Solved] Edit button height

I always have a heck of a time trying to find the right CSS style to override for things... Right now, I need to change the height of the Edit button in the grid... I hate all that extra spacing and want to make it slimmer so my rows in my grid look good, without all that additional padding... How can I do this?

Grid

answered on 07 Feb 2017

2 answers

154 views

[Solved] Hierarchy cell smaller with CSS

Hello,

I want to have the "k-hierarchy-cell" smaller then the Standard (see Pictures) - how to do this?

robert

Grid

answered on 07 Feb 2017

3 answers

147 views

Strange row/cell alignment

As you can see in the attached image, there's a weird issue where the "editable" part of the cell doesn't align with the part of a row or cell that's highlighted.

So clicking on a cell to edit the value requires that you click on the "upper" part of the cell, and is very confusing and unusable.

I have a pretty default configuration:

@Html.Kendo().Spreadsheet().Name("TestSpreadsheet")

Thoughts?

Thanks!

Spreadsheet

answered on 06 Feb 2017