Questions on UI for ASP.NET MVC Forum

1 answer

313 views

Has anyone built an application that used the Grid for creating a generic db table editor? The idea is to use the Grid to allow users to edit any database table from my db.

Grid

answered on 22 Aug 2018

3 answers

548 views

foreach PanelBar arrows expand collapse

Hi there,

I'm using kendo PanelBar with foreach for the nested contents, here is the code:

<div class="col-lg-12">
@(Html.Kendo().PanelBar()
.Name("OrganizerTour")
.ExpandMode(PanelBarExpandMode.Multiple)
.HtmlAttributes(new { style = "" })
.Items(panelbar =>
{
foreach (var result in Model)
{
panelbar.Add().Text("Organizer: " + @result.organizerName).Expanded(true)
.Items(tour =>
{
tour.Add().Expanded(true).Content(@<div class="panel-content">
<div class="row dashboard-grid">
@RenderGrid(result.Result)
</div>
</div>);
});
}
})
)
</div>

When each PanelBar is expanded, there are two arrows showing (see attached) - it's fine when collapsed.

How can I remove the bottom arrow? Or is it something wrong with the codes above?

PanelBar

answered on 22 Aug 2018

1 answer

200 views

Kendo DateTimePicker hover cutoff

Hi there,

Not sure why when hovering over the datetime picker it cuts-off the datetime textbox.

Here's the razor code:

<div class="col-md-4">

@(Html.Kendo().DateTimePicker().Name("EntryDate3").Value("2018-05-31").HtmlAttributes(new { type = "text" }))

</div>

See attached screenshot of the textbox when hovered over.

Anybody can point out what I did wrong?

Thanks.

Date/Time Pickers

answered on 22 Aug 2018

1 answer

1.0K+ views

Conditional Display in template.

Hi, I'm using a ListBox with a template.

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

<div class="row"><div class="col-sm-9"> #: data.RoleName #</div> <div class="col-sm-3">#: data.RoleNeedsAttention == true ? 'Y' : ''#</div></div>

</script>

