Questions on UI for ASP.NET MVC Forum

1 answer

139 views

Inline edit with combobox/dropdownlist and (non)nullable fields

Hi,

While programming with Kendo MVC I am figuring out what a best practice is when using inline edit. Firstly I tried with a custom save with the clientside events of the grid. But performance wise I concluded that using datasource/transport is a better option. But now am I stuck with inline edit of fields with an editor template with a combobox/dropdownlist.

When I do an inline edit, another value is selected in the combobox/dropdownlist. I can see a postback is done. After the return of the save method serverside, the old value is selected. Then after a F5 the new value appears. In the serverside save method everything works fine.

.Update(update = { update.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "TaskSchedulerApiV2", action = "Put" }));})

[System.Web.Mvc.HttpPut]

public List<TaskSchedulerGridViewModel> Put(TaskSchedulerGridViewModel task)

{

//

}

Is it the return value of the put mehod or smething else?

Roel

Grid

answered on 17 Feb 2021

4 answers

128 views

Load child nodes every time on expand

Hi All,

I need to load treelist child items every time when I click on expand icon, so achieve this I did the following thing, but the issue is the data is not refreshing in the treelist as it is showing the old data which loaded first time.

function onExpand(e) {
var treelist = $("#treelist").data("kendoTreeList");
treelist.dataItem(e.model).loaded(false);
}

TreeList

answered on 17 Feb 2021

1 answer

178 views

persisting grid state

Hi,

I have implemented a Telerik grid and I managed to store the filtering and sorting in our database for each person that uses it.
So every time a user navigates to that screen, his personal filters are already applied to the grid.

However, in one scenario this does not work...

In my grid every row contains a link to another page.
Now if someone navigates to the other page from a link in the grid, and then he clicks the 'go back' button from the browser, the filters are disappeared.
(Unless he refreshes the page another time, then the new filters appear again).

How can I avoid the filters from disappearing when navigating away from the page from a link in the grid?

Kind regards,

Bruno

Grid

answered on 16 Feb 2021

1 answer

1.3K+ views

Kendo Grid's Inline Kendo Dropdown values not binding

I'm just trying to create a kendo grid with an inline kendo dropdown. like the following

example 1

example 2

I keep Database Values like following

So, the SampleModel, I created like this, I just keep only TypeId in DB

public class SampleModel {

public int Id { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public int TypeId { get; set; }

public string TypeName{ get; set; }

} public class ListItem

{

public int Id { get; set; }

public string Name { get; set; }

}

this is the grid code snippet that includes, EditorTemplate name

@(Html

.Kendo()

.Grid<SampleModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(p => p.Name);

columns.Bound(e => e.TypeId).EditorTemplateName("Type").Title("Type").ClientTemplate("#:TypeName#");

columns.Bound(p => p.Description);

columns.Command(p =>

{

p.Edit();

p.Destroy();

});

})

.ToolBar(t =>

{

t.Create();

})

.DataSource(dataSource => dataSource

.Ajax()

.Model(m =>

{

m.Id(mr => mr.Id);

})

.Create(cr => cr.Action("Create", "Sample"))

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

.Update(upd => upd.Action("Update", "Sample"))

.Destroy(dest => dest.Action("Delete", "Sample"))

)

So this is my Editor template code snippet

@using System.Collections

@model System.Int32

@(Html.Kendo().DropDownList().BindTo((IEnumerable)ViewBag.Types).DataValueField("Id").DataTextField("Name").Name("TypeId"))

so I implement the code like following

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

ViewBag.Types = GetTypes();

var res = sampleService.GetDB_Data();

return Json(res.Data.ToDataSourceResult(request));

}

public List<ListItem> GetTypes()

{

List<ListItem> types = new List<ListItem>();

types.Add(new ListItem()

{

Id = 1,

Name = "Good"

}

);

types.Add(new ListItem()

{

Id = 2,

Name = "Bad"

}

);

return types;

}

but this is not mapping or not loading the dropdowns as seen on these images
Not Mapping values as seen in this image,

Not even load kendo dropdown, in the backend I can see GetTypes() return values, but when it comes to frontend it's showing like this

Appreciate if can show the mistake or modification required for this :)

Grid

answered on 16 Feb 2021

5 answers

1.0K+ views

Sorting Grid on Editor Template column

