Questions on UI for ASP.NET MVC Forum

1 answer

134 views

Sub grid drop-down list inline edit filtered on parent grid value

I have a sub grid which uses inline editing and editor templates to present drop-down lists of available values. One of these drop-down lists has a large list of potential values which depend on a value in the parent record.

I have got this working by creating an editor template for the drop-down like this:-

@model object

@(Html.Kendo().DropDownList()
        .Name("Filter2")
        .DataValueField("Code")
        .DataTextField("Description")
        .ValuePrimitive(true)
        .OptionLabel("Select detail")
      .DataSource(src => src.Read(rd => rd.Action("GetFilter2s", "Home").Data("additionalData")))
    )

The additional data comes from a function:-

function additionalData(e) {


        return {
            detailType: detailTypev
        };
    }

The detailTypev variable is set using a function called on the beforeEdit event of the sub grid, called via a helper to pass the correct parent grid ID:-

@helper gridTemplateHelper(string uID)
{

    string f = "function(e){Subedit.call(this, e, \"" + uID + "\");}";
    @(f)

}

 function Subedit(e,gridName) {
      
       // alert(gridName);

        var row = e.sender.tbody.find('tr[data-uid="' + e.model.uid + '"]');

        if (lasteditedUID != e.model.uid)
        {
            lasteditedUID = e.model.uid;

            console.log(e.model.uid);

            e.preventDefault();  // prevent default editing
        

      

            $.ajax({
                type: "POST",
                async: true,
                contentType: "application/json;charset=utf-8",
                url: "@Url.Content("~/Home/GetDetailTypeForMetric")",
                data: '{"metricID":"' + gridName + '"}',
            dataType: "json",
            success: function (dataResult) {
                if (dataResult.Success == true) {

                    detailTypev = dataResult.DetailType;

                    
                    e.sender.editRow(row);

                    console.log(detailTypev);

                }
                else {


                    alert('An error has occurred.\n' + dataResult.Error);


                }

            },
            error: function () {

                alert('An error has occurred.');

            }
        });

        }

    }

This function checks if the row id is the same one just called (to prevent an endless loop of starting and cancelling an edit) and then prevents the edit. Then an ajax call is made to obtain the value to filter the drop-down on and the row opened for edit.

This works, but it seems a bit hacky. Is there a more elegant way of passing a filter to a drop-down list in a sub grid?

Thanks

Grid

answered on 23 Oct 2023

0 answers

205 views

Processing DataSourceRequest in controller with Kendo Grid

Hello,

I have a grid implemented using kendo ui for jquery. When I pass the information to the controller, the DataSourceRequest object is not binding the filter and sort information.

They consistently are evaluating to null when running

My controller method looks like :

public JsonResult GetMeetingList([DataSourceRequest] DataSourceRequest request) {

/// controller logic here

}

the payload sent to the server is, I'm posting the request.

take:
20
skip:
0
page:
1
pageSize:
20
filter[logic]:
and
filter[filters][0][operator]:
eq
filter[filters][0][value]:
m
filter[filters][0][field]:
meetingName

Any assistance you can provide is greatly appreciated.

Grid

asked on 19 Oct 2023

1 answer

109 views

Legacy versions for the trial package

Hi everyone, I need help with the trial plan. I'm currently using MVC version 5.2.7 in my project, but the version required for the Telerik trial version is 5.2.9. How can I get an older version?

Application

General Discussions

Installer and VS Extensions

Upload

answered on 18 Oct 2023

1 answer

111 views

Can a column be excluded from minScreenWidth after the column has been shown/hidden from column menu

Hi,

We have some grievances with screen width and column showing. The problem is that columns keep getting hidden/shown after they have been manually set hidden or not from column menu when screen width is adjusted afterwards.

@(Html.Kendo().Grid<>(TestModel)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.1).Title("Test1");
        columns.Bound(p => p.Test2).Title("Test2");
        columns.Bound(p => p.Test3).Title("Test3").MinScreenWidth(1000);
})...

Here when screen width is for example 900 and then Test3 column is set to show from column menu Test3 column would show for now. But when after changing screen width the column would hide automatically.

Is there a way to ignore minScreenWidth option for columns after they have been manually set visible or hidden from column menu?

Grid

answered on 18 Oct 2023

1 answer

110 views

Customize the Content of No-Events Scheduler Days for MVC Scheduler using timelinemonthview

I want to customise my team schedulers to identity which users have no events scheduled each day, researching I found this https://docs.telerik.com/kendo-ui/knowledge-base/customize-no-events-days-content. I cant seem to replicate this for MVC and using the TimelineMonthView. Any help would be appreciated.

This is a copy of my scheduler code..

@(Html.Kendo().Scheduler<Inspire.Web.ViewModels.Scheduler.EventViewModel>()
.Name("scheduler")
.HtmlAttributes(new { @class = "global-schedule" })
.Date(date)
.Min(date)
.Max(date)
.EventTemplate(
"<div id='event-#= Id #' class='row scheduled-event-template'>" +
@eventTemplate +
"</div>")
.Editable(e => e.Destroy(false))
.MajorTick(480)
.ShowWorkHours(true)
.WorkDayStart(9, 0, 0)
.WorkDayEnd(17, 0, 0)
.Events(e => e.Edit("onEdit")
.Resize("scheduler_OnMove")
.ResizeStart("scheduler_OnMove")
.ResizeEnd("scheduler_OnMove")
.Move("scheduler_OnMove")
.MoveStart("scheduler_OnMove")
.MoveEnd("scheduler_OnMove")
// .Remove("scheduler_OnRemove")
.DataBound("scheduler_dataBound")
.Save("scheduler_save"))

.Views(views =>
{
views.TimelineMonthView(weekView => weekView.Selected(true));
//views.CustomView("MyCustomTimelineView");
})
.Group(group => group.Resources("TeamMembers").Orientation(SchedulerGroupOrientation.Vertical))
.GroupHeaderTemplateId("groupHeaderTemplate")
.Resources(resource =>
{
resource.Add(m => m.UserId)
.Title("Team Members")
.Name("TeamMembers")
.DataTextField("FullName")
.DataValueField("Id")
.DataColorField("Color")
.Multiple(true)
.DataSource(s => s
.Read(read => read.Action("action", "controller")));

resource.Add(m => m.EventTypeId)
.Title("Event Types")
.Name("EventTypeNames")
// .Multiple(true)
.DataTextField("Text")
.DataValueField("Value1")
.DataColorField("Value2")
.DataSource(s => s
.Read(read => read.Action("action", "controller")));

})
.AutoBind(false)
.DataSource(d => d
.Events(e => e.Sync("sync_handler"))
.Model(m =>
{
m.Id(f => f.Id);
m.Field(f => f.UserIds);
m.Field(f => f.EventTypeId);
m.Field(f => f.Title);
// m.Field(f => f.Title).DefaultValue("No title");
})
.Read(r => r.Action("action", "controller", new
{
IsTermReleased = Model.IsTermReleased,
upcomingYear = Model.UpcomingYear
}))
.Create("action", "controller")
.Destroy("action", "controller")
.Update("action", "controller")
)
)

Scheduler

answered on 17 Oct 2023

1 answer

134 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

263 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

84 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

121 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

228 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