Questions on UI for ASP.NET MVC Forum

1 answer

129 views

Not able to pass data from Telerik Grid in Submit form.

Hello Telerik and other developers,

I am facing an issue with submitting a grid within a form in dotnet core 6.

I followed the example from github but data does not pass from the grid form to the view.

The rest of the values from the form do pass, except the values from the grid.

I appreciate any help. Thank you.

<form asp-action="CreatePO" id="PorequestForm" name="PorequestForm"><div asp-validation-summary="ModelOnly" class="text-danger"></div><fieldset><legend>Materials</legend>

        @*@Html.LabelFor(category => category.Justification)
        @Html.EditorFor(category => category.Justification)*@

        @(
            Html.Kendo().Grid(Model.POMaterials)
                .Name("PoMaterial")
                .ToolBar(tools => tools.Create().Text("Add PO Materials"))
                .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                .Columns(columns =>
                {
                columns.Bound(p => p.ItemNumber).ClientTemplate("#= ItemNumber #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].ItemNumber' value='#= ItemNumber #' />"
                );
 
                columns.Bound(p => p.Description).ClientTemplate("#= Description #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].Description' value='#= Description #' />"
                );
               
                columns.Bound(p => p.Amount).ClientTemplate("#= Amount #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].Amount' value='#= Amount #'/>"
                );
                
                columns.Bound(p => p.UnitCost).ClientTemplate("#= UnitCost #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].UnitCost' value='#= UnitCost #' />"
                );

                columns.Bound(p => p.PomaterialId).Hidden().ClientTemplate("#= PomaterialId #" +
                "<input type='hidden' name='POMaterial[#= index(data)#].PomaterialId' value='#= PomaterialId #' />"
                );

                columns.Command(command => command.Destroy()).Width(100);
            })
            .DataSource(dataSource => dataSource.Ajax()
            .Model(model =>
            {
                model.Id(p => p.PomaterialId);
                model.Field(p => p.PomaterialId).Editable(false);
            })
            .Batch(true)
            //.Read(read => read.Action("ReadPoRequest", "Grid"))
            //.Create(create => create.Action("AddPORequest", "Grid"))
            .ServerOperation(false)
            )
            )
    </fieldset>

 

</form>

<script>
    function index(dataItem) {
        var data = $("#PoMaterial").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }
</script>

Form

Grid

answered on 16 Oct 2023

0 answers

258 views

Grid does not send data back to controller

I have a kendo grid on a .cshtml page along with a kendo date picker, a generic "Update" button, and a generic "save" button. The grid gets populated with data from the database correctly. When I select a date from the datepicker and click on the Update button, the selected date updates every record in the PreparedDate column of the grid. When I click on the generic "save" button, the grid data should get sent to the controller but the data being received by the controller is null.

This is the definition of the grid:

