Questions on UI for ASP.NET MVC Forum

2 answers

163 views

Hello.

I'm doing a dropdownlist with the MVC helper like this, but the option with empty text is not showing, a red line is showing instead.

How can I show the empty option so that users can select, yes, no, or empty ( show all ) without having to set a text or value for that option?

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

.Items(items =>

{

items.Add().Text("").Value("");

items.Add().Text("Yes").Value("true");

items.Add().Text("No").Value("false");

}

)

Thanks in advance.

DropDownList

answered on 11 Jun 2013

1 answer

112 views

[Solved] Grid Row Custom Row Command Bind To an Function

I would like to bind a custom command from a kend grid (currently using mvvm) to function.

{ "command": { "text":"hello world", "click":"helloWorld" } }

On click the function does not get called. I get a query error instead, can you please advise.

Grid

answered on 10 Jun 2013

9 answers

194 views

Design rtl problem

Hi,
I have a problem with weird design of the menu... I've implemented it based on your demo (binding to hierarchicaldata)

please look at the attached picture.

thanks

Menu

answered on 10 Jun 2013

2 answers

149 views

Cannot cancel a Grid ColumnReorder.

I am sure I am missing something simple (again..)..
I have a grid that is reorderable, but I would like to prevent one column from being moved.
My event function is called but setting e.preventDefault() and returning false have no effect.

Here is my event function:

function onColumnReorderLeft(e) {

if (e.oldIndex == 2 || e.newIndex == 2) {

e.preventDefault();

return false;

}

Here is the grid declaration

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

.Name("VesselsInPortLeft")

.DataSource(dataSource => dataSource.Server()

.PageSize(200)

.Model(model => model.Id(d => d.veid))

)

.CellAction(cell =>

{

if (cell.Column.Title.Equals(""))

{

cell.HtmlAttributes["style"] = "background-color: lightgray";

}

else if (cell.Column.Title.Equals("Name"))

{

cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",

String.Format("#{0}", cell.DataItem.vesselnamebackcolor.Substring(2)), String.Format("#{0}", cell.DataItem.vesselnameforecolor.Substring(2)));

}

else if (cell.Column.Title.Equals("LOC"))

{

cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",

String.Format("#{0}", cell.DataItem.currentberthbackcolor.Substring(2)), String.Format("#{0}", cell.DataItem.currentberthforecolor.Substring(2)));

cell.HtmlAttributes["title"] = cell.DataItem.currentberthdesc;

}

else if (cell.Column.Title.Equals("Activity"))

{

cell.HtmlAttributes["style"] = String.Format("background-color: {0}; color: {1}",

String.Format("#{0}", cell.DataItem.currentactivitybackcolor.Substring(2)), String.Format("#{0}", cell.DataItem.currentactivityforecolor.Substring(2)));

cell.HtmlAttributes["title"] = cell.DataItem.currentactivitydesc;

}

else if (cell.Column.Title.Equals("Flag"))

{

cell.HtmlAttributes["title"] = cell.DataItem.FlagName;

}

)

.Columns(columns =>

{

columns.Bound(d => d.veid).Hidden().IncludeInMenu(false);

columns.Bound(d => d.vesselidused).Hidden().IncludeInMenu(false);

//columns.Bound(d => d.Selected).Title("").Width(25).IncludeInMenu(false).Sortable(false);

columns.Template(@<text></text>).Title("").Width(25).IncludeInMenu(false);

columns.Bound(d => d.vesselname).Title("Name");

columns.Bound(d => d.flagshortname).Title("Flag").Width(60);

columns.Bound(d => d.currentberthabbr).Title("LOC").Width(60);

columns.Bound(d => d.currentactivityabbr).Title("Activity").Width(80);

columns.Bound(d => d.agentname).Title("Agent");

})

.Sortable(sortable => sortable

.AllowUnsort(true)

.SortMode(GridSortMode.MultipleColumn))

.Scrollable(scr=>scr.Height(680)) //scr=>scr.Height(452) scr=>scr.Height("100%")

.Filterable()

.ColumnMenu()

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

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

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

.Events(events => events.Change("onChangeLeft").ColumnResize("onColumnResizeLeft").ColumnReorder("onColumnReorderLeft"))

)

Thanks for you help!

Grid

answered on 10 Jun 2013

4 answers

242 views

[Solved] Toolbar().Create() collides with Filterable()

Hi!

I've a inline editable Kendo Grid configured with a create button in the toolbar, paging is activated, the data are sorted and the datasource is an ajax datasource. This configuration generates multipe problems and I need a fix or a workaround for this, because I can't disable the sorting.

