Questions on UI for ASP.NET MVC Forum

2 answers

116 views

Here is the code to show the list, it also has a part to show detail information by expanding the record, it shows the details first time you expand the record for some seconds and then clear them , and if you expand it again this time you can see details!
wonder if something triggered to clear the details or what, as it has the details so I don't think it would be matter of reading data!
@(Html.Kendo().Grid(Model)
.Name("LSGrid")
.AutoBind(false)
.NoRecords(x => x.Template("<div class=\"k-grid-norecords-template\">No records found that match your search criteria </div>"))
.Columns(columns =>
{
columns.Bound(p => p.Name).Title("Rail Infrastructure Manager").HeaderHtmlAttributes(new { style = "font-weight: bold" });
columns.Bound(p => p.Ref).Title("Line section ID").HeaderHtmlAttributes(new { style = "font-weight: bold" });

})
.Events(e => e.DetailExpand("detailExpand"))
.ClientDetailTemplateId("template")
.Pageable( pageable => pageable.ButtonCount(10))
.Sortable()
.Scrollable(scr=>scr.Height(300))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
)
)

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Dto>()
.Name("grid_#=Id#") // template expression, to be evaluated in the master context
.Columns(columns =>
{
columns.Bound(o => o.Id).Title("State/Territory").Width(110);
columns.Bound(o => o.StartKm).Title("Start Km Point").Width(110);
columns.Bound(o => o.EndKm).Title("End Km Point").Width(110);
})
.Pageable()
.ToClientTemplate()
)
</script>

detailExpand: function (e) {
var dataItem = e.sender.dataItem(e.masterRow);
e.detailRow.find(".k-grid").data("kendoGrid").dataSource.data(dataItem.Jurisdictions);
},

Version of Kendo.MvC.dll as reference of project is 2021.2.616
Thanks

Grid

answered on 23 May 2023

1 answer

158 views

different new and edit popup editor for MVC

Can someone please help with the MVC wrapper syntax to accomplish this: https://docs.telerik.com/kendo-ui/knowledge-base/use-different-popup-editor-for-create-update

I would like to specify different template names for new and edit with two different cshtml editor template files

Grid

answered on 23 May 2023

1 answer

200 views

Grid Header doesn't resize correctly

Hi all, I'm having some trouble with grid resizing, see pics below:

Expected:

Results:
The only way around right now is to define .Width(xxx)

I've tried .Width("auto"), Custom css.

No error messages.

This project is an ASP.NET MVC project, and I'm using CDNs.

Grid's Code:

