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

Hello,

In Page load, I need to populate date field from database. I am trying to do using ASP.NET MVC Kendo().textbox(). Please share some sample code or advice.

Thanks in advance.

Thanks,

I have set  a java script method

validatePhone

to be called for customeValidator against any change on a RadMaskedTextBox.  But its never gets called.

Can you please help whats wrong here?

<td>
                <telerik:RadMaskedTextBox ID="sNumberPhoneMasked" runat="server" SelectionOnFocus="CaretToBeginning" 
                    Text='<%# SafeEval(Container, "DataItem.Test") %>' ValidationGroup="PhoneValidationGroup1" ></telerik:RadMaskedTextBox>
                <asp:Label ID="sNumberPhoneMaskedValidationIndicator" runat="server" class="WizardValidationRequired_Person vAdjustment" >*</asp:Label>
                    
                
                <asp:CustomValidator runat="server" ID="sNumberPhoneMaskedValidator" ValidationGroup="PhoneValidationGroup1" ErrorMessage="Phone Number is required."
                             SetFocusOnError="true"   ControlToValidate="sNumberPhoneMasked" ClientValidationFunction="validatePhone"></asp:CustomValidator>
                    <asp:ValidatorCalloutExtender ID="sNumberPhoneMaskedPopupValidator" runat="server" 
        TargetControlID="sNumberPhoneMaskedValidator" Width="200px" />

            </td>
 
<td align="right" colspan="2">
    <asp:Button ID="sPhoneGridEditFormSubmit" CssClass="button-blue" Text='<%# (Container is GridEditFormInsertItem) ? "Add" : "Update" %>'
        runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "Add" : "Update" %>' ValidationGroup="PhoneValidationGroup1"
        CausesValidation="True"></asp:Button>&nbsp;
    <asp:Button ID="sCancel" CssClass="button-blue" Text="Discard" runat="server" CausesValidation="False"
        CommandName="Cancel"></asp:Button>
</td>
 
<script type="text/javascript">
function validatePhone(Source, args) {
    debugger;
    alert('test');
    args.IsValid=false;
    
}
</script>

At some point the telerik textbox has become a full widget and it generates a script.

I have a form where I need to have an input and it should look like the telerik textbox. I do not want to use the span / input template I just need to have the input alone.

I know I can define my own styling but I would need just a telerik class on the input that if I change something to be applied to all telerik textboxes.

I am having trouble with font sizing with the UI for Telerik. I posted before about setting font sizes for the datepicker and dropdowns which now work great.

Now I am having trouble setting the font size for the textbox control with floating label.

<div class="demo-section k-content">
    <h4>Set value</h4>
    @(Html.Kendo().TextBox()
        .Name("textbox")
        .Placeholder("Name")
        .Label(label => label
            .Content("Name")
            .Floating(true)
        )
        .HtmlAttributes(new { style = "width: 100%" })
    )

    <style>
        .k-floating-label-container {
            width: 100%;
        }
    </style>
</div>

I have modified CSS but the floating label looks incorrect when font size is adjusted through CSS. I would like size 14px font for both the input text and the floating label. How can I achieve this? Currently increasing the font size of the floating label makes the label not "float" far enough to the top, and obscures the textbox. Any help is appreciated.

Here is some examples of the extremely small text occuring on all UI inputs...

Textbox with filtering:

Datepicker:

This is really becoming a problem.

I still need a fix for the floating textbox, but I am wondering if there is a more universal fix that can be applied in the universal CSS. Please help, this is my only complaint with the UI so far.

I am losing time trying to adjust font sizes.

Hey Guys,

We upgraded our website to Telerik.UI.for.AspNet.Core 2021.3.1207. There are a lot pages in the site where an additional kendoDialog is loaded via ajax. In the dialog - there are textboxes with duplicated IDs (on purpose) as in the outer screen (for example id="Reference").