@(Html.Kendo().ListBox()

.Name("roleChoices")

.DataTextField("RoleName")

.DataValueField("RoleName")

.TemplateId("roleChoiceTemplate")

.HtmlAttributes(new { style = "width: 100%; overflow: hidden;" })

.DataSource(source => source

.Read(read => read.Action("GetRoles", "Home"))

)

As is, this works fine, but instead of displaying a 'Y' in the template when the value is true, I want to display a formatted span like <span class=\'needsAttention\'>Attention</span>. When I try to do this, I either see the text '<span>...' or with different alterations I get an invalid template javascript error. Can you help me get the syntax right because I'm out of ideas.

Thanks!

ListBox

answered on 22 Aug 2018

6 answers

236 views

Remote Data Binding Issue

Hello,

I try to load child nodes on parent's expansion with the data remote binding.
But when i do like the exemple (https://demos.telerik.com/aspnet-mvc/treelist/remote-data-binding) My first level is correctly loaded but I can't expand them beacause there is no icon to do it on my treelist. See Screenshot there

I got the same issue on your sample application. I runned your solution and there is no icon to expand parent also. See screenshot

My current kendo version is 2017.2.504.545.

Also, I found on the forum another user who has the same problem (https://www.telerik.com/forums/mvc-treelist-load-on-demand, see the end of the topic)

There is my treelist view

@(Html.Kendo().TreeList(Model)

.Name("hierarchyTreelist")

.Toolbar(x => {

if (ViewBag.Mode == TypeArbo.MP.ToString())

{

x.Create().Text(" ");

}

})

.Editable(editable => editable.Mode("popup").TemplateName("HierarchyPopUpEditor"))

.Sortable()

.Filterable(ftb => ftb.Extra(false))

.Resizable(true)

.Scrollable(true)

.ColumnMenu()

.Columns(columns =>

{

columns.Add().Field(e => e.Id).Hidden(true);

columns.Add().Field(e => e.Libelle);

columns.Add().Field(e => e.Code).Width(140);

columns.Add().Field(e => e.CodeParent).Width(140);

columns.Add().Field(e => e.CodeEtLibelleUbaldi).Width(200).Hidden(ViewBag.Mode == TypeArbo.Ubaldi.ToString());

columns.Add().Field(e => e.FamilleLogistiqueNom).Width(250).Hidden(ViewBag.Mode == TypeArbo.Ubaldi.ToString());

columns.Add().Field(e => e.IsActif).Template("#= IsActif ? 'Oui' : 'Non' #").Width(100);

columns.Add().Title("Attributs").Command(c =>

{

c.Custom().Click("AttributView").Text(" ").Name("btnEditHierarchyAttribut").ImageClass("glyphicon glyphicon-th-list").ClassName("btn btn-info");

}).Width(80);

if (ViewBag.Mode == TypeArbo.MP.ToString())

{

columns.Add().Command(c =>

{

c.CreateChild().Text(" ").ClassName("btn btn-success");

c.Edit().Text(" ").ClassName("btn btn-primary");

c.Custom().Click("MoveView").Text(" ").Name("btnMoveHierarchy").ImageClass("glyphicon glyphicon-move").ClassName("btn btn-warning");

c.Custom().Click("DeleteView").Text(" ").Name("btnDeleteHierarchy").ImageClass("k-i-trash").ClassName("btn btn-danger");

}).Width(250);

}

})

.DataSource(dataSource => dataSource

.Create(create => create.Action("Create", "Hierarchie"))

.Update(update => update.Action("Update", "Hierarchie"))

.Destroy(destroy => destroy.Action("Delete", "Hierarchie"))

.Read(read => read.Action("GetHierarchies", "Hierarchie",

new { typeArbo = ViewBag.Mode, txtCode = Code, txtLibelle = Libelle, txtParent = CodeParent, txtFamLogi = FamLogi, rdblIsActif = IsActif }))

.Model(m =>

{

m.Id(f => f.Code);

m.ParentId(f => f.CodeParent);

m.Field(f => f.Libelle);

m.Field(f => f.IsActif);

m.Field(f => f.Description);

m.Field(f => f.URL);

m.Expanded(false);

})

)

.Events(e =>

{

e.Edit("OnEdit");

e.Save("OnSave");

})

)

And there my data controller action :

public JsonResult GetHierarchies([DataSourceRequest] DataSourceRequest request,string id, TypeArbo typeArbo, string txtCode, string txtLibelle, string txtParent, string txtFamLogi, bool? rdblIsActif)

{

List<PIMHierarchy> list = new List<PIMHierarchy>();

if (rdblIsActif != null)

list = hierarchyManager.GetByParams(txtCode, txtLibelle, txtParent, txtFamLogi, typeArbo)

.Where(h => ((bool)rdblIsActif && h.IsActif || !(bool)rdblIsActif && !h.IsActif)).ToList();

else

list = hierarchyManager.GetByParams(txtCode, txtLibelle, txtParent, txtFamLogi, typeArbo).ToList();

TreeDataSourceResult result = result = list.ToTreeDataSourceResult(request,

e => e.Code,

e => e.CodeParent,

e => id != null ? e.CodeParent == id : e.CodeParent == string.Empty,

e => e

);

return Json(result, JsonRequestBehavior.AllowGet);

}

Do you have any ideas where the problem is ?

Thank you for you time on that issue,

TreeList

answered on 22 Aug 2018

2 answers

135 views

Overload resolution failed using Model in the Datasource

Hello,

we´ve just bought DevCraft and to get into the stuff, I´ve programmed a little application. But I have a problem with the Grid. Using the Model-Function in the DataSource I get a "Overload resolution failed"-Exception, but I don´t see why. When I remove the "Model"-Part in the Datasource the exception disappears

@Html.Kendo.Grid(Model.Pruefdienste).Name("grdAdress") _
.ToolBar(Sub(t)
t.Create()
t.Save()
End Sub) _
.Editable(Sub(e)
e.DisplayDeleteConfirmation(True)
e.Mode(GridEditMode.PopUp)
End Sub) _
.Columns(Sub(cols)
cols.Select()
cols.Bound(Function(c) c.IDAdress).Hidden()
cols.Bound(Function(c) c.Name)
cols.Bound(Function(c) c.Street)
cols.Bound(Function(c) c.ZIP)
cols.Bound(Function(c) c.City)
cols.Bound(Function(c) c.Email)
cols.Bound(Function(c) c.www)
cols.Bound(Function(c) c.Phone)
End Sub) _
.Pageable(Sub(p)
p.PageSizes(True).PageSizes(New Integer() {20, 50, 100})
End Sub) _
.Sortable.Filterable.Groupable.Scrollable(Sub(s) s.Height("auto")) _
.DataSource(Sub(ds)
ds.Ajax().Model(Sub(model) model.Id("IDAdress")).Read(Sub(read) read.Action("GetAdresses", "Adress").Data("filterGrid"))
End Sub)

I have also tried

ds.Ajax().Model(Function(model) model.Id(Function(mo) mo.IDAdress)).Read(Func...

but without success.

Thank you very much for your help.

Grid

answered on 22 Aug 2018

1 answer

312 views

Inline editing not styling/templating fields

In my grid, when I click an inline edit it is showing the default browser edit inputs instead of styling it per kendo UI. I've attached a screenshot showing this issue. I'm expecting the first two fields to be text inputs which take the full width and the third input to be a date/time picker (its underlying data type is a Nullable<DateTime>). Validation appears to work properly despite this.

The code to generate the grid is as follows:

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

.Name("UserList")

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

.DataSource(o => o.Ajax()

.Model(m => m.Id<string>(u => u.Id))

.Read(r => r.Action("_UserList_Read", "Admin"))

.Update(u => u.Action("_UserList_Update", "Admin"))

.Destroy(d => d.Action("_UserList_Delete", "Admin"))

)

.Columns(c =>

{

c.Bound(o => o.DisplayName);

c.Bound(o => o.Email);

c.Bound(o => o.LockoutEndDateUtc);

c.Command(o => { o.Edit(); o.Destroy(); }).Width(230);

})

.Pageable(p => p.PageSizes(new int[] { 10, 20, 50, 100 }))

.Sortable()

.Filterable()

.Scrollable()

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

)

Using latest version of Kendo UI (2018.2.620 with bootstrap 4 theme). jQuery 3.3.1 and bootstrap 4.1.3.

Any advice on how to get these to apply styles (and the correct editors)?

Grid

answered on 21 Aug 2018

2 answers

1.8K+ views

DropDownList default value not passed to controller

We've got a drop down list inside a pop-up template from a grid. This drop down list is being populated correctly and you can select a value from the list and the value will be sent to the controller correctly. However when the data is loaded no value is selected initially so we are calling the select(0) function to automatically select the first item in the list. But when we do this the id value is not passed to the controller if the user doesn't select another item from the list.

Below is the DropDownList control. We are using the DataBound event to set the default value.

@(Html.Kendo().DropDownList()

.Name("ParentId")

.DataSource(ds => ds

.Custom()

.Transport(tr => tr

.Read(read => read.Action("OHGetGroupsForDropDown", "Groups")))

.Schema(sc => sc.Data("Data").Total("Total").Errors("errors")))

.DataValueField("Id")

.DataTextField("Name")

.Filter(FilterType.Contains)

.Events(e => e.DataBound("parentIdDefaults"))

.HtmlAttributes(new {@style = "width:100%", data_value_primitive = "true"}))

Below is the DataBound() event code. We are simply selecting the first item in the list.

function parentIdDefaults(e) {

var dropdownlist = $("#ParentId").data("kendoDropDownList");

dropdownlist.select(0);

}

The above code works visually but if we do not select another item in the drop down list the ParentId value of the object passed to the controller is 0. If we select another item in the list the ParentId value passed to the controller is correct.

Does anyone know why the select() call is not fully selecting the drop down list item but only appears to?

DropDownList

answered on 21 Aug 2018

1 answer

7.7K+ views

Display 'Yes' instead of 'true' for Boolean values

I cannot seem to find out how to do this from the documentation.

My model has a Boolean field which displays as 'true' or 'false'.

How can I set the grid to display as 'Yes' or 'No' respectively.

Thanks,

Richard

Grid