Hello there. I am having a bit of an issue sorting a grid. I want to sort on dropdown column that is populated using an editor template. However, when i click on the MaterialCategory column to sort the grid, the grid is not sorted.

Here is the grid

01.@(Html.Kendo().Grid<P2I_UI.Models.ViewM.Text>()

02. .Name("PlanPlanTextGrid")

03. .Columns(columns =>

04. {

05. columns.Group(TextGroup => ScriptureGroup

06. .Title("<center>Text</center>")

07. .Columns(dd =>

08. {

09. dd.Bound(e => e.MaterialCategory).Title("Type").Width(108).ClientTemplate("#=MaterialCategory.ShortName#");

10. dd.Bound(e => e.Product).Title("Item #").Width(125).ClientTemplate("#=Product.ItemNumber#").Sortable(false);

11. dd.Bound(e => e.ProductName).Title("Description").Width(160);

12. })

13. );

14. columns.Command(e => e.Destroy().Text(" ").HtmlAttributes(new { @title = "Delete" })).Width(1);

15. })

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

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

18. .Navigatable()

19. .Sortable(s => { s.SortMode(GridSortMode.SingleColumn); })

20. .DataSource(dataSource => dataSource

21. .Ajax()

22. .Batch(true)

23. .ServerOperation(false)

24. .Model(model =>

25. {

26. model.Id(p => p.PlanTextID);

27. model.Field(p => p.MaterialCategory).DefaultValue(ViewData["defaultMaterialCategory"] as P2I_UI.Models.ViewM.MaterialCategoryVM);

28. model.Field(p => p.Product).DefaultValue(ViewData["defaultProduct"] as P2I_UI.Models.ViewM.ProductVM);

29. })

30. .Create("Text_Create", "PlanText")

31. .Read("Text_Read", "PlanText")

32. .Update("Text_Update", "PlanText")

33. .Destroy("Text_Delete", "PlanText")

34. )

35.)

Now if i change the materialCategory column from

dd.Bound(e => e.MaterialCategory).Title("Type").Width(108).ClientTemplate("#=MaterialCategory.ShortName#");

To

dd.Bound(e => e.MaterialCategory.MaterialCategoryID).Title("Type").Width(108).ClientTemplate("#=MaterialCategory.ShortName#");

Then the grid's sorting function works. But, the downside to this is that if i want to edit the MaterialCategory, a textbox with the MaterialCategory Id is provided instead of a dropdown list. How do i fix this issue? thanks

Here is the rest of the code.

public class Text

{

public int TextID { get; set;

[UIHint("MaterialCategoryEditor")]

[Required(ErrorMessage = "MaterialCategory is required")]

public MaterialCategoryVM MaterialCategory { get; set; }

public int MaterialCategoryID { get; set; }

[UIHint("ProductEditor")]

[Required(ErrorMessage = "Product is required")]

public ProductVM Product { get; set; }

public string ProductName { get; set; }

}

public class MaterialCategoryVM

{

public int MaterialCategoryID { get; set; }

public string MaterialCategoryName { get; set; }

public string ShortName { get; set; }

public bool Active { get; set; }

}

public class ProductVM

{

public int ProductID { get; set; }

public string ItemNumber { get; set; }

public string Title { get; set; }

}

MaterialCategoryEditor

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

.Name("MaterialCategory")

.DataTextField("ShortName")

.DataValueField("MaterialCategoryID")

.DataSource(dataSource =>

{

dataSource.Read(read => read.Action("GetMaterialsList", "PlanText")).Custom().Sort(s => s.Add("MaterialCategoryID"));

})

)

@Html.ValidationMessageFor(m => m)

Grid

answered on 16 Feb 2021

5 answers

2.9K+ views

Url.Action in Column Template

Is there a way to create a column template using Url.Action to create a similar function to the foreign key ability with MVC Grid? Ultimately I want the treelist to display the "DataText" field not the "DataValue" field.

columns.Add().Field(e => e.TimeFrameId).Template("@Url.Action("GetTimeFrame","Template", new {timeFrameId = #:TimeFrameId#})");

Thanks

TreeList

answered on 15 Feb 2021

1 answer

789 views

Kendo grid EditorTemplate Uploader not working with Grid's Update

I just created the following grid with kendo EditorTemplate

https://i.stack.imgur.com/f8RbA.png

this is the code snippet for this grid