The issue is that - the texbox in the dialog is not initialized - it is rendered as simple <input /> (without  parent span) and the value in the outer screen became the same as the value from the dialog. My guess is that in version 2021.3.1207 all textboxes are initialized when the page is loaded (maybe for permanence) and they are refereed via ID.

Outer page:

@Html.Kendo().TextBoxFor(model => model.Reference).HtmlAttributes(new { @class = "form-control-x", @onchange = "window.page1.onFormChange();" })

kendoDialog - textbox not rendered with kendo html tags and styling

@Html.Kendo().TextBoxFor(model => model.Reference).HtmlAttributes(new { @class = "", @onchange = "window.page2.onFormChange();" })

Outer page after the content in kendoDialog is loaded - the value for Reference is the one from the dialog.

We have a lot of screens build in the same way. I know that this is not valid HTML, but we do not use <form action="something"></form> to save the fields. We are using ajax and all inputs are refereed by containderId and controld.

As this is blocking issue, any advice will be appreciated.
Thanks in advance.

I have API hosted on asp net core, through Swagger and Postman it works just fine, but when I try to access it through Jquery Grid of Kendo it only reads data but doesn't add nor delete.

Can you tell me what am I doing wrong here?

My  .NET Controllers:

 [HttpDelete]
        public async Task<ActionResult> Delete(Guid id)
        {
            await _mediator.Send(new DeleteProductCommand.Command { Id = id });
            return NoContent();
        }

 [HttpPost]
        [ProducesResponseType(StatusCodes.Status200OK)]
        public async Task<ActionResult<ProductResponse>> Create([FromBody] CreateProductCommand command) => await _mediator.Send(command);

My Jquery Grid

<script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "https://localhost:44393/api",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: crudServiceBaseUrl + "/Product",
                                    dataType: "json"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Product/Create",
                                    contentType: "application/json; charset=utf-8",
                                    dataType: "json",
                                    type: "POST"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Product/Delete",
                                    type: "DELETE",
                                    contentType: 'application/json; charset=utf-8',
                                    dataType: 'json'
                                },
                                parameterMap: function (options, operation) {
                                    if (operation !== "read" && options) {
                                        return kendo.stringify(options);
                                    }
                                }

                            },

                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "id",
                                    fields: {
                                        id: { editable: false, nullable: false },
                                        productName: { type: "string", editable: true },
                                        productSKU: { type: "string", editable: true },
                                        productType: { type: "string", editable: true },
                                    }
                                }
                            }
                        });



                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        columnMenu: {
                            filterable: false
                        },

                        height: 680,
                        editable: "inline",
                        pageable: true,
                        sortable: true,
                        navigatable: true,
                        resizable: true,
                        reorderable: true,
                        groupable: true,
                        filterable: true,
                        dataBound: onDataBound,
                        toolbar: ["excel", "pdf", "create", "search", "save", "delete"],
                        columns: [{
                            selectable: true,
                            width: 75,
                            attributes: {
                                "class": "checkbox-align",
                            },
                            headerAttributes: {
                                "class": "checkbox-align",
                            }
                        }, {
                            field: "productName",
                            title: "Product Name",
                            template: "productName",
                            width: 300
                        }, {
                            field: "productSKU",
                            title: "productSKU",
                            width: 105
                        }, {
                            field: "productType",
                            title: "productType",
                            width: 130,
                        }, {
                            field: "id",
                            title: "id",
                            width: 105
                        },
                            { command: "destroy", title: "Action", width: 120 }],
                    });
                });          


                function onDataBound(e) {


                } ;

</script>

Hello,

I have a kendo editable grid with one column only.  this column adds a textbox  rowwhen a button named 'Add' is pressed.  If no text is put into the box and the user leaves the textbox an empty row is created.

We had allowed 'required' model validation to trigger the kendo inbuilt validation tooltip however it is not compliant with our UX standards. 