@(Html.Kendo().Grid<TaxCertApp.ViewModels.ProtestBarcodeViewModel>()

                                          .Name("QRCodesGrid")
                                          .AutoBind(false)
                                          .Columns(columns =>
                                          {
                                              columns.Bound(p => p.ID).Hidden(true);
                                              columns.Bound(p => p.Table).Hidden(true);
                                              columns.Bound(p => p.FileNum).Title("File").Width(75);
                                              columns.Bound(p => p.Suffix).Title("Suffix").Width(50);
                                              columns.Bound(p => p.TaxYear).Title("Tax Year").Width(80);
                                              columns.Bound(p => p.qrCode).Title("QR Code").Width(125);
                                              columns.Bound(p => p.Description).Title("Description").Width(150);
                                              columns.Bound(p => p.Petitioner).Title("Petitioner").Width(225);
                                              columns.Bound(p => p.CreatedOnDate).Title("Created").Width(150).Format("{0:MM/dd/yyyy}");
                                              columns.Bound(p => p.PreparedDate).Title("Prepared").Width(150).Format("{0:MM/dd/yyyy}");
                                              columns.Bound(p => p.ServedDate).Title("Served").Width(150).Format("{0:MM/dd/yyyy}");
                                          })
                                        .Editable(editable => editable.Mode(GridEditMode.InCell))
                                        .Pageable()
                                        .Scrollable()
                                        .Navigatable()
                                        .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .Batch(true)
                                            .PageSize(20)
                                            .AutoSync(false)
                                            .ServerOperation(false)
                                            .Read(read => { read.Action("GetAllQRCodes", "Protest").Data("BuildObjectGridProtest"); })
                                            .Update("QRCodeUpdate", "Protest")
                                            .Model(model =>
                                            {
                                                model.Id(m => m.ID);
                                                model.Id(m => m.Table);
                                                model.Field(p => p.FileNum).Editable(false);
                                                model.Field(p => p.Suffix).Editable(false);
                                                model.Field(p => p.TaxYear).Editable(false);
                                                model.Field(p => p.qrCode).Editable(false);
                                                model.Field(p => p.Description).Editable(false);
                                                model.Field(p => p.Petitioner).Editable(false);
                                                model.Field(p => p.CreatedOnDate).Editable(false);
                                                model.Field(p => p.PreparedDate).Editable(true);
                                                model.Field(p => p.ServedDate).Editable(true);
                                            })
                                         )
                                    )

When I select a date from the date picker and click on the Update button, this javascript gets executed:

var grid = $("#QRCodesGrid").data("kendoGrid");

        var dataSource = grid.dataSource;

        dataSource.data().forEach(function (item) {
            item.set("PreparedDate", PassedDate);
            item.dirty = true;
        });

        grid.refresh();

When I click on the "save" button, this javascript get executed:

var grid = $("#QRCodesGrid").data("kendoGrid");
            grid.saveChanges();