@(Html.Kendo().Grid<PDS.Web.Areas.Assets.Models.EquipmentModel>()
    .Name("EquipmentDashboardGrid")
    .Columns(col =>
    {
        col.Bound(m => m.EquipmentTypeName).Title(AssetManagement.Equipment_Type).Width(150).ClientGroupHeaderTemplate("#=value#").Hidden();
        col.Bound(m => m.SortOrder).Title(AssetManagement.Equipment_SortOrder).Width(135).Filterable(false);
        col.Bound(m => m.IsInstalled).Title(AssetManagement.Equipment_Installed).Width(130).Filterable(false).HtmlAttributes(new { style = "text-align: center" });
        col.Bound(m => m.ExtendedDesc2).Title(AssetManagement.EquipmentDashboard_Equipment).Width(250).Filterable(false);
        col.Bound(m => m.ExtendedDesc3).Title(AssetManagement.Equipment_Details).Width(250).Filterable(false);
        col.Bound(m => m.OpenInspectionCount).Title("Open Faults").Width(140).HtmlAttributes(new { style = "text-align: center" }).Sortable(true);
        col.Bound(m => m.InstalledDate).Title(AssetManagement.Equipment_Installed).Width(130).Filterable(false);
        col.Bound(m => m.ScheduledRemoval).Title(AssetManagement.EquipmentDashboard_ScheduledRemoval).Width(130).Filterable(false);
        col.Bound(m => m.RemovalDate).Title(AssetManagement.Equipment_Removal).Width(130).Filterable(false);
        col.Bound(m => m.LastSavedDateTime).Title(AssetManagement.Equipment_LastSaved).Width(175).Filterable(false).Sortable(true);
        col.Bound(m => m.CreatedDateTime).Title(AssetManagement.Equipment_Created).Width(175).Filterable(false);
        col.Bound(columns => columns.EquipmentTypeNameSort).Width(175).ClientGroupHeaderTemplate("#=value.split('_@@')[1]#").Hidden(true);
        col.Bound(m => m.EquipmentID).Title(AssetManagement.Equipment_ID).Width(145).Hidden(false);
        col.Bound(m => m.EquipmentTypePrefix).Hidden();
    })
    .Sortable()
    .Scrollable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
    .Resizable(resize => resize.Columns(true))
    .Reorderable(reorder => reorder.Columns(true))

Grid

answered on 22 May 2023

0 answers

132 views

Grid edition InCell with empty edit field

Hi,

Telerik Kendo MVC version (2023.1.425)

With my grid defined in MVC Razor like this :

@(Html.Kendo().Grid(Model.Factures)
	.Name("gridSelection")
	.Columns(c =>
	{
	    c.Bound(f => f.Id).Visible(false);
	    c.BoundDate(f => f.DateDebut);
	    c.BoundDate(f => f.DateFin);
	    c.BoundDate(f => f.DateFacturation);
	    c.Bound(f => f.NumeroActuel);
	})
	.Editable(e => e.Mode(GridEditMode.InCell))
	.Pageable()
	.Navigatable()
	.Scrollable()
	.DataSource(d => d
	    .Ajax()
	    .Batch(true)
	    .ServerOperation(false)
	    .Model(m => m.Id(p => p.Id);
	    .Update(a => a.Action("Sauvegarder", "ModifFactures", GetBindParams("Update")).Data(KendoJSCall.JSGetAntiForgeryToken))
	    .Events(e => e.RequestEnd(KendoJSCall.OnGridCheckResults))
	)
)

I got a grid, data displayed correctly.
But when I click on a cell, it display a empty text field the data not follow. On lost focus (cellClose) I got this error :

Someone have an idea ?

Thanks!

Grid

updated question on 18 May 2023

0 answers

117 views

PageSize coming through as zero

I have a grid with the DataSource property specified as:

.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Events(e=>e.Error("getPoliciesError"))
.Read(read => read.Action("Applications_Read", "MultiSearch")
.Data("getPolicyFilter")
)
)

Initially, I was not specifying PageSize at all, however, when Applications_Read was called, PageSize was always 10 (which is what I wanted) so I assumed that was the default. Then we started getting errors where it was coming through as 0. So I added the PageSize method on the initializer. Now the error where it comes through as 0 is rare, but still happens occasionally.

Has anyone encountered this? For now I can fix it by just adding code to the Applications_Read method saying if it comes through as 0, set to 10, however that will be irritating as we add many more grids with different and possibly customizable page sizes.

Grid

asked on 17 May 2023

1 answer

297 views

Using javascript to popup a webpage withing a grid

Good day all!

trying to pop up to a new webpage from a grid. I want to pop it up in a controlled manner meaning not new window or tab rather just set the parameters of the window; hence I am using a javascript to do the window popup.

Anyways here is how I am building it:

columns.Bound(p => p.Tracking).ClientTemplate(
    "<a style='text-decoration:underline' target='_blank' href='javascript:popWindow('../myHinkleyCust/HLI_Tracking.aspx?Close=1&HideMenu=1&o= #= OrderNumber # ')'>Tracking" + "</a>"
    ).HtmlAttributes(new { @class = "text-center" }).HeaderHtmlAttributes(new { @class = "fw-bold text-center" }).Width(125);

However the script doesn't build correctly and my javascript looks like this:

In other words it breaks at the first '

Any help would be much appreciated :)

Grid

answered on 15 May 2023

1 answer

708 views

The checkboxfor is not working after upgrading the kendo version from 2020.1.114 to 2022.1.119

It is my checkbox code
<div class="row">
                        <div class="form-group">
                            <label class="form-label">
                                <span><b>@ResourceManagerClass.GetResource("CCTV Available", ProjectSession.Employee.LanguageId)</b></span>&nbsp;
                                @Html.Kendo().CheckBoxFor(x => x.IsCCTVAvailable).Checked(true).Enable(false).HtmlAttributes(new { @class = "form-control", @onclick = "ManageCCTVCameraInputBox(event)" }).ToClientTemplate()
                            </label>
                            <br />
                            <label class="form-label">
                                @ResourceManagerClass.GetResource("CCTV Detail", ProjectSession.Employee.LanguageId)
                            </label>
                            <br />
                            @(Html.TextAreaFor(x => x.CCTVDetail, 3, 5, new { @class = "form-control textAreaWith" }))
                        </div>
                    </div>




It is my function

function ManageCCTVCameraInputBox(e) {
        debugger
        if (e != undefined) {
            if (e.currentTarget.checked && e.currentTarget.id == "IsCCTVAvailable") {
                $('#CCTVDetail').prop('disabled', false);
            } else {
                $('#CCTVDetail').prop('disabled', true);
            }
        } else {
            if ('@Model.IsCCTVAvailable' == "True") {
                $('#CCTVDetail').prop('disabled', false);
            }
            else {
            $('#CCTVDetail').prop('disabled', true);
            }

        }
    }

This code is working fine in kendo 2020.1.114 after upgrading the checkboxes are not working so I have added Toclienttemplate() at the end of the textbox after adding Toclienttemplate() it is showing error unexpected error<