I therefore would like to destroy the textbox on the mouse leave if the textbox is empty. 

I have tried and failed to find and trigger the mouse leave event.

Here is my grid.

 @(Html.Kendo().Grid(Model.MyModelProps)
                    .Name("myeditabletable")
                    .ToolBar(tools => tools.Create().IconClass("fas fa-plus").Text("Add").HtmlAttributes( new { @class = "btn btn-primary whiteText" }))
                    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
                    .Columns(columns =>
                    {
                        columns.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +
                                                                         "<input type='hidden' name='MyModelProps[#= index(data)#].Id' value='#= Id #' />"
                            );

                        columns.Bound(p => p.MyModelProp).Title("<b>Synonym</b>").Editable("myeditabletable").ClientTemplate("#= Name #" +
                                                                                                                                  "<input type='hidden' name='MyModelProps[#= index(data)#].Name' value='#= Name #' />"
                            );

                        columns.Command(command => command.Destroy().Text(" ")
                    })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                        })
                        .ServerOperation(false)
                    )
                    )

Hi guys,

I have a kendo window which I have controls inside the window.

The idea is to keydown what the user enters to the folderName label which creates and shows the user the name of the folder that will be created in the network drive.

see attached screen shot

so far i have this code below. But the logic is not yet correct

    function formatStringfoldername(UploadedDT) {
        debugger;
        


        var MineName = $("#SFolder").val();
        var scan_PersonsScan = $("#scan_PersonsScan").data("kendoMultiSelect").dataItems();
        var SiteCode = $("#SiteCode").data("kendoMultiColumnComboBox").dataItem();
        var descriptionMineName = SiteCode.MineName;
        var scan_EquipmentDetails = $("#scan_EquipmentDetails").data("kendoMultiSelect").dataItems();
        var scan_Projects = $("#scan_Projects").data("kendoMultiSelect").dataItems();
      
        if (descriptionMineName ==="") {
          //  var result = "N:\\Backup\\" + UploadedDT + " " + descriptionMineName;
        }
        if (MineName === "") {
       //     var result = "N:\\Backup\\" + UploadedDT + " " + descriptionMineName + " " + MineName;
        }
        else if (scan_Projects.length > 0) {
           
            $("#FolderPathstructurechange").text(`N:\\Backup\\  ${UploadedDT}   ${MineName}  ${scan_PersonsScan[0].Initials}  ${scan_Projects[0].Project.Project1}`);
        }
        else if (scan_EquipmentDetails.length > 0)
        {
            $("#FolderPathstructurechange").text(`N:\\Backup\\  ${UploadedDT}   ${MineName}  ${scan_PersonsScan[0].Initials}  ${scan_Projects[0].Project.Project1}`);
        }
       

       
       
        //var result = "N:\\Backup\\" + UploadedDT + " " + scan_PersonsScan[0].Initials + MineName;
      //  $("#FolderPathstructurechange").text($.validator.format("N:\\Backup\\" + " {0} , I'm {1} years old", [UploadedDT, "23"]));
    }

function change() {
        debugger;
        var DateScanned = $("#DateScanned").data("kendoDatePicker");
        $("#DateScanned").attr("disabled", "disabled");
        var value = DateScanned.value();
        var UploadedDT = kendo.toString(value, "yyyy-MM-dd");

        formatStringfoldername(UploadedDT);
       
    }

  @(Html.Kendo().DatePicker().Name("DateScanned") 
                                                       .Events(e =>
                                                                    {
                                                                        e.Change("change");
                                                                    }).Format("dd/MM/yyyy").ToClientTemplate())

     <div class="row">

                            @Html.Label("Short Folder Description:")
                            <div class="row mt-3">

                            </div>
                            @Html.Kendo().TextBox().Name("SFolder").HtmlAttributes(new { onInput = "formatStringfoldername();" }).ToClientTemplate()
                        </div>

any help will be appreciated.

kind regards

Tony