Questions on UI for ASP.NET MVC Forum

3 answers

491 views

I am currently using the multi select for the first time and am encountering a problem with the scenario I am using.

I have the following cshtml page:

@{

ViewBag.Title = "Index";

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

}

<h2>Index</h2>

@using (Html.BeginForm())

{

@Html.AntiForgeryToken()

@(Html.Kendo().Grid<InclusionManagerMVC.Models.HouseModels.HouseModel>()

.Name("HouseGrid")

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

.ToolBar(toolbar =>

{

toolbar.Create();

})

.Columns(columns =>

{

columns.Bound(c => c.ID).Visible(false);

columns.Bound(c => c.Name).Title("House Name");

columns.Bound(c => c.TooltipText).Title("Description");

columns.Bound(c => c.Active).Title("Enabled");

columns.Command(c => c.Edit());

})

.Editable(edit =>

{

edit.TemplateName("HouseModel").Mode(GridEditMode.PopUp);

})

.DataSource(datasource =>

{

datasource.Ajax()

.Create(create => create.Action("Create_House", "Houses", new { area = "Administration" }).Data("sendAntiForgery"))

.Read(read => read.Action("Read_House", "Houses", new { area = "Administration" }))

.Update(update => update.Action("Update_House", "Houses", new { area = "Administration" }).Data("sendAntiForgery"))

.Model(model =>

{

model.Id(field => field.ID);

model.Field(field => field.ID).DefaultValue(Guid.NewGuid());

model.Field(field => field.Name);

model.Field(field => field.Active).DefaultValue(true);

model.Field(field => field.TooltipText).DefaultValue(string.Empty);

model.Field(field => field.SchoolsIdList).DefaultValue(new List<InclusionManagerMVC.Models.SchoolModels.SchoolsModel>());

model.Field(field => field.TenantIdList).DefaultValue(new List<InclusionManagerMVC.Models.TenantModels.TenantsModel>());

})

.Events(events => events.Error("error_handler"));

})

.Pageable(page => page.PageSizes(new int[] { 10, 20, 50, 100, 250, 1000 }).Refresh(true))

.Sortable()

.Groupable()

.Filterable()

.Scrollable()

.ColumnMenu()

)

}

<script type="text/javascript">

function tenantsfilter()

{

var multiSelect = $("#TenantIdList").data("kendoMultiSelect");

var values = multiSelect.value($("#value").val());

console.log(values.length);

return { tenants: values.toString() };

}

function refresh_multiSelect(e)

{

console.log(e);

$("#SchoolsIdList").data("kendoMultiSelect").dataSource.read();

}

</script>

I am then using this editor on the screen:

@model InclusionManagerMVC.Models.HouseModels.HouseModel

@Html.HiddenFor(m => m.ID)

<div class="form-horizontal" role="form" style="padding:10px;">

<div class="form-group">

@Html.LabelFor(m => m.Name, new { @class = "form-label col-lg-2" })

<div class="col-lg-6">

@Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "Enter name of the house" })

</div>

<div class="form-group">

@Html.LabelFor(m => m.TooltipText, new { @class = "form-label col-lg-2" })

<div class="col-lg-6">

@Html.TextAreaFor(m => m.TooltipText, new { @class = "form-control", placeholder = "Enter a description about this house" })

</div>

<div class="form-group">

@Html.LabelFor(m => m.Active, new { @class = "form-label col-lg-2" })

<div class="col-lg-6">

@Html.CheckBoxFor(m => m.Active)

</div>

<div class="form-group">

@Html.LabelFor(m => m.TenantIdList, new { @class = "form-label col-lg-2" })

<div class="col-lg-6">

@(

Html.Kendo().MultiSelectFor(m => m.TenantIdList)

.DataTextField("Name")

.DataValueField("ID")

.DataSource(datasource =>

{

datasource.Read(read => read.Action("GetTenants", "Houses", new { area = "Administration" }));

})

.Placeholder("Select School Groups")

.IgnoreCase(true)

.HighlightFirst(true)

)

</div>

<div class="form-group">

@Html.LabelFor(m => m.SchoolsIdList, new { @class = "form-label col-lg-2" })

<div class="col-lg-8">

@(

Html.Kendo().MultiSelectFor(m => m.SchoolsIdList)

.DataTextField("Name")

.DataValueField("ID")

.AutoBind(false)

.DataSource(datasource =>

{

datasource.Read(read => read.Action("GetSchools", "Houses", new { area = "Administration" })

.Data("tenantsfilter"))

.ServerFiltering(true)

.Events(events => events.Error("error_handler").Change("refresh_multiSelect"));

})

.Placeholder("Select Schools")

.IgnoreCase(true)

.HighlightFirst(true)

.ItemTemplate("<span class=\"label label-info\">#: data.Name#</span><span class=\"label label-default\">(#:data.TenantName#)</span> ")

)

</div>

@Html.Partial("_ErrorPanel")

</div>

This then calls the appropriate controller below:

public JsonResult Read_House([DataSourceRequest] DataSourceRequest request)

{

this.Response.Cache.SetCacheability(HttpCacheability.NoCache);

List<HouseModel> model = new List<HouseModel>();

try

{

model = houseSvc.GetHousesList();

}

catch (Exception error)

{

throw error;

}

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

}

public JsonResult GetTenants()

{

this.Response.Cache.SetCacheability(HttpCacheability.NoCache);

List<TenantsModel> model = tenantSvc.GetTenantsList(true);

return Json(model, JsonRequestBehavior.AllowGet);

}

public JsonResult GetSchools(string tenants)

{

this.Response.Cache.SetCacheability(HttpCacheability.NoCache);

List<string> tenantStringList = tenants.Split(',').ToList();

List<TenantsModel> tenants2 = tenantSvc.GetTenantsList(true, tenantStringList);

List<SchoolsModel> model = schoolSvc.GetSchoolsList(true, tenants2);

return Json(model, JsonRequestBehavior.AllowGet);

}

So when I go to my editor and select the first multiselect item I get the drop down option but when I select the second one the change event is constantly firing.

I know it is because of the datasource.read() action being performed which is causing this but how do I prevent this.

What I need to be able to do is select the values in the first multi-select (tenantsIdList) and then it rebind the options back to the SchoolsIdList with the found values.

In addition to this I need to be able to remove items from the (SchoolsIdList) if the corresponding (tenantsIdList) is removed.

For example in the tenants options we have

Tenant 1
Tenant 2
Tenant 3
.....

In the schools list we have

School 1 (which is associated with Tenant 1)
School 2 (which is associated with Tenant 2)
School 3 (which is associated with Tenant 3)
.......

So if I select "Tenant 1" in the first multi select I would only see "School 1" in the second multi select

if I then selected "Tenant 2" in the first multi select I would now see School 1 and School 2.

But then if I de-selected "Tenant 1" I would only want School 2 to be available in addition if School 1 had been selected as a value then this should be removed from the list of selected values.

Any assistance would be greatly received.

MultiSelect

answered on 18 Oct 2016

2 answers

190 views

[Solved] Dashboard Template doesn't work?

For the 2016.3.914 release, I tried using the Dashboard project template, since I have to start thinking of building a dashboard at work, but upon running it, I just get a bunch of 500 errors on all the CSS and JS files... Does this project template not work out of the box? What do I need to do to get it to work?

General Discussions

answered on 17 Oct 2016

2 answers

378 views

Pass Grid data back to controller

Hi,

Just a generic question: how to pass grid data back to controller. I tried to search a bit. Look like it needs to use ajax but I am not sure how it works exactly. Do you have a simple sample code? The link to some old sample code is not valid anymore.

Thanks

Tong

Grid

answered on 17 Oct 2016

1 answer

109 views

Custom week layout

I need to make a custom week layout for a Scheduler

see image

Scheduler

answered on 17 Oct 2016

7 answers

486 views

How to create a Grid State programmatically from server-side code?

Is there a way to build a GridState from server-side code?

We want to be able to set up the grid in a specific based on certain filters that are in a database. As far as I can tell the only way I could do that now is to look at how the structure of the JSON object is formed and create my own JSON object Grid State constructor based on that. But I don't like that idea because the structure could change with time, or there might be small things that I miss.

I'm looking for something along the lines of this:

GridState gs = new GridState();

gs.addFilter("columnName","filterText", columnWidth, showColumn, ..., .., )

Does anything like this exist?

Grid

answered on 17 Oct 2016

1 answer

273 views

Version 2011.3.1305.40

Hello,

We need to install version 2011.3.1305.40 What is the download link?

Thank you

Installer and VS Extensions

answered on 14 Oct 2016

2 answers

132 views

Grid Issues

I can't seem to figure out why my grid doesn't show data. Here's the Contoller code:

public JsonResult PopulateGrid()
{
var x = (from n in dbContext1.GetOrders("Melody Devoe") select n);
List<string> items = new List<string>();
foreach (var item in x)
{
items.Add(item.ToString());
}

return Json(items.ToList(), JsonRequestBehavior.AllowGet);

}

Here's the cshtml:

<div class="a">
@(Html.Kendo().Grid<CentralBilling.Models.GetOrders_Result>()
.Name("gridRater")
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("PopulateGrid", "Home")))
.Columns(columns =>
{
columns.Bound(o => o.Order_Number);
//columns.Bound(o => o.ActDate);
//columns.Bound(o => o.Agent_Role);
//columns.Bound(o => o.aom_shipment_type);
//columns.Bound(o => o.Delay);
//columns.Bound(o => o.DeadlineDist);
//columns.Bound(o => o.DistStatus);
//columns.Bound(o => o.SubmitDate);
//columns.Bound(o => o.LastAct);
//columns.Bound(o => o.LastComment);
})
.Sortable()
.Scrollable()
.Filterable()
.Selectable()
)
</div>

I'm using a stored procedure pulled in through the Model. At first I had trouble with the proc parameter so I hardcoded one and still no luck. This is driving me crazy! Thanks in advance

Grid

answered on 14 Oct 2016

1 answer

244 views

[Solved] Extension Method

Ive written some extension methods for various UI components for example here is one for the TextBox

public static TextBoxBuilder<T> Width<T>(this TextBoxBuilder<T> builder, int width)
{
return builder.HtmlAttributes(new { @style = "width:" + width.ToString() + "px" });
}

However I cant get the syntax correct for the NumericTextBoxBuilder

public static NumericTextBoxBuilder<T> Width<T>(this NumericTextBoxBuilder<T> builder, int width)
{
return builder.HtmlAttributes(new { @style = "width:" + width.ToString() + "px" });
}

I get a message The type 'T' must be a non-nullable value type in order to use it as parameter 'T' in the generic type or method 'NumericTextBoxBuilder<T>'

I could find an example working on google, can anyone assist

NumericTextBox

answered on 14 Oct 2016

3 answers

430 views

Decimal separator problems

In my spreadsheet decimal separator in number cells is dot instead of comma (with the latter being proper to my culture). I set kendo.culture before loading spreadsheet widget and while debugging the current culture setting values seems OK, but they are not applied to spreadsheet.

I have set "#,##0.00" format to my number cells to display numbers properly and it works fine with a few exceptions:

- when writing a formula numbers must have dot separator

- loading data from external spreadsheet file in widget shows numbers with dot separator

Are there ways to get this done that I'm not aware of or this is just not supported, and if so are there plans to improve it in next versions?

Spreadsheet

answered on 13 Oct 2016

1 answer

157 views

Line chart problem

I have line chart that works well... except when in one serie there is just one value. Then I get wrong values all over... When I add a dummy record it works.

Do I do something wrong or is this a feature or bug?

@(Html.Kendo().Chart<SignalRDoc.ViewModels.HistoryTot>()

.Name("linechartteam")

.Theme("Material")

.Title("Utfall i procent per månad (Team och konsult)")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom))

.DataSource(ds => ds.Read(read => read.Action("LineChartTeam", "Statistik"))

.Group(group => group.Add(model => model.Fnamn))

.Sort(sort => sort.Add(model => model.Period).Ascending())

)

.Series(series =>

{

series.Line(model => model.Procent, categoryExpression: model => model.Period).Name("#= group.value #");

})

.CategoryAxis(axis => axis

.Categories(model => model.Period)

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

.Labels(labels => labels.Format("MMM"))

)

.ValueAxis(axis => axis.Numeric()

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

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

)

.Tooltip(tooltip => tooltip.Visible(true).Shared(true).Format("{0:p1}")

)

</div>

And the Controller


public ActionResult LineChartTeam(int? year, string team)
       {
 
           if (year == null)
           {
               DateTime dt = DateTime.Today;
               year = dt.Year;
 
           }
           var data = (from p in db.History
                       where p.Period.Year == year
                       where p.Team == team
                       
                       group p by new
                       { p.Fnamn, p.Period }
                      into areaGroup
 
                       
                       select new HistoryTot()
                       {
                            
                           Fnamn = areaGroup.Key.Fnamn,
                           
                           Antal = areaGroup.Sum(p => p.Antal),
                           Budget = areaGroup.Sum(p => p.Budget),
                            
                           Period = areaGroup.Key.Period
                            
 
                       }).ToList();
           return Json(data);
           
       }

Chart

answered on 13 Oct 2016