If I'm not on page 1 in the grid and I press the create button nothing happens. I can press the button multiple times and nothing happens. If I go back to the first page I have one empty data line for every pressed button in the grid. And it's not a javascript error.

Maybe it's possible to switch the page during pressing the create button but how?

If I've a sorting with no results in the grid and press the create button nothing happens too. After I clear the sorting I have one empty data entry for every pressed create button in the grid too.

I understand the technical reason and know about the workaround, but not the normal user. :-)

How I can handle the multipe button press?

Thank you for help!

Grid

answered on 10 Jun 2013

1 answer

215 views

How to make Splitter Collapses only to left

Hi,

I am using kendo splitter in an mvc application.

I have a small requirement here and unfortunately I cannot find a solution for that.

In splitter I have enabled collapse property to true and I can collapse the splitter now.

What I want is I don't want the splitter to collapse to right.

ie . splitter should collapse only to left.

Please help me.

Splitter

answered on 10 Jun 2013

1 answer

904 views

Binding contentEditable div

I have some divs in my page that have the contentEditable attribute. How can I update the viewmodel when the user changes the text of any of these editable divs.

For example:

<div data-bind="text: viewModel.Person.FirstName" contentEditable="true">John</div>

Assume a user edits the name and changes it to Jack. In an event handler, I need to set viewModel.Person.FirstName to "Jack" (the innerHtml of the element is now "Jack"), and I need to fire a change event on the viewmodel so that any other elements on the page that refer to viewModel.Person.FirstName are updated.

Seems I can't use this.bindinds["text"] because that is valid in the viewmodel itself, not in an event handler for the element.

I could parse the data-bind attribute and get the value of it's "text" binding, but that seems kind of silly.

This is probably simple, but being new to this stuff I'm kind of flummoxed.

Thanks for any help :o).

General Discussions

answered on 10 Jun 2013

9 answers

177 views

'Normal' scenario: populating a local grid with remote loaded data

Hi.
I'm evaluating your beautiful instrument, but I'm arriving at places where I need some help to understand how things can be done.
I have this (I think normal enough) scenario: I have to populate a form to submit to the server, and one of the fields is a list of, say, customers. They can be hundreds, and I don't want to handle context problems when paginating them, and I already saw that the grid can handle a whole bunch of local items paginating them without going to the server. Ok.
What I now need is to let the user populate this grid (locally) searching data on the server, for example with the substring inserted, the ID, etc.
I would like the user to add a new row, insert some text, and then trigger the search on the server, exactly how it happens using for example the autocomplete widget.
I saw I can intercept 'Save' event (I'm using ASP.NET MVC), and insert code like this, to create a new record:

$("#grid").data("kendoGrid")
.dataSource
.insert(0, {
ID: 123,
Name: "John Smith"
});

But I see that the record being inserted is still there, and moreover I don't know how to show a search box like in the AutoComplete...
Please, can you help?
Thanks in advance.
Andrea Bioli

Grid

answered on 10 Jun 2013

8 answers

337 views

Expand single node onClick

Hi support,

I am using Kendo TreeView and i am trying to make only single node is expanded at a time i.e only the clicked node gets expanded and other is collapsed, but couldn't do so, could you please help me with this. I am using Expand event in treeview and below is my code.

<script type="text/javascript">
var procesing = false;
function Expand (e) {
if (!procesing) {
procesing = true;
var tree = $('#TreeView').data('kendoTreeView')
closeSib($(e.node), tree)
procesing = false;
}
}
function closeSib($element, tree) {
var $siblings = $element.siblings();
tree.collapse($siblings);
if ($element.parent('li').length > 0) {
closeSib($element.parent('li'), tree);
}
}
</script>

TreeView

answered on 10 Jun 2013

1 answer

362 views

Kendo Grid – Batch Incell – Save changes with single trigger for create/update/destroy

Currently I am using Kendo Grid in MVC 4 razor, with Batch InCell mode.

Let say my grid got 10 records, I added 2 records, updated 3records, and deleted 1 record.

If I am using kendo default command save changes function, it will trigger controller for 3 times (create function(2 records), update
function(3 records), destroy function(1 record))

Currently our problem is that we don’t know how to handle
SQL Transaction if it is triggered differently.

Can it be triggered once with all the changes records / or all records (including deleted record)?

Or can I create a button out of the grid with function to post the grid datasource to controller (this datasource should include deleted record with flag “delete”, updated record with flag “updated”)?

Or is there any other method that I can achieve this?

Thanks

Grid

answered on 10 Jun 2013