kendo textbox Error: Unable to get property 'value' of undefined or null reference

[Nico]

Hello,

I have been trying to get the value from a simple kendo textbox but keep getting this error: "Unable to get property 'value' of undefined or null reference" upon entry the web page. Below is my jquery and kendo html helper code in my Mvc View:

 

<script>

    function filterGrid() {
        var startDate = $("#StartDate").data("kendoDatePicker"),
            applType = $("#applTypeDropDownList").data("kendoDropDownList"),
            allColumns = $("#allCols").data("kendoTextBox");                                   <==== problem here

        var filter = {
            startDate: startDate.value(),
            applType: applType.value(),
            allColumns: allColumns.value()                                 <==== problem here
        };

        return filter;
    }

</script>

 

<div class="container-fluid">

        <div>
            @(Html.Kendo().TextBox()
                    .Name("allCols")
                    .Deferred()
            )
        </div>

</div>

 

As you can see, I also have other widgets such as datepicker and dropdownlist and they both working fine except the textbox widget. 

 

Please advise. Thank you.

[Eyup]

Hi Dominic,

The TextBox actually does not have a Kendo specific instance like the numeric textbox:
https://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox

You can simply use jQuery or plain JavaScript to achieve this requirement:

    <button onclick="getValue();">Get TextBox Value</button>
    <script>
        function getValue() {
            var allColumns = $("#allCols").val();
            alert(allColumns);
        }
    </script>

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[Nico]

Thanks Eyup!

[Nico]

I still cannot get this text field "allColumns" to work with the grid. 

 

The function to get filter values from user:

    function filterGrid() {
        var startDate = $("#StartDate").data("kendoDatePicker"),
            applType = $("#applTypeDropDownList").data("kendoDropDownList"),
            allColumns = $("#allCols").val();   

        var filter = {
            startDate: startDate.value(),
            applType: applType.value(),
            allColumns: allColumns     
        };

        return filter;
    }

 

Here is how it pulls data based on the function above:

      .Read(read => read.Action("DoRead", "WebSite_Applications").Data("filterGrid")).Model(model =>
                                    {
                                        model.Id(p => p.ApplCode);
                                        model.Field(p => p.Startdate).Editable(false);
                                    })

 

Other search fields work fine with filter data except the text field "allColumns". The Read function doesn't respond to the text field "allColumns" after entering the search string in the text field and exit it. I think the text field is always empty to it that's why.

 

Please advise. Thank you.

[Nico]

I tried to add events to the textbox but it didn't accept the events property.

 

            @(Html.Kendo().TextBox()
                            .Name("allCols")
                            .Events(e => e.Change("onCriteriaChange"))
            )

[Eyup]

Hello Dominic,

 

Could you modify the following live dojo sample to demonstrate the issue and send the updated link back to us for further investigation?

https://dojo.telerik.com/ekezamaR

 

This will enable us to replicate the issue you described locally and provide more accurate and precise solutions.

 

Regards,
Eyup
Progress Telerik

[Eric]

Thank you!