And this is the code in my controller:

        public JsonResult QRCodeUpdate([DataSourceRequest]DataSourceRequest request, IEnumerable<ProtestBarcodeViewModel> dataModel)
        {
            var GridData = _repoProtest.UpdateQRCodes(dataModel);
            //return Json(GridData, JsonRequestBehavior.AllowGet);
            DataSourceResult result = GridData.ToDataSourceResult(request);
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Any idea why the data in the grid is not being sent to the controller?

Grid

asked on 11 Oct 2023

1 answer

80 views

Scheduler year view - date clicked

I use the scheduler to give the user an overview of which days in the year he has appointments.
I would like to achieve two things now:

When the user clicks on a date in the year view, I want to make an Ajax call to the server to load additional information for that day. Is there an event that is called when the user clicks on a date?
Can I prevent the detail box from opening in the year view when a date is clicked?

Scheduler

answered on 10 Oct 2023

0 answers

115 views

Detached FontIcons from Themes

As of R3 2023 release, the font icons are detached from the themes css files. If you are still using font icons, make sure to include a reference to the font icons in your applications. You can read more information about the change in the following blog post: https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes. It contains essential information about the change for all products and migration articles to svg icons.

General Discussions

asked on 06 Oct 2023

1 answer

226 views

Asp.Net project make use of Kendo UI and requires Kendo.Mvc.dll version to 2018.1.117

Hi

I am supporting the project which is written on Asp.net and using the Kendo UI and required Kendo.Mvc.dll version to 2018.1.117.

When I download the Kendo UI from your website it includes the latest dll version and I get the compile error :

Kendo.Mvc.DLL: error CS1705: Assembly 'Kendo.Mvc, Version=2018.2.620.545, Culture=neutral, PublicKeyToken=121fae78165ba3d4' uses 'System.Web.Mvc, Version=5.2.6.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'

This is listed on another forum and the solution is to make use of the last known version, which used the older version of reference dlls 2018.1.117.

https://github.com/telerik/kendo-ui-core/issues/4285

Can you please let me know how to obtain the Kendo.MVC.dll from version 2018.1.117.

Thanks

Cheers

Vikas

General Discussions

answered on 04 Oct 2023

1 answer

149 views

make drop-down lists smaller

I'm upgrading a project from 2021.2.511 to 2023.2.829 and I have a page which is extremely data heavy. Using the .Size(ComponentSize.Small) option still results in a much larger drop-down list than before.

How can I reduce the size of these drop-downs further? In the old version, they simply inherited the font-size of the parent div.

This also applies to the multiselect controls as well

DropDownList

MultiSelect

updated answer on 04 Oct 2023

1 answer

210 views

Using Listview without Ajax Datasource binding

I am trying to find a way to populate a Listview without the need to create a Read action. currently, in my Controller class, I have an action method that gets called with a query string.

Controller.cs

public IActionResult Report(string blocknumber)
{
var model = new List<Report>();
model = _maExtensionService.GetReport(blocknumber).Result.ToList();
ViewBag.BlockList = model;
return View();
}

My cshtml

Report.cshtml

@(Html.Kendo().ListView<Report>(ViewBag.BlockList as IEnumerable<Report>)
.Name("Reportgrid")
.TagName("div")
.Pageable())

I have tried to use ViewBag in different ways and also Viewdata to bind and or hold data to be used on the page. When the page loads I am not seeing data populate the Listview. Is there another way I should be doing this? Thank you for your time

ListView

answered on 03 Oct 2023

2 answers

221 views

trying to implement same as in link

HI,

I am trying to implement same as in the below link. Left side I will have some kind Post. When user clicks on post, a detail description of the post and link to post. How can i achieve that using Kendo UI.

https://www.simplyhired.com/search?q=public+health&l=indianapolis%2C+in&job=iJJy6i0E0V-4gvVMEPNpNN_jKCO99ik22-I_b_wJfFsVWYYHszfIow&t=7&sr=100

https://www.indeed.com/?vjk=ecee10295b7129db&advn=2889100715288898

Thanks

ListView

answered on 29 Sep 2023

1 answer

727 views

Grid with Radio Buttons in a column

I want to do a grid, where there is a single radio button in the column, indicating which of those rows is "selected" in the dataset for processing in the backend. So I'll have multiple rows, with their own data in it, and a radio button that when clicked will leave the radio buttons in the other rows unselected. All data needs to be pushed to the server in a submit/post form.

How would I go about doing this in a sane method? The backend is expecting an object including other data from the form including a List<MyObject> from that grid, where MyObject is similar to the following:
long Id; // database ID for this object
bool IsSelected; // whether the radio button was checked
double SomeNumberValue; // value I want to track
int Order; // displayed order

Ultimately the object the controller is receiving is similar to this:
long TicketId;
...
List<MyObject> Items; // data from my grid above
...
string OtherData;

Grid

answered on 29 Sep 2023

1 answer

528 views

Find and change the selected item in a dropdown list in a grid row.

@model DetailSelectionViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("Id")
        .DataTextField("Name")
        .Value(Model.Selected)
        .Events(e =>
        {
            e.Select("SelectionDropDownItemSelected");
            e.DataBound("SelectionDropDownDataBound");
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("GetDetailList", "DataWorksheet"))
        )
)

Above is the drop down that I have embedded within a detail grid. When a value is changed in the master grid I need to traverse through all the detail rows and change the selected item in the dropdown list in each row.

So I successfully traverse the dataitems bound to the detailgrid. The dropdown appears to be changed until you actually click on the dropdown list and the dropdown appears with the selecteditem still being the item that was selected when the grid was originally rendered. When I click on the dropdown the Read Action occurs and the data is retrieved and the dropdown is bound, but the selected value isnt set to the new value desired.

Thinking that I can traverse the dataitems and set the values there. Think I need to traverse the datagrid itself and find the dropdown list in each row and programmatically choose the selected value. I see no sample code to one traverse the datagrid that is a child when parent changed. I see no sample code to find the dropdown list in a datagrid row.

My logic starts when the datasource change event occurs for the parent grid.

Can anyone assist please. These tasks cant be that uncommon.

DropDownList

Grid

answered on 27 Sep 2023