Questions on UI for ASP.NET MVC Forum

0 answers

80 views

Hi,

I'd like to know if it's possible to resize the View HTML popup window on the Editor widget? I've tried to hook an execute function I created in TypeScript to the ViewHtml event on the toolbar but I keep getting an undefined when trying to grab the window.

 @(Html.Kendo().EditorFor(a => Description)
                    .Tag("div")
                    .PasteCleanup(p => p
                    .MsTags(true)
                    .MsConvertLists(true)
                    .MsAllFormatting(false))
                    .Tools(tools => tools
                        .ViewHtml()
                    )
                    .Events(e => e.Execute("CareerAds.onViwHtmlExecute")))

export function onViwHtmlExecute(e) {
        console.log(e.name);
        if (e.name == "viewhtml") {
            let window = $(".k-editor-dialog").data("kendoWindow");
            console.log(window);
            window.setOptions({ width: 1000 });
        }
    }

window is always undefined and I'm struggling to figure out how to actually grab a hold of the window as I can't call window.setOptions on this for obvious reasons.

Thanks

Editor

asked on 25 Oct 2023

1 answer

89 views

Grid pager hidden when the value is updated

I'm using a k-grid with an items per page dropdown, it initially loads correctly but when a new value is selected then the pager elements are hidden.

DropDownList

Grid

Pager

answered on 25 Oct 2023

1 answer

91 views

NumericTextBox show % in format when not in edit mode

We are using a NumericTextBox in a grid for percentage complete field. Users would like to see the % when the field is just in display mode. The Format property of the NumericTextBox isnt showing the percent sign when it is set to p0.

@(Html.Kendo().NumericTextBoxFor(m => m)
    .Format("p0")
    .SelectOnFocus(true)
    .Decimals(0)
    .Min(0)
    .Max(100)
    .Spinners(true)
    .Events(e =>
    {
        e.Change("percentCompleteChange");
    })
}

You may momentarily see it right when you click the cell before it changes to the NumericTextBox editor with spinners.

Grid

NumericTextBox

answered on 24 Oct 2023

1 answer

261 views

Multiple Events for Row of Kendo Grid

I am working with a Kendo grid on my MVC webapp. The grid is bound by data passed to the View. An event currently exists to load another grid when a row is selected/clicked on. I have been tasked with adding a column that contains a checkbox based on a boolean value from the record in the dataset. Until this point, everything is working.

My question is, how can I add an event to whenever the checkbox is checked and unchecked while keeping the event fro when a row is selected? That is, if the user clicks on the row, I still want it to load the other grid based on the selected row, but if the user clicks on the checkbox in the row, I want it call a function to toggle the value and update the database (essentially call function changeFlag). As a test, I put an alert() call in the function which runs when a row is selected, but the function never fires if I check/uncheck the checkbox.

I have some exposure to MVC, but Telerick/Kendo are completely new for me. Any ideas, tips, or guidance would be greatly appreciated.

answered on 23 Oct 2023

1 answer

105 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

167 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

85 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

94 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

86 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

106 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