Questions on UI for ASP.NET MVC Forum

5 answers

272 views

MultiSelect into detailTemplate : Selected values

Hi !

I want to preselect my MultiSelect with values of my ViewModelRole.Functionalities

@(Html.Kendo().Grid<GCM.ViewModel.ViewModelRole>()

.Name("GridRoles")

.Columns(columns =>

{

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

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);

})

.ToolBar(toolbar => {

toolbar.Create();

})

.Editable(editable => editable.Mode(GridEditMode.InLine))

.ClientDetailTemplateId("functionalityPanel")

.DataSource(dataSource => dataSource

.Ajax()

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

.Read(read => read.Action("Roles_Read", "Role"))

.Create(create => create.Action("Roles_Create", "Role"))

.Update(update => update.Action("Roles_Update", "Role"))

.Destroy(destroy => destroy.Action("Roles_Destroy", "Role"))

)

<script type="text/javascript">

function Save(e)

{

var roleId = e.event.target.dataset.roleId;

/*

AJAX Call to update Role.Functionalities

*/

}

</script>

<script id="functionalityPanel" type="text/x-kendo-template">

@(Html.Kendo().MultiSelect()

.Name("Fonctionnalities_#=Id#")

.Placeholder("Choisissez les fonctionnalitées")

.AutoClose(false)

.DataValueField("Id")

.DataTextField("Code")

.Value(new List<int> { 1, 2 })

.BindTo(ViewBag.functionalities)

.ToClientTemplate()

)

<br/>

@(Html.Kendo().Button()

.Name("Save_#=Id#")

.Content("Save")

.HtmlAttributes(new { data_role_id="#=Id#" })

.ToClientTemplate())

</script>

and my controller

public class RoleController : Controller

{

private SolutecNetContext db = new SolutecNetContext();

public ActionResult Index()

{

ViewBag.functionalities = db.Functionalities.ToList();

return View();

}

public ActionResult Roles_Read([DataSourceRequest]DataSourceRequest request)

{

IQueryable<Role> roles = db.Roles;

DataSourceResult result = roles.ToDataSourceResult(request, role => new ViewModelRole{

Id = role.Id,

Designation = role.Designation,

FunctionalitiesIds = GetFunctionalitiesIds(role.Functionalities)

});

return Json(result);

}

private List<int> GetFunctionalitiesIds(ICollection<Functionality> functionalities)

{

List<int> functionalitiesIds = new List<int>();

foreach(Functionality f in functionalities)

{

functionalitiesIds.Add(f.Id);

}

return functionalitiesIds;

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Roles_Create([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)

{

if (ModelState.IsValid)

{

var entity = new Role

{

Designation = viewModelRole.Designation

};

db.Roles.Add(entity);

db.SaveChanges();

viewModelRole.Id = entity.Id;

}

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

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Roles_Update([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)

{

if (ModelState.IsValid)

{

var entity = new Role

{

Id = viewModelRole.Id,

Designation = viewModelRole.Designation

};

db.Roles.Attach(entity);

db.Entry(entity).State = EntityState.Modified;

db.SaveChanges();

}

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

}

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Roles_Destroy([DataSourceRequest]DataSourceRequest request, ViewModelRole viewModelRole)

{

if (ModelState.IsValid)

{

var entity = new Role

{

Id = viewModelRole.Id,

Designation = viewModelRole.Designation

};

db.Roles.Attach(entity);

db.Roles.Remove(entity);

db.SaveChanges();

}

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

}

protected override void Dispose(bool disposing)

{

db.Dispose();

base.Dispose(disposing);

}

and I want to do something like

.Value("#=Functionalities#")

Is it possible ? Did I miss something ?

Thank for your help !

MultiSelect

answered on 18 Apr 2016

1 answer

235 views

[Solved] Non-iframe window with partial view content

Hello,

I've been trying to implement the following (I believe quite common) scenario:

I have a page with a Grid in it and an Window, declared like this:

@(Html.Kendo().Window()

.Name("detailsWindow")

.Title(Localizer["Manage an Object"])

.Content(Localizer["Loading..."])

.AutoFocus(true)

.Iframe(false)

.Draggable()

.Events(ev => ev.Close("detailsWindow_close"))

.Resizable()

.Visible(false)

.Deferred()

)

When the user double-clicks, the Window is refreshed with an URL of a partial view, the Window is centered and shown like this:

var detailsWindow = $('#detailsWindow').data('kendoWindow');

kendoWindow.refresh(url).center().open();

The problem is that nothing seems to work in the contents of the Window:

Kendo UI Date Time Pickers are not styled;
The culture is not applied.

Obviously Kendo UI Javascripts are not applied to the new DOM elements in the Window.

My question is: Can I refresh Kendo UI somehow (preferably to the DOM elements in the Window only)?

Note: I have intentionally disabled iframes, because:

I want to reduce markup going down the wire
I use AJAX forms in the Window
I reuse the actions and emit a regular view or a partial view depending on the request type.

Window

answered on 18 Apr 2016

2 answers

1.4K+ views

Setting value() after (re)read selects a value not in list

I've got a drop down list declared as follows

@(Html.Kendo().DropDownList()

.Name("CodeDropDown")

.OptionLabel(" ")

.DataValueField("Code")

.DataTextField("DisplayDescription")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("_CodeDropDown", "Gainful")

.Data("CodeDropDownData");

})

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

.ServerFiltering(true);

})

.AutoBind(true)

.Animation(false)

.HtmlAttributes(new { style = "width: 512px; font-size: 12px;" })

.Events(events => events.Change("onCodeDropDownChange"))

)

I then also have a checkbox which when toggled, causes a reread via this function:

function loadCodeDropdownList() {

var codeList = $("#CodeDropDown").data("kendoDropDownList");

codeList.dataSource.read(CodeDropDownData());

}

This works great; the items in the dropdown change and everything is fine. I have seen some examples where a refresh() is invoked on the DDL after the read, but that didn't seem to be necessary for me.

So what's the problem? Some of the items in the lists overlap so if an item is currently selected which isn't in the newly read data, I'm trying to clear it. My naive approach was to get the value, read the new data, set the value again and if the selectedIndex isn't then set, set the value to null, as in

function loadCodeDropdownList() {

var codeList = $("#CodeDropDown").data("kendoDropDownList");

var code = codeList.value();

var oldSel = codeList.selectedIndex;

codeList.dataSource.read(CodeDropDownData());

codeList.refresh(); // doesn't seem to matter if this is here

codeList.value(code);

if (codeList.selectedIndex == 0) {

// selectedIndex is always the same as it was before the read

codeList.value(null);

}

However, this doesn't work. The value always gets set, even if it's not in the newly read items and the selectedIndex goes back to what it was.

I've also tried setting the value to null before the read, and that doesn't seem to help; true, the value becomes null and the selectedIndex is zero, but then setting the value still results in it getting set to a value not in the list and the selectedIndex goes back to what it was, even though it may be greater than the number of items that were just read.

What I have noticed, though, is that setting a breakpoint on the line where I set the value after the read makes it work. When the breakpoint is hit, the value is no longer displayed in the drop down list, and the rest works as expected. But if I just let it run, it doesn't work.

So am I running into some kind of timing issue? I've tried binding to the dataBound event and doing the setting there, but it works just the same.

DropDownList

answered on 15 Apr 2016

1 answer

198 views

'TypeError: this is undefined' error while calling the controller through ajax

Hi,

I am uploading an excel file that has some formulas in them to the kendo spreadsheet. The sheet seems to be loading in the Spreadsheet fine, but when I try to send the retrieved values from the kendo spreadsheet, there seems to be an exception - 'TypeError: this is undefined'

function fetchDataForKidsGridModel(ExcelVals) {

debugger;

var cellValues, range, ArrOfCellValue = [], CellValueArr,

startPoint = 17,

mandotoryColumn = "E";

var outletArr = [];

var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

var sheet = spreadsheet.activeSheet();

var endPoint = getSheetLength(sheet, startPoint, mandotoryColumn

for (var l = 0; l < endPoint ; l++) {

var StartColumn_CI = 85;

CellValueArr = [];

var arrOfOutlets = [];

for (var i = 0; i < ExcelVals.length ; i++) {

var rowCellNo = ExcelVals[i].ColumnVal.replace("#", startPoint).trim();

range = sheet.range(rowCellNo)

cellValues = range.values();

if (cellValues[0][0] == null) {

cellValues[0][0] = "";

}

CellValueArr[i] = cellValues;

}

ArrOfCellValue[l] = CellValueArr;

startPoint++;

}

//ERROR is thrown at this point while debugging

$.ajax({

url: '/UploadPO/CreateModelForGridEcomm',

type: 'POST',

async: true,

dataType: 'json',

data: { cellValues: ArrOfCellValue, BrandID: brandName }, //

success:

function (result) {

console.log(result);

// you code comes here

GetGrid(result)

},

error:

function (result) {

//Error Handling

if (result.success = true) {

alert(result.responseText);

}

if (result.success = false) {

alert(result.responseText);

}

});

}

Any help would be much appreciated.

Feel free to ask any questions to further clarify my question..

Thanks in advance...

Spreadsheet

answered on 15 Apr 2016

1 answer

8.4K+ views

How to clear Kendo grid rows without invoking databound method?

I have a grid with databound method which shows the message 'No Data Found for the search' in case no data gets retrieved after performing search. Now i have added a radio buttons which when clicked needs to clear the old data from the grid. The issue is i am using the code

$(grid).data("kendoGrid").dataSource.data([]);

which does clear the grid but it also shows 'No Data Found for the search' message. Since user didn't perform any search but only changed the radio button it doesn't seem right to display that message in the grid. So, i was wondering if there was a way to clear the grid without invoking the databound method.

Thanks.

Grid

answered on 15 Apr 2016

3 answers

132 views

[Solved] Child client hierarchy is not taking current row values in Actionlink

Hi

I tried to use client hierarchy method, first level 'Region Level' and second level "state level". while click region level state level grid bind is happening, but state level details row values are not taken while create client template. why?. please see the code below and let me know where is the problem.

for example child details are

state Total Request Req_sent yes Red_send No +ive% -ive% Request Sent progress bar

AL 18 11 7 20 80 ActionLink1(20% green) Value 11 | ActionLink2(80% red) Value 7

But only parent grid values are taken. please see the below code and point me where is the problem? how to create action link with progress bar style.

@(Html.Kendo().Grid<VAMDEScheduler.Models.RegionModel>()
.Name("Regiongrid")
.Columns(columns =>
{
columns.Bound(r => r.Region).Width(200);
columns.Bound(r => r.TotalRequest).Width(100);
columns.Bound(r => r.ReqSend_Yes).Width(50);
columns.Bound(r => r.ReqSend_No).Width(50);
columns.Bound(r => r.ReqSend_YesP).Width(50).Title("+ive %");
columns.Bound(r => r.ReqSend_NoP).Width(50).Title("-ive %");
columns.Template(@<text></text>).ClientTemplate("<div class='progress' style='height:25px'><a href='/sample1?Category=REQUESTSENT_YES&Region=#=Region#' class='progress-bar progress-bar-success' style='width:#=ReqSend_YesP#%;'><span>#=ReqSend_Yes#</span></a><a href='/sample1?Category=REQUESTSENT_NO&Region=#=Region#' class='progress-bar progress-bar-danger' style='width:#=ReqSend_NoP#%;'><span>#=ReqSend_No#</span></a></div>").Title("Request Sent").Width(100);

}) //columns
.DataSource(dataSource => dataSource.Ajax().Read(read => read.Action("Region_Read", "Home")))
.ClientDetailTemplateId("State_Read_template")
)

Grid

answered on 14 Apr 2016

4 answers

148 views

Dropdown list almost always off center

It seems that the more grids and/or rows I add to a page the more issues I have with dropdowns being off center (see attached)

Is this a known issue or has it been encountered by anyone else?

Grid

answered on 14 Apr 2016

1 answer

940 views

MultiSelect in custom filter

How would I go about adding multi-select functionality to a custom filter?

columns.Bound(c => c.InventoryStatus).Title("Inventory Status").Filterable(filterable => filterable.UI("inventoryStatusFilter"));

function inventoryStatusFilter(element) {

element.kendoDropDownList({

dataSource: {

transport: {

read: "@Url.Action("FilterMenuCustomization_InventoryStatus")"

}

});

}

Thanks in advance!

Steve.

Grid

answered on 14 Apr 2016

7 answers

773 views

Custom Popup Editor Layout Issue

Hi,

I am using the following css rule to set popup window width. I got it from support thread.

div.k-edit-form-container {

width: auto;

}

div.k-edit-form-container div.editor-field textarea, input.k-textbox {

width: 100%;

max-width: none;

}

But still layout is not rendered properly. I am using bootstrap "form-control" class.

Thanks in advance.

Grid

answered on 14 Apr 2016

1 answer

244 views

Multiple Column Header Hierarchy

We have a layout that requires column headers which sit under other column headers. Since each child column has a numeric value we would like to put a total under the parent value that is the total of the children values. Is there a way to insert the total value of all childrent columns with a hierarchy dropdown or with a row before the child value?

Code looks like this:
@(Html.Kendo().Grid<DST.Areas.WSDashboard.Models.CustomWidgetsModel.GridViewModel>()
.Name("Grid")
.HtmlAttributes(new { style = "height: 450px;" })
.Scrollable(s => s.Height("100%"))
.Sortable()
.Resizable(resizable => resizable.Columns(true))
.Pageable(pageable => pageable
.Refresh(true)
.Enabled(true)
.Messages(msg => msg.Display("{0:n0} - {1:n0} of {2:n0} items"))
.PageSizes(true))
.Navigatable()
.Columns(columns =>
{
columns.Bound(p => p.KPP).Title("KPP").Width(100);

columns.Bound(p => p.SystReqValue).Title("System Requirement").Width(150);

columns.Group(group => group.Title("G Sub-Systems")
.Columns(sub => {
sub.Group(sub1 => sub1.Title("F System")

.Columns(fs =>
{
fs.Bound(p => p.RValue).Title("R").Width(100);
fs.Bound(p => p.GValue).Title("G").Width(100);
fs.Bound(p => p.BValue).Title("B").Width(100);
}));

sub.Group(sub2 => sub2.Title("G System")
.Columns(gs =>
{
gs.Bound(p => p.WValue).Title("W").Width(100);
gs.Bound(p => p.LSystemValue).Title("L Systems").Width(100);
}));
}));


})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(15)
.Read(read => read.Action("GetData", "Widgets", new RouteValueDictionary { { "area", "WSDashboard" } }))
)
)

Grid

answered on 13 Apr 2016