Questions on UI for ASP.NET MVC Forum

3 answers

2.6K+ views

Show Progress Spinner During Load / Refresh?

Hi,

I am using the kendo ui ASP.NET MVC Razor helper. Everything works great, except the progress spinner doesn't show during the initial grid load or during a refresh. This leads to a pretty poor user experience if it takes a few seconds for data to load.

Can I force the progress spinner to display during initial load / refresh somehow to provide a better user experience?

Here is how I have things setup:

@(Html.Kendo().Grid<Models.IndividualModel>()

.Name("IndividualsGrid")

.Columns(columns =>

{

columns.Bound(c => c.Id)

.ClientTemplate("<a href='/viewMember.aspx?MemberID=#=Id#'>View</a>")

.Width(45)

.Filterable(false)

.Groupable(false)

.Sortable(false)

.Title("");

columns.Bound(c => c.Id)

.ClientTemplate("<a href='/editMember.aspx?MemberID=#=Id#'>Edit</a>")

.Width(40)

.Filterable(false)

.Groupable(false)

.Sortable(false)

.Title("");

columns.Bound(c => c.FirstName);

columns.Bound(c => c.LastName);

columns.Bound(c => c.StreetAddress);

columns.Bound(c => c.City);

columns.Bound(c => c.Phone);

})

.Sortable()

.Scrollable()

.Filterable()

.Groupable()

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

.ClientDetailTemplateId("HouseholdDetailTemplate")

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("IndividualSearchResults_AjaxBinding", "Church")

.Data("GetIndividualsSearchParameters"))

)

function GetIndividualsSearchParameters() {

var memberTypeFilters = $("#ddlMemberTypes").multiselect("getChecked").map(function () {

return this.value;

}).get();

var ageCategoryFilters = $("#ddlAgeCategories").multiselect("getChecked").map(function () {

return this.value;

}).get();

var genderFilters = $("#ddlGenders").multiselect("getChecked").map(function () {

return this.value;

}).get();

var nameToSearch = $('#txtbxSearchByName').val();

return {

nameToSearch: nameToSearch,

memberTypes: memberTypeFilters,

ageCategories: ageCategoryFilters,

genders: genderFilters

};

}

function BindGrid() {

grid = $("#IndividualsGrid").data("kendoGrid");

grid.dataSource.read();

grid.refresh();

Grid

answered on 26 Oct 2012

0 answers

119 views

input box size issue

if you look at the attached image i have a problem with the size of the input boxes compared to the grid. they are soo big they cause stuff not to fit on the page. How can i change thier size?

Grid

asked on 26 Oct 2012

1 answer

143 views

add row

is there a way to add a row?

Grid

answered on 26 Oct 2012

1 answer

91 views

Asp.net mvc grid without data.

I was wondering if it was possible to have a grid that was empty that i could add multiple records on and then save those to the correct database table but not display what is already saved. I essentially want to be able to do a bulk add.

thanks.

Grid

answered on 26 Oct 2012

2 answers

189 views

inCell editing Grid, perform read(), after Save Changes

How to perform read action in inCell editing grid after Save Changes button is pressed. After data is saved to database I would like to perform Read action.

Is that possible & how? Where do I put the code?

I have the newest version of Kendo UI, note that I use helpers (MVC wrappers).

Grid

answered on 26 Oct 2012

1 answer

510 views

Command column visibility

Hi

I have a requirement where a command column (delete) needs to be visible for a row only if a column value in the row meets certain criteria.
.Columns(columns =>
{
columns.Bound(o => o.PitID).Visible(false);
columns.Bound(o => o.VersionID).Width(50);
columns.Bound(o => o.VersionNote);
columns.Bound(o => o.ReleasedBy);
columns.Bound(o => o.ReleasedDateDisplay);
columns.Bound(o => o.Deletable).Visible(false);
columns.Command(command => command.Custom("Select").Click("showIssue")).Width(100).Title("Select");
columns.Command(command => command.Custom("Delete").Click("Delete")).Width(100).Title("Delete");
}).

The delete command needs to visible only if Deleteable is true.

thanks

Grid

answered on 26 Oct 2012

1 answer

105 views

Edit event only fires once?

I have a problem where I need to have the foreign key dropdowns disabled while editing. I have used the default Event for edit but it only seem to fire once.

.Events(e => e.Edit("edit"));

Like this.

function edit(args) {
var insertMode = args.model.isNew();
if (insertMode == false) {

var dropdownlist = $("#KeyFigureId").data("kendoDropDownList");
dropdownlist.enable(false);

var dropdownlisttwo = $("#DimensionOneId").data("kendoDropDownList");
dropdownlisttwo.enable(false);

var dropdownlist3 = $("#DimensionTwoId").data("kendoDropDownList");
dropdownlist3.enable(false);

var dropdownlist4 = $("#DimensionThreeId").data("kendoDropDownList");
dropdownlist4.enable(false);

}
}

Any chance we could get a separate template for Insert and Edit in the future? (also asked in the webinar).

Grid

answered on 26 Oct 2012

1 answer

490 views

Decimal digit problem?

I want to display a decimal number with 2 decimals. The value is 1.3 but the numeric textbox is showing 130.00. By setting a swedish culture I would expect it to show 1,30 but even if I set en-US as culture or no culture at all it shows 130.00. If I change it to a regular Html.TextBoxFor I get 1,3.

@Html.Kendo().NumericTextBoxFor(model => model.Zone.CostFactor).Format("n2").Culture("sv-SE").Decimals(2)

/Ola.

NumericTextBox

answered on 25 Oct 2012

4 answers

266 views

Creating a Kendo UI mvc project

Ive just created my first kendo mvc project. The standard template doesnt create any login functionality, why is this ? If I create a standard MVC4 project from the VS template I get all the login functionality (login, create, register, etc)

I dont want to have to build all this from scratch, how Can this be done with the kendo project template ?

General Discussions

answered on 25 Oct 2012

0 answers

115 views

select a particular item of dropdownlist and populate the item data in textboxes/Html Controls

Hi,

I need a small sample for the scenario below and I am not knowing how to do this.

I got a kendo dropdownlist and some textboxes in a webform. For example the dropdownlist is the products dropdown, I need to select a particular product and pass the productId as input to get some other information regarding that product (from the database or datacontext or webservice or whatever) and fill in the textboxes.

For example
Product contains information like Barcode, quantity, cost etc., for the product selected from the dropdown fill the barcode, quantity, cost textboxes (all in the same form)

Please provide me a sample that explains the scenario above and I am not getting any code sample from internet regarding the scenario. I need your help and it's very urgent.

I have choosen kendo controls to do my project and now I am stuck with this not understanding what to do. Please help.

Regards,
Rajesh

DropDownList

asked on 25 Oct 2012