Questions on UI for ASP.NET MVC Forum

5 answers

768 views

Error when i try to select a new item in Multiselect

Hi,

I try to do that in asp.net mvc : http://dojo.telerik.com/UViSA/13

I want to add item in a multiselect control and after i want to select it.

It work find to add in datasource of my multiselect but i can't select my new item by code (this.value(add);) .

i don't think it the new item the problem because i can't select a existing item. I tried to select a existing element in this event and a had the same error.

I add in attach files a print screen of my error ("Failed to execute 'removeChild' on 'Node' : Parameter 1 is not of type 'Node'....)

This is my code :

@(Html.Kendo().MultiSelectFor(model => model.LesDestinataires)

.Name("LesDestinataires")

.AutoBind(true)

.Filter("contains")

.DataTextField("NomComplet")

.DataValueField("AdresseCourriel")

.Events(e =>

{

e.Change("onChange").Filtering("onFiltering");

})

.DataSource(source =>

{

source.Read(read =>

{

read.Action("ObtenirCourriels", "Assignation");

//read.Type(HttpVerbs.Post);

})

.ServerFiltering(false);

}

)

.HtmlAttributes(new { style = "width:350px;" })

)

after my event : (the problem it at this line : this.value(add);)

function onFiltering(e)

{

var filter = e.filter;

if (filter.value.indexOf(";") > 0) {

var newtag = filter.value.replace(";","");

var values = this.value().slice();

//e.preventDefault();

var ajout = {NomComplet: newtag ,AdresseCourriel: newtag };

this.dataSource.add(ajout);

this.dataSource.filter({});

var add = [newtag];

if (values.length> 0) {

var merge = $.merge(add, values);

this.value($.unique(merge));

} else {

this.value(add);

}

this.trigger("change");

//this.dataSource.refresh(); //This don't work

}

My read.action to fill multiselect :

public JsonResult ObtenirCourriels()

{

List<Mentore> maSource = db.Mentores.ToList();

var lstMentores = maSource.Take(1).Select(s => new { NomComplet = s.NomComplet_Mentore, AdresseCourriel = s.Courriel_Mentore }); //Take(1) to just fill with one item my multiselect

return Json(lstMentores, JsonRequestBehavior.AllowGet);

}

Thank for your help!

MultiSelect

answered on 11 Jul 2019

2 answers

260 views

Disable javascript .Editable(editable => editable.Mode(GridEditMode.InCell))

Hello.

I need to disable/enable a completely the way to edit my grid (batch mode).

Any suggestion to do it via javascript on the .Editable(editable => editable.Mode(GridEditMode.InCell))?

@(Html.Kendo().Grid<Haz.ViewModels.Exp.SommaireDetailExDRModel>()

.Name("gridDetailsEx")

.Columns(columns =>

{

...

})

.ToolBar(toolBar =>

{

toolBar.Create();

toolBar.Save();

})

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

.HtmlAttributes(new { style = "font-size:11px;height: 200px;" })

.Scrollable()

.Selectable(s => s.Enabled(true))

.Sortable()

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

.Filterable()

.Pageable(pageable => pageable

.Refresh(true)

.ButtonCount(5))

.Events(events => events

.Change("onChange").DataBound("onDataBound").Edit("onEdit").SaveChanges("onSaveChanges"))

...

Thanks to everyone.

Grid

answered on 10 Jul 2019

14 answers

495 views

combination of a pivot grid control and a chart control

Dear Sir or Madam,

we are right now in the trial period of the Telerik MVC suite.
Especially we are searching for a combination of a pivot grid control and a chart control.
You have on your demo website already such a demo for classic ASPX.

Can you also provide such a demo for MVC? This would help us a lot in the evaluation process.

Thanks a lot and best regards from Germany.

PS:
the documentation for the classic ASPX components (web form) seems to be much more elaborated than
the one for MVC ..it would be great if this could be aligned. Thanks!

PivotGrid

answered on 10 Jul 2019

4 answers

505 views

Automatic grid persistence and load example

Hi does anyone have a working example of loading a previous saved state when the grid first loads, and saving the filters/sort/column order when they are changed?

this needs to be completely seamless to the user (no save/load buttons), and I would prefer not to save/load the entire grid state from getOptions, just the filters/sorts/columnorder/page

note: I've already looked through the examples here: https://www.telerik.com/support/code-library/preserve-grid-state-in-a-cookie and here: https://demos.telerik.com/kendo-ui/grid/persist-state

the current issue I am running into is if I save the current state in the databound event (calling get-options), I can never retrieve them on page load as the databound event fires (saving empty state) before I would be able to retrieve the state from an external method (ie. trying to load on document ready).

the only workaround I can think of at this point is to load the settings from the databound event too, but flag it somehow so it only does so on first load.

Grid

answered on 09 Jul 2019

1 answer

132 views

Need access to older versions

Hi,

I need access to old version who support .net framework 4.6.1

Admin can help me please?

Installer and VS Extensions

answered on 08 Jul 2019

1 answer

503 views

I need help to change Worksheet page margins and paper size

Hi there,

I’ve created some modules to export some info to Excel XLSX format using the classes Workbook and Worksheet from Telerik.Web.Spreadsheet.

So far so good, but now I need to setup the page (paper size and margins) for some Worksheets but I don’t see any method or property about this functionality in Telerik.Web.Spreadsheet.

Searching the web, I’ve realized that there’s another API in the assembly Telerik.Windows.Documents.Spreadsheet.dll. In fact, this link shows the features I need
https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/features/worksheetpagesetup

Right now I’ve a lot of code written in my exporters to Excel using the API in the Telerik.Web.Spreadsheet.

Is it possible to setup the page using the Telerik.Web.Spreadsheet API?

If not what are my options?

Thank you.

Spreadsheet

answered on 05 Jul 2019

3 answers

208 views

How to select grid's data source item when it is not available in data source (because of initial page size)?

Hi there,

I have a schedules grid which has 4 columns (2 columns are hidden), server paging is set to true, scrollable is endless and page size is 20. Grid constructor code below.

$("#schedules-grid").kendoGrid({

dataSource: {

transport: {

read: {

url: `/${window["routeContext"].TenantName}/Scheduler/GetSchedules`,

dataType: "json",

contentType: "application/json",

type: "GET",

headers: window["authenticationBearerToken"]

},

autoSync: true,

serverFiltering: false,

serverPaging: true,

serverSorting: false,

error: (e: kendo.data.DataSourceErrorEvent) => {

console.log(e);

},

pageSize: 20,

schema: {

model: {

id: "scheduleId"

},

total: data => {

if (data && data[0].total) {

return data[0].total;

}

return 0;

},

data: data => {

if (data) {

return data;

}

return [];

}

},

scrollable: {

endless: true

},

filterable: true,

sortable: true,

selectable: true,

resizable: true,

change: (e) => {

var selectedItem: any = e.sender.dataItem(e.sender.select());

if (this.onScrollToSelectedRow) this.onScrollToSelectedRow(selectedItem);

},

columns: [

{

field: "code",

title: "Code",

hidden: true

},

{

field: "recurrenceType",

title: "Recurrence",

width: 130

},

{

field: "title",

title: "Name"

},

{

field: "scheduleId",

title: "Schedule Id",

hidden: true

}

]

});

In the grid, a function "onScrollToSelectedRow" is called when the schedules grid change event fires. Code snippet below which scrolls to and highlight the selected item.

function (dataItem) {

var scheduleGrid = $("#schedules-grid").data("kendoGrid");

if (scheduleGrid) {

var scrollContentOffset = scheduleGrid.element.find("tbody").offset().top;

var selectContentOffset = scheduleGrid.select().offset().top;

var distance = selectContentOffset - scrollContentOffset;

scheduleGrid.element.find(".k-grid-content").animate({

scrollTop: distance

}, 400);

}

The issue that I'm struggling with is when a user select a schedule (let's say another grid from another page) and, that selected item is not available in the schedules grid data source first 20 data items, the selectedItem variable in grid's change event will be undefined.

So, what I did I use insert method of schedules grid data source to append the selected item as last item in the data source.

function selectGridScheduleItem() {

var schedGrid = window.Scheduler.scheduleGrid;

if (schedGrid) {

if (window.az_ScheduleviewModel) {

var scheduleRowItem = schedGrid.dataSource.get(window.az_ScheduleviewModel.data.az_ScheduleId);

if (scheduleRowItem) {

schedGrid.select("tr[data-uid='" + scheduleRowItem.uid + "']");

} else {

var schedule = {

autoTitle: window.az_ScheduleviewModel.data.az_Schedule.az_AutoTitle,

code: window.az_ScheduleviewModel.data.az_Schedule.az_Code,

company: window.az_ScheduleviewModel.data.az_CompanyId,

cultureInfo: null,

dateEnd: window.az_ScheduleviewModel.data.az_Schedule.az_EndDate,

dateStart: window.az_ScheduleviewModel.data.az_Schedule.az_StartDate,

desc: window.az_ScheduleviewModel.data.az_Schedule.az_Description,

entityMetadata: window.az_ScheduleviewModel.data.az_EntityMetadataId,

init: window.az_ScheduleviewModel.data.az_InitObject,

jobType: window.az_ScheduleviewModel.data.az_JobType,

linkedJobs: 0,

platformResource: window.az_ScheduleviewModel.data.az_PlatformResourceId,

scheduleId: window.az_ScheduleviewModel.data.az_ScheduleId,

state: window.az_ScheduleviewModel.data.az_Schedule.az_State,

title: window.az_ScheduleviewModel.data.az_Schedule.az_Name,

total: 0

}

var schedRecurrence = undefined;

var recurrence = window.az_ScheduleviewModel.data.az_Schedule.az_Recurrence;

if (recurrence !== null || recurrence !== undefined) {

schedRecurrence = JSON.parse(recurrence);

}

if (schedRecurrence) {

schedule.recurrence = {

end: schedRecurrence.End,

repeatEvery: schedRecurrence.RepeatEvery,

repeatOn: schedRecurrence.RepeatOn,

time: schedRecurrence.Time,

type: schedRecurrence.Type

};

schedule.recurrenceType = schedRecurrence.Type;

}

schedGrid.dataSource.insert(schedGrid.dataSource.data().length, schedule);

schedGrid.setDataSource(schedGrid.dataSource);

scheduleRowItem = schedGrid.dataSource.get(window.az_ScheduleviewModel.data.az_ScheduleId);

schedGrid.select("tr[data-uid='" + scheduleRowItem.uid + "']");

}

console.log(scheduleRowItem);

} else {

console.log("Schedule view model is undefined");

}

} else {

console.log("Schedules grid is undefined");

}

The function "selectGridScheduleItem" select the schedule row item in schedules grid and fires the change event of the grid if item is available in the data source. Otherwise, it uses insert method to insert the selected item in schedules grid data source and select the data item.

I'm not 100% sure using the insert method (if that solves the problem). If there's a better way to do it please enlighten me.

And another thing I noticed, it doesn't scroll and highlight the row of the selected item.

Cheers,

Junius

Grid

answered on 04 Jul 2019

7 answers

923 views

Inline editing mode and dynamic object

Hi,

I've created a grid with a dynamic object and I'd like to use the GridEditMode.InLine to update and add data. The popUp mode is working but with the InCell and
the inline I'm getting the following error:

Templates can be used only with field access, property access, single-dimension array index, or single-parameter custom indexer expressions.

Am I missing something?

I tried to use a custom template but I am still getting the same error.

@(Html.Kendo().Grid<dynamic>()

.Name("Grid")

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(true)

.Model(cfg =>

{

cfg.Id("SsdID");

foreach (var property in Model.PropertyDescriptors)

{

cfg.Field(property.Name, property.DataType);

}

})

.Read(cfg => cfg.Type(HttpVerbs.Post)

.Action("ReadDataForDefinition", "ManualDataEntry",

new { id = Model.LDefinitionId }))

.Update(u => u.Type(HttpVerbs.Post).Action("UpdateDataForDefinition", "ManualDataEntry",

new { id = Model.LDefinitionId }))

.Create(u => u.Type(HttpVerbs.Post).Action("Create", "ManualDataEntry",

new { id = Model.LDefinitionId }))

)

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

Columns(columns =>

{

foreach (var property in Model.PropertyDescriptors.Where(desc => desc.DisplayOrder.HasValue))

{

var binding = columns.Bound(property.DataType, property.Name);

if (property.DataType == typeof(DateTime) || property.DataType == typeof(DateTime?))

binding.Format("{0:d}");

binding.Column.Title = property.Label;

}

columns.Command(command =>

{

command.Edit();

command.Destroy();

});

})

.ToolBar(toolbar => { toolbar.Create(); })

.Pageable(paging =>

{

paging.ButtonCount(10);

paging.PreviousNext(true);

paging.PageSizes(true);

})

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

.Sortable()

.Scrollable()

.Filterable()

)

Thanks!

Grid

answered on 04 Jul 2019

1 answer

327 views

Evaluating for time slot scheduler

I am evaluating MVC scheduler for appointment scheduling. I need to show available time slots in different offices and users can pick any time slot and schedule appointment (like a doctors office application) . Do you have any example which is similar to this?

Scheduler