@(Html

.Kendo()

.Grid<SampleModel>()

.Name("sampleGrid")

.Columns(columns =>

{

columns.Bound(p => p.Name);

columns.Bound(p => p.Logo).ClientTemplate("<img src='data:image/png;base64,#=Logo#' style='height: 100px; width: auto' />").EditorTemplateName("LogoFile");

columns.Command(p =>

{

p.Edit();

p.Destroy();

});

})

.ToolBar(t =>

{

t.Create();

})

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.AutoBind(true)

.DataSource(dataSource => dataSource

.Ajax()

.Model(m =>

{

m.Id(mr => mr.Id);

})

.PageSize(20)

.Create(cr => cr.Action("Create", "Sample"))

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

.Update(upd => upd.Action("Update", "Sample").Data("setUpdateValues"))

.Destroy(dest => dest.Action("Delete", "Sample"))

)

.Events(e => e.Change("setUpdateValues"))

)

This is working properly for View Objects and Add new Objects but for the Update scenario, it's not hit the backend method if update only the image file. if the Name property changes then it's hit backend.

https://i.stack.imgur.com/Z5IfK.png

this is my model

public class SampleModel

{

public int Id { get; set; }

public string Name { get; set; }

public string Logo { get; set; }

}

This is the Editor template

@model string

@(Html.Kendo()

.Upload()

.Name("LogoFile")

.ShowFileList(true)

.Events(events =>

{ events.Select("onSelect");

events.Success("onUploadSuccess");

})

.Messages(messages =>

{

messages.Select("Select Logo Picture");

})

.Async(async =>

{

async.Save("SaveFile", "Sample");

async.Remove("DeleteFile", "Sample");

async.AutoUpload(true);

})

.Multiple(false)

.HtmlAttributes(new { data_value_primitive = "true" })

.Validation(validation => validation

.AllowedExtensions(new string[] { ".jpeg", ".jpg", ".png" })

.MaxFileSize(1000000)))

this is the script section in the above .cshtml file

@section ViewSpecificJavascript {

<script type="text/javascript">

function setUpdateValues() {

var obj =

{

Name: $("#Name").val(),

Logo: $("#Logo").val()

};

return obj;

}

function onSelect(e) {

var fileInfos = e.files;

var wrapper = this.wrapper;

fileInfos.forEach(function (fileInfo) {

addPreview(fileInfo, wrapper);

});

}

function addPreview(file, wrapper) {

var raw = file.rawFile;

var reader = new FileReader();

if (raw) {

reader.onloadend = function (e) {

var preview = $("<img class='image-preview'>").attr("src", this.result);

wrapper.find(".k-file[data-uid='" + file.uid + "'] .k-file-extension-wrapper").replaceWith(preview);

};

reader.readAsDataURL(raw);

}

};

function onUploadSuccess(e) {

switch (e.response.Type.toString().toLowerCase()) {

case "upload": paint: alert('Your logo file has been uploaded successfully.'); break;

case "remove": alert('Your logo file has been removed successfully.'); break;

}

</script>

}

even this setUpdateValues javascript method calls, if I change the Name model property value, but it's not even hit If I change only the photo.

This is my backend method

public ActionResult Update(SampleModel obj)

{

....

return Json(new { success = true });

}

What did I miss here, even I tried to change this Logo value like this $("#Logo").val("TEST"), just thought this is because this model identifies as not changed, but the same result still not calling.

This is the Stackoverflow question

Grid

answered on 12 Feb 2021

4 answers

301 views

ClientTemplate not working for inline dropdown

Hi there,

I am using a trial version to make sure it covers our project requirements. Will upgrade to full if this works.

I'm trying to display a dropdown for related data inline inside a grid. I've followed this link as closely as possible https://demos.telerik.com/aspnet-mvc/grid/editing-custom

But the ClientTemplate is not rendering the dropdown.

View:
@(Html.Kendo().Grid<GrindrodDataCapture.Models.RailConsignmentDetail>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.LoadedWeight);
columns.Bound(c => c.GrossWeight);
columns.Bound(c => c.TareWeight);
columns.Bound(c => c.Tarps);
columns.Bound(c => c.Status).ClientTemplate("=Status.Name#");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(180);
})
.ToolBar(toolBar =>
{
toolBar.Create();
toolBar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()

.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(rd => rd.ID);
model.Field(rd => rd.ID).Editable(false);
model.Field(rd => rd.Status).DefaultValue(ViewData["defaultStatus"] as GrindrodDataCapture.Models.ConsignmentDetailStatus);
})
.PageSize(20)
.Read(read => read.Action("RailConsignmentDetails_Read", "RailDetailGrid", new { headerID = Request.Params["ConsignmentHeaderID"] }))
.Create(create => create.Action("RailConsignmentDetails_Create", "RailDetailGrid"))
.Update(update => update.Action("RailConsignmentDetails_Update", "RailDetailGrid"))
.Destroy(destroy => destroy.Action("RailConsignmentDetails_Destroy", "RailDetailGrid"))
)
)

Controller section:

public class RailDetailGridController : Controller
{
private GrindrodContext db = new GrindrodContext();

public ActionResult Manage(int ConsignmentHeaderID)
{
PopulateWagons();
return View();
}

private void PopulateWagons()
{
ViewData["statuses"] = db.ConsignmentDetailStatuses;
ViewData["defaultStatus"] = db.ConsignmentDetailStatuses.First();
}

public ActionResult RailConsignmentDetails_Read([DataSourceRequest]DataSourceRequest request, int headerID)
{

IQueryable<RailConsignmentDetail> railconsignmentdetails = (from rd in db.RailConsignmentDetails
where rd.RailConsignment.ID == headerID
select rd).Include("Status");

DataSourceResult result = railconsignmentdetails.ToDataSourceResult(request, railConsignmentDetail => new {
ID = railConsignmentDetail.ID,
LoadedWeight = railConsignmentDetail.LoadedWeight,
GrossWeight = railConsignmentDetail.GrossWeight,
TareWeight = railConsignmentDetail.TareWeight,
Tarps = railConsignmentDetail.Tarps,
Status = new ConsignmentDetailStatus ()
{
ID = railConsignmentDetail.Status.ID,
Code = railConsignmentDetail.Status.Code,
Name = railConsignmentDetail.Status.Name,
NameLocal = railConsignmentDetail.Status.NameLocal,
Description = railConsignmentDetail.Status.Description,
IsOcean = railConsignmentDetail.Status.IsOcean,
IsRail = railConsignmentDetail.Status.IsRail,
IsRoad = railConsignmentDetail.Status.IsRoad

}
});

return Json(result, JsonRequestBehavior.AllowGet);
}

Grid

answered on 12 Feb 2021

14 answers

271 views

Visual Studio 2015 - Nuget Exception - GetFullVsVersionString must be called on the UI thread

I have visual studio 2015 Enterprise Update 3.
When i installed Telerik R1 2017 on it i faced the error below :

An exception was thrown while initializing part

"Nuget.PackageManagement.VisualStudio.VSolutionManager".

GetFullVsVersionString must be called on the UI thread.

Please see the attached for it's screenshot.
By Disabling extensions from Tools -> Extensions and Updates...error vanished.
What is going on & why Telerik has no solution for this?
==============================================
"In VisualStudio 2015 -> Tools -> Extensions and updates ->
Online: Search for the string: "Fix NuGet GetFullVsVersionString must be
called on the UI thread" and install the given fix."

I did it and found nothing.
Where is that extension to fix this issue?
Why did they remove it from marketplace?

Installer and VS Extensions

answered on 11 Feb 2021

3 answers

1.7K+ views

GridBoundColumnBuilder<MyModel>' does not contain a definition for 'Template'

I have a working server-bound grid. I'm trying to add a server-bound template column based on the following snippet from here.

columns.Bound(p => p.ProductName).Template(@<text>

    @if(@item.ProductName != null){

         @item.ProductName

    } else {

        "No data"

    }

    </text>

);

The ".Template" method generates the error:

Error CS1061 'GridBoundColumnBuilder<MyModel>' does not contain a definition for 'Template' and no accessible extension method 'Template' accepting a first argument of type 'GridBoundColumnBuilder<MyModel>' could be found (are you missing a using directive or an assembly reference?)

These lines are in my _ViewImports.cshtml:

@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI

Using Telerik.UI.for.AspNet.Core 2020.3.915

https://demos.telerik.com/aspnet-mvc/grid/serverrowtemplate

I have not yet found a solution after looking at many links. Am I really missing a using?

(And for the record, the New Thread editor for these forums is shameful. The standard Windows undo/redo/selection do not work in Chrome and poor/lack of formatting options significantly limit what I'm trying to convey.)

Grid

answered on 11 Feb 2021