So I didn't made any changes in script also but from where it is binding I didn't get it

Can anyone suggest me a answer or any reference link

Thanks

Checkbox

answered on 11 May 2023

2 answers

454 views

Refreshing Telerik Grid with a button after updating the DataSource

Hello folks

I got this one nearly done. I can see that it is hitting my controller in the background but the refresh just keeps spinning :)

@model myHinkleyWebApp.Models.ItemInventory

<div id="table_data"><hr /><div class="row"><div class="col-12 padding-0"><h5>Check Product Availability</h5><div class="k-d-flex k-justify-content-left" style="padding-top: 54px;"><div class="k-w-100 text-left">
                    @{Html.RenderPartial("../Shared/EditorTemplates/Item_Search_Editor");}
                </div><div class="k-w-200 text-left"><input id="btnSubmit" type="submit" style="margin-left: 25px;" value="Submit" class="btn btn-outline-primary" name="submit" /></div></div>

                @(Html.Kendo().Grid<myHinkleyWebApp.Models.ItemInventory>()
    .Name("ItemInventory")
    .Columns(columns => {
        columns.Bound(p => p.Item_no);
        columns.Bound(p => p.Family);
        columns.Bound(p => p.Status);
        columns.Bound(p => p.DNPrice);
        columns.Bound(p => p.MapPrice);
        columns.Bound(p => p.QuantityAvailable);
        columns.Bound(p => p.QuantityConfirmed);
        columns.Bound(p => p.ConfirmedPromiseDate);
        //columns.Bound(p => p.inventory_id).Title("").ClientTemplate("<a href='" + Url.Action("Delete", new { id = "#=inventory_id#", m_id = "#=customer_id#" }) + "'>Delete</a>");
        //columns.Command(command => command.Destroy()).Width(150);
    })
    .ToolBar(tools => tools.Excel())
    //.Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    //.Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
    //.Model(model => { model.Id(p => p.inventory_id); model.Field(p => p.inventory_id).DefaultValue(Guid.Empty); model.Field(p => p.customer_id).DefaultValue(Guid.Empty); })
    //.Create("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    //.Read("SearchItems_ByNameOrFamily", "ItemInventory", new {search_phrase = ViewBag.SearchPhrase})
    //.Update("Item_Create_Update", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    //.Destroy("Item_Destroy", "HLI_Customer_Specific_Inventory", new { CusNo = Model.CusNo })
    )
)
            </div><br /><br /></div></div><script>
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    $("#btnSubmit").click(function () {
        var ItemInventory = $("#ItemInventory").data("kendoGrid");
       
        $filter = new Array();
        var ITEM = $("#item_no").val();

        $.ajax({
            type: "POST",
            url: "/ItemInventory/SearchItems_ByNameOrFamily",
            data: { search_phrase: ITEM },
            dataType: "json",
            success: function (result) {
                var ds = new kendo.data.HierarchicalDataSource({
                    data: result
                });

                ItemInventory.setDataSource(ds);
                ItemInventory.read(); 
                ItemInventory.refresh(); 
            }
        });   

        //ItemInventory.dataSource.read();
        
    });

</script>
 
After I click the button the grid is just spinning here is a view of that: 

    
       So really the help I need is with this javascript here: 

$("#btnSubmit").click(function () {
        var ItemInventory = $("#ItemInventory").data("kendoGrid");
       
        $filter = new Array();
        var ITEM = $("#item_no").val();

        $.ajax({
            type: "POST",
            url: "/ItemInventory/SearchItems_ByNameOrFamily",
            data: { search_phrase: ITEM },
            dataType: "json",
            success: function (result) {
                var ds = new kendo.data.HierarchicalDataSource({
                    data: result
                });

                ItemInventory.setDataSource(ds);
                ItemInventory.read(); 
                ItemInventory.refresh(); 
            }
        });   

        //ItemInventory.dataSource.read();
        
    });
To summarize I have a auto complete text box where I am entering an item. Then i want to push the button and refresh my grid which will pass the 
item number and search for it and bring it back down in the grid! 
Any help would be greatly appreciated!

Anyways here is my front end code here

AutoComplete

Grid

TextBox

answered on 11 May 2023

1 answer

703 views

updated my project to the latest kendo version - cant reference themes and project broken.

Good day,

i Just updated kendo ui mvc project to the latest version currently out yesterday. now its broken.

before upgrade

after upgrade

General Discussions

Grid

Upload

answered on 10 May 2023

1 answer

124 views

Upload Files() config method has no effect

I'm trying to add a previously uploaded file to the list of files of the upload control using .Files() config method. Nothing shows up when I load the page. Am I missing a step? Control is configured for synchronous upload with Multiple set to false.

Upload

answered on 04 May 2023