Questions on UI for ASP.NET MVC Forum

6 answers

415 views

@(Html.Kendo().Grid<FileDataModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.FileName);
columns.Bound(c => c.Title);
columns.Bound(c => c.SelectedDocType);
columns.Template(@<text></text>).Title("<b>Download</b>")
.ClientTemplate("<a href='" + Url.Action("Download", "Home", new { @id = "#=Id#" }) + "'>Download</a>")
.HtmlAttributes(new { style = "text-align: left;" });
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Title("<b>Action</b>");
}).Events(e => e.DataBound("onDataBound"))
.Scrollable(a=>a.Height("auto"))
.Selectable()
.Groupable()
.Sortable()
.Editable(config => config.Mode(GridEditMode.PopUp))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='addFilePopup()' href='#' id='addNewFile'></span>Add new file</a>"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.CreatedDate).Editable(false);
model.Field(p => p.DateSigned).Editable(false);
model.Field(p => p.DateSubmitted).Editable(false);
model.Field(p => p.DjjNumber).Editable(false);
model.Field(p => p.ScanDate).Editable(false);
model.Field(p => p.ScanUser).Editable(false);
})
.Read(read => read.Action("GetFiles", "Home", new { djjNumber = Model.DjjNumber }))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(destroy => destroy.Action("EditingInline_Destroy", "Home"))
))

</div>

Kendo Autocomplete and Validation function.

$("#txtDocType").kendoAutoComplete({
dataSource: new kendo.data.DataSource({
type: "json", // specifies data protocol
pageSize: 3,//This is to set search limit
serverFiltering: true,
transport: {
read: '@Url.Action("GetDocumentTypes", "Home")',
parameterMap:function(){
return {filterKey:$("#txtDocType").data("kendoAutoComplete").value()};
}
},
}),
dataTextField:"Type",
filter: "contains",
minLength: 3,//This is to set minimum character length for autocomplete
});
});

function ValidateDocumentType(){
var isValidDocType=true;
$.ajax({
data:{documentType:$("#txtDocType").val()},
url:'@Url.Action("GetDocumentType", "Home")',
async: false,
success:function(data) {
if(data==false)
isValidDocType=false;
complete=true;
},
});
return isValidDocType;
}

Auto complete for Document type works as expected when i add new file (Tool bar add file).

How do I achieve the same auto complete and validation if user clicks edit/Update? I am using ScaffoldColumn to make the Doc type editable when user clicks Edit in Kendo Grid.

Grid

answered on 18 Oct 2016

1 answer

472 views

KeyPress event for ComboBox

I am trying to call a function each time a key is pressed in the textbox of the combobox to update another pulldown box.

Here is my razor code.

                                        @(Html.Kendo().ComboBoxFor(m => m.ToAccountID)
                                            .Name("ToAccountID")
                                            .DataTextField("Text")
                                            .DataValueField("Value")
                                            .HtmlAttributes(new { style = "width:100%;" })
                                            .BindTo(acctList)
                                            .Events(e =>
                                                {
                                                    e.Select("onToSelectChange");
                                                })
                                        )

I have tried this but get a javascript error.

// javascript

    $("#ToAccountID").data("kendoComboBox").input.keypress(function(){
        console.log("pressed");
    });

Error:

TypeError: $(...).data(...) is null
<anonymous>

Thanks.

ComboBox

answered on 18 Oct 2016

9 answers

863 views

Looking for some good grid stylings

I find the default Kendo Grid (MVC) is just plain ugly. Everything about it is monstrously huge, so much padding, the text is huge, it's just really ugly for a modern looking web application. Does anyone have any good tips or styles they'd care to share to make this thing look at least a little bit decent?

I tend to do this, which helps, but it's still pretty ugly (especially the filter row)

<style>

/* the default Kendo Grid has waaay too much row padding so this reduces it */

.k-grid-content tr td {

padding: 0;

font-size: small;

}

</style>

Grid

answered on 18 Oct 2016

1 answer

391 views

How to create MVC Grid with variable number of columns by referencing model IEnumerable property

Hi

I'm trying to create a grid with a variable number of columns using the MVC Grid component referencing the following (simplified) model:-

public class GridModel
{
     public int Id { get; set; }
     public string Name { get; set; }
     public List<int> Values { get; set; }
}

Using the AutoGenerate option of the column configuration only seems to create columns for the Id & Name model properties, but not the Values enumerable.

I can't find an obvious way to achieve this; could you provide some help please?

Thanks in Advance

Grid

answered on 18 Oct 2016

3 answers

319 views

[Solved] GridBuilder Change arrow icon to '+'

Hello. I have a standard Kendo Grid using GridBuilder. Currently, you expand a record with the arrow icon. Is it possible to switch this to a '+' sign?

Grid

answered on 18 Oct 2016

2 answers

129 views

Paste data into grid

Hello, I want to paste data into grid, please revise my code. Thanks.

@(Html.Kendo().Grid<ConfigurationModel>()
.Name("grid")
.Events(e => e.Edit("onGridEdit"))
.AutoBind(false)
.Columns(columns =>
{
columns.Bound(c => c.A);
columns.Bound(c => c.B);
columns.Bound(c => c.C);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar => { toolbar.Create(); toolbar.Excel(); })
.Editable(editable => editable.Mode(GridEditMode.InLine))
.HtmlAttributes(new { style = "height: 550px;" })
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(15))
.Excel(excel => excel
.FileName("Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
)
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("grid_error"))
.Model(model =>
{
model.Id(p => p.A);

})
.Create(create => create
.Action("Create", "Configuration"))
.Read(read => read
.Action("Read", "Configuration")
)
.Update(update => update
.Action("Update", "Configuration")
)
.Destroy(destroy => destroy
.Action("Destroy", "Configuration"))
.PageSize(10)
)

Grid

answered on 18 Oct 2016

5 answers

407 views

[Solved] Server side control paging through data MVC vs Kendo UI

I am fairly new to kendo UI and very new to MVC. We have an application written in kendo UI. I am concerned about the potential volume of data being transferred to the client side as datasets grow. I am thinking of making some of our current application MVC based if we can gain greater control over paging through grids.

1) With kendo UI is it the case that the page brings back the whole result set, and then paging through is managed locally client side within the page?

2) With MVC version of the grid is the data bound server side or is the whole dataset delivered to the browser and paging managed as per (1). Does this limit the amount the data transferred from server to client?

3) With MVC version is there any mechanism that allows the paging to occur within the SQL statement to restrict the size of the result turned from the database server?

Any pointers with this would be appreciated.

Grid

answered on 18 Oct 2016

3 answers

473 views

Cascading multiselect problem

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

184 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

366 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