Questions on UI for ASP.NET MVC Forum

1 answer

208 views

Moveable dialog

Is it possible to make the dialog moveable? Since I have it set up as Model it covers the existing page which the end users may want to look at.

Thanks

Dialog

answered on 26 Apr 2017

1 answer

66 views

'No-Title' for title event

hello,

I set the event title in jquery dynamically depending on selected value in 3 comboboxes and when I try to save the event in database, the title's value is 'No title'.

It's working when I write something manuelly.

Do you know why I have this issue ?

Thank you,

Scheduler

answered on 26 Apr 2017

1 answer

79 views

Multiselect not adding back to grid in order after using sorter

I am using a kendo grid and one of the columns uses a MultiSelectFor. I am also using a Sortable with the multiselect so users can change the ordering of the multiselect values but when I click out of the multiselect and it goes to write back to the grid it doesn't write back in the selected order but only the order in which I selected the values. I attached some images to show what I mean.

@using Models;

@using DAL;

@model IEnumerable<object>

@{

string uniqueName = Util.GetUniqueName();

string onSelect = "onSelect_" + uniqueName;

string onChange = "onChange_" + uniqueName;

string selectedValueVariable = "selectedValueVar_" + uniqueName;

string selectedValueFunction_default = "selectedValueFunction_" + uniqueName;

string builtParamFunction = "builtParamFunction_" + uniqueName;

bool isCascadingFrom = false;

bool isRequired = ViewData.ModelMetadata.IsRequired;

string onChangeRestrictValues = "onChangeRestrictValues" + uniqueName;

string onSortChange = "onSortChange" + uniqueName;

bool ShowLabel = ViewData.GetBoolValue("ShowLabel");

string selectedValueFunction = ViewData.GetValue("SelectedValueFunction", selectedValueFunction_default);

string ParamFunction = ViewData.GetValue("ParamFunction");

string id = ViewData.GetValue("FieldID", uniqueName);

string Param1 = ViewData.GetValue("Param1");

string Param2 = ViewData.GetValue("Param2");

string Param3 = ViewData.GetValue("Param3");

string CascadeFromField = ViewData.GetValue("CascadeFromField");

string CascadeFromField_SelectedValueFunction = ViewData.GetValue("CascadeFromField_SelectedValueFunction");

bool allowCustomEdit = ViewData.GetBoolValue("AllowCustomEdit");

string defaultValue = ViewData.GetValue("DefaultValue");

isCascadingFrom = string.IsNullOrWhiteSpace(CascadeFromField) == false;

ListType ListType = ViewData.GetEnumValue<IEnumerable<object>, ListType>("ListType");

string DataTextField = ListService.GetDataTextField(ListType);

string DataValueField = ListService.GetDataValueField(ListType);

if (string.IsNullOrWhiteSpace(CascadeFromField_SelectedValueFunction) == false && string.IsNullOrWhiteSpace(CascadeFromField))

{

throw new Exception("CascadeFromField_SelectedValueFunction was specified, but CascadeFromField was not specified");

}

if (string.IsNullOrWhiteSpace(ParamFunction) == false && string.IsNullOrWhiteSpace(CascadeFromField_SelectedValueFunction) == false)

{

throw new Exception("ParamFunction was specified as well as CascadeFromField_SelectedValueFunction, only one of these can be used");

}

if (string.IsNullOrWhiteSpace(CascadeFromField_SelectedValueFunction) == false) //we want to use the CascadeFromField_SelectedValueFunction to populate a parameter value and pass it to server

{

if (string.IsNullOrWhiteSpace(Param1)) //if first param is unspecified

{

Param1 = CascadeFromField_SelectedValueFunction + "()";

}

else if (string.IsNullOrWhiteSpace(Param2)) //if 2nd param is unspecified

{

Param1 = "\"" + Param1 + "\""; //we need to add quotation marks so the value is seen as a string in javascript and not a variable or method

Param2 = CascadeFromField_SelectedValueFunction + "()";

}

else if (string.IsNullOrWhiteSpace(Param3)) //if 3rd param is unspecified

{

Param1 = "\"" + Param1 + "\""; //we need to add quotation marks so the value is seen as a string in javascript and not a variable or method

Param2 = "\"" + Param2 + "\""; //we need to add quotation marks so the value is seen as a string in javascript and not a variable or method

Param3 = CascadeFromField_SelectedValueFunction + "()";

}

ParamFunction = builtParamFunction; //param values will be converted into javascript and returned back to server as a function

}

string noDataTemplateID = "noDataTemplateID" + uniqueName;

}

<script id="@noDataTemplateID" type="text/x-kendo-tmpl">

<div>

No data found. Do you want to add new item - '#: instance.input.val() #' ?

</div>

<br />

<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>

</script>

<script>

function hint(element) {

return element.clone().addClass("hint");

}

function placeholder(element) {

return element.clone().addClass("placeholder").text("drop here");

}

</script>

@if (ShowLabel)

{

@Html.LabelFor(x => x)

}

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

.DataTextField(DataTextField)

.DataValueField(DataValueField)

.NoDataTemplateId(noDataTemplateID)

.Value(defaultValue)

.HighlightFirst(true)

.Filter(FilterType.StartsWith)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("Read", "List", new { ListType = ListType, Param1 = Param1, Param2 = Param2, Param3 = Param3 });

});

})

.HtmlAttributes(new {id = id })

)

@(Html.Kendo().Sortable()

.For("#" + id + "_taglist")

.HintHandler("hint")

.PlaceholderHandler("placeholder")

)

@using Models;

<script type="text/kendo" id="usersTemplate">

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

#:data[i].Description#

#if(i < (data.length - 1)) { #

#:", "#

#}#

</script>

<script type="text/javascript">

var usersTemplate = kendo.template($("#usersTemplate").html(), { useWithBlock: false });

</script>

<div id="content">

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

.Name("grid_approvalGroups")

.Columns(columns =>

{

columns.Command(command =>

{

command.Destroy();

}).Width(150);

columns.Bound(e => e.GroupID).Visible(false);

columns.Bound(e => e.GroupName);

columns.Bound(e => e.Users).ClientTemplate("#=usersTemplate(Users)#").Sortable(false);

})

.Pageable() //Enable the paging.

.Sortable() //Enable the sorting.

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

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

.DataSource(datasource => datasource

.Ajax()

.PageSize(10)

.Batch(true)

.Model(model =>

{

model.Id(m => m.GroupID);

model.Field(m => m.Users).DefaultValue(new List<UserIDViewModel>());

})

.Read(read => read.Action("Read", "WFApprovalGroup"))

.Create(c => c.Action("Create", "WFApprovalGroup"))

.Update(c => c.Action("Update", "WFApprovalGroup"))

.Destroy(c => c.Action("Delete", "WFApprovalGroup"))

)

</div>

Grid

answered on 26 Apr 2017

1 answer

461 views

Grid not working on Custom Command

Hello,

the following grid is working fine, and do the job h

01.@(Html.Kendo().Grid<QMatrix.Models.UserModel>()

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

03. .Name("gridUsers")

04. .Pageable()

05. .Scrollable()

06. .Filterable(filter => filter.Mode(GridFilterMode.Menu))

07. .Columns(col =>

08. {

09. col.Bound(m => m.Personalnummer).Title("Personalnummer");

10. col.Bound(m => m.Name).Title("Name");

11. col.Bound(m => m.Nachname).Title("Nachname");

12. col.Bound(m => m.Planstelle).Title("Planstelle");

13. })

14. .DataSource(ds => ds

15. .Ajax()

16. .PageSize(30)

17. .Model(model => model.Id(m => m.ID))

18. .Read(read => read.Action("ReadAllUsers", "User")))

19. )

Now i want to add a custom command button, which open a kendo window that loading an content specific by an ID from grid.

But when i add a the following Custom Command Button the grid stop working, datasource is no longer read ?

Grid displays no data available.......

1.col.Command(command => { command.Custom("CustomCommand").Click("editUserPermission").Text("Bearbeiten"); });

Javascript:

01.<script type="text/javascript">

02. function editUserPermission(e) {

03. e.preventDefault();

04.

05. var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

06. var wnd = $("#AddPermission").data("kendoWindow");

07.

08. wnd.LoadContentFrom("EditRights", "User", new { UserID = dataItem.ID });

09. wnd.center().open();

10. }

11.</script>

Can anyone explain to me ? :/

thanks ..

e is created for :

Can anyone explain to me

Grid

answered on 26 Apr 2017

1 answer

574 views

Loading images from stream/bitmap (not via url)

Hi,

I was wondering if there's an option to load images in a Kendo Diagram without the use of referencing a URL, as is done here:

g.append(new dataviz.diagram.Image({

source: "../content/dataviz/diagram/people/" + dataItem.image,

x: 3,

y: 3,

width: 68,

height: 68

}));

Is it possible to load it via a bitmap or stream and pass it from the controller onto the view?

d

Diagram

answered on 25 Apr 2017

8 answers

732 views

MultiSelect Binding to Collection with Count 1 , when selection is empty

I have a view model 'OrderViewModel' with a property

public ICollection<Person> Team { get; set; }

I use a Kendo Grid element to display a list of the 'OrderViewModel' Objects and use a Popup with a template to edit the data.

In my razor view if the edit view i use a multiSelect Element to edit the 'Team' property

@(Html.Kendo().MultiSelect()

.Name("Team")

.DataTextField(field: "FullName")

.DataValueField(field: "Id")

.AutoBind(autoBind: false)

.DataSource(s => s.Read(read => read.Action(actionName: "TeamMemberRead", controllerName: "Grid")).ServerFiltering(enabled: true))

)

When the data is posted back to the controller and nothing is selected in the multiselect field, the value for the 'Team' property is a List with Count = 1 and the element [0] is null.

Is this the correct behavior? I expect a list with Count = 0.

Here is my controller action:

[HttpPost]

public ActionResult Orders_Update([DataSourceRequest]DataSourceRequest request, OrderViewModel data)

{

if (data != null && ModelState.IsValid)

{

// Update

int count = data.Team.Count;

}

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

}

MultiSelect

answered on 25 Apr 2017

19 answers

675 views

Persist data source set from JavaScript

I'm trying to get a multi select box to refresh it's values after selecting a value from a drop down list. I am currently using server side filtering and paging (i.e. not all items are loaded when you load the control and so scrolling will keep loading items as needed)

Initially the multi select is getting its data value set in the Read method like so

transport.Read("GetItems", "Items", new { id = @Model.Id });

At this stage, the ID parameter (from the model) it passes in is 0 and so no items are loaded in the Multi Select control.

I now have a drop down box with a change event attached to it. On the change event I want to refresh the data on the multi select so I do the following using JavaScript:

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

multiSelect.dataSource.read({ id: value });

On the controller, i can see that the ID value is coming through correctly and the Multi Select loads the correct value items. (e.g. 25, 26 etc)

However the problem comes in when i start scrolling the multi select list. When the next items are "loading" it seems the controller is being hit again with the value from the original datasource (i.e. 0) and so removes everything from the Multi Select control.

How can I make it so any further reads of the data source uses the new parameter that i've set in JavaScript?

t

ransport.Read("GetItems", "Items", new { id = @Model.Id });

transport.Read("GetItems", "Items", new { id = @Model.Id });

MultiSelect

answered on 25 Apr 2017

3 answers

239 views

Scheduler iCal Interface?

Hi there,

what is best practice to provide an ical calender feed based on Kendo Scheduler events?
I want to integrate the events into Outlook and Mobile devices.

My search on that topic showed that the Recurrence pattern is parsed on clientside and not serverside, which would be needed for my request.

The best solution would be if the user can edit/create events in Outlook/MobDevice. I believe an additional CalDAV layer would be needed for that. Is there any recommended path doing that with kendo mvc?

Thanks for any hints on that!

Chris

Scheduler