Questions on UI for ASP.NET MVC Forum

1 answer

465 views

Can HTML formatting be applied to Grid values?

Using Grid with MVC works fine, but unless I missed it, there does not seem to be many choices for formatting such as bold text, resizing/larger text; And When using MVC to make a simple table, I had used the html action link so that clicking on an item takes the browser to a specific page. Is this not supported in Grid?

for example, using this kind of html: <td style="font-size: larger; font-weight: 700;">@Html.ActionLink("Click here to go to the page", "index", "/home/index")</td>

If not, is there another kind of Grid item available that does?

Thanks

Grid

answered on 28 Apr 2017

2 answers

1.4K+ views

Pass values from UI via .read action in grid to controller

See the page screen shot.

I would like to pass the values in the textbox and two calendar controls to the controller using the .read action in the datasource.

One way I read about is using hidden HTML which I tried but the grid doesn't like it, at least the way I did it. I tried many ways.

When I hard code the values in the .read action, it does work and return the correct results. It's now just parameterizing it that is giving the problem.

@Html.Hidden("txtPartNum", "S2G-120");
@Html.Hidden("dtDateto", "2015-01-01");
@Html.Hidden("dtDatefrom", "2015-05-02");

Please advise the recommended method to retreive the values of the controls and pass to the backend please.

@(Html.Kendo().Grid<KendoUI.Sasco.Dashboard.Models.PartsHistoryViewModel>()
      .Name("PartsHistory")
      .HtmlAttributes(new { style = "height: 800px; border: 0;" })
      .Columns(columns =>
      {
          //columns.Bound(c => c.Part_Number).HeaderTemplate("<div><label for='PartNum'>Part Number</label> <input type='text' id='PartNum'/></div>");
          columns.Bound(c => c.Month);
          columns.Bound(c => c.SalesVolume).Title("Sales Volume");
          columns.Bound(c => c.SalesAmount).Title("Sales Amount").Format("{0:c0}");
          columns.Bound(c => c.Unit).Hidden();
          columns.Bound(c => c.PPH).Title("Price per 100");
      })
     .ToolBar(toolbar => {
         toolbar.Excel();
         toolbar.Pdf();
     })
      .Selectable()
      .Scrollable()
      .Pageable()
      .Events(e => e
      .DataBound ("onDataBound") //not needed unless something to pop open
     )
      .Navigatable()
      //.Filterable(filterable => filterable.Mode(GridFilterMode.Row))
      .DataSource(dataSource => dataSource
      .Ajax()
      .PageSize(20)
            //   .Read( "PartsHistory", "PartsHistory" )
            //          .Read(read => read.Action("PartsHistory", "PartsHistory", new { pPartName = "S2G-120", pStartDate = "2015-03-01", pEndDate = "2017-02-01"}))
            .Read(read => read.Action("PartsHistory", "PartsHistory", new { pPartName = txtPartnum.val() , pStartDate = txtDatefrom.val() , pEndDate = txtdateto.val() }))

Thanks much!

Grid

answered on 27 Apr 2017

3 answers

245 views

Loading for Ajax

Hi,

Was wondering if there is a Loader like the combobox, that could be displayed over the spinner part, while an Ajax call is made to fill in this field.

I thought that the following would work
kendo.ui.progress($("#txtNumericValueField"), true);

NumericTextBox

answered on 27 Apr 2017

2 answers

534 views

Entity framework and view models

Hi,

I have the following code in my controller and in the mapping of my entity I navigate a foreign key. (Plate = anomalie.voiture.plaque)

That gives me the following exception:

An exception of type 'System.Data.Entity.Core.EntityCommandExecutionException' occurred in EntityFramework.dll but was not handled in user code

There is already an open DataReader associated with this Connection which must be closed first.

I tried to add an include() but doesn't solve the problem. Any ideas ?

public ActionResult Read([DataSourceRequest]DataSourceRequest request)

{

using (var context = new carpackEntities())

{

IQueryable<anomalie> damages = context.anomalie;

damages.Include(d => d.voiture);

var result = Json(damages.ToDataSourceResult(request, damage =>

new DamageViewModel()

{

Date = damage.dtajout,

Description = damage.avarie,

Driver = damage.chauffeur,

Plate = damage.voiture.plaque,

Service = damage.service,

State = damage.etat.ToString()

}));

return result;

}

Grid

answered on 26 Apr 2017

1 answer

233 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

124 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

127 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

500 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

619 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

779 views

[Solved] 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));

}