configuring no data template

[newKendoUser]

Hello,

I am using a kendo UI dropdownlist bound using remote data. I have followed the example using the no data template to add a new item using the text entered on search. However, I am now wondering if it is possible to customise the no data template so that when adding a new item it's possible to capture more information that just the item value i.e. the text from search fields. I would be aiming to display a few text fields and use these to insert data on the back end. I tried adding them however the text fields seem to be disabled and I'm not sure where I've gone wrong or if it's possible?

 

Many thanks

 

 

[Neli]

Hi Martina,

In order to be able to write in the input field, which is inside the 'No Data Template' you could subscribe to the filtering event of the widget.

filtering: onFiltering,

The 'No Data Template' is visible only if a non existing item is entered in the input filed of the widget. So, you need to check if the template is visible or not for the current search. In case it is, you could bind a click event to the '.k-nodata' class. Then you can focus the input filed which is inside the 'No Data Template', by using the jQuery focus() method. Below is an example of implementation in the filtering event handler.

function onFiltering(){
//check if the 'No Data Template' is currently visible
var display = $('.k-nodata').css('display');

if(display == 'table'){
closeDDL = false;
$('.k-nodata').click(function(){
$('#inp').focus();
})
}
}

By default, when an item diffrent than the DropDownlist is focused, the widget will close. So, when the additional input filed is focused, the DropDownList will close. To avoid that, you can subscribe to the close event of the widget and prevent closing. 

close:function(e){
      if(closeDDL == false){
         e.preventDefault();
    }
},

In the enclosed Dojo example, when the 'No Data Template' is displayed, and the input filed in it is focused, the DropDownList could be closed by a button click.

I hope that you will find the provided information helpful. 

Regards,
Neli
Progress Telerik

[newKendoUser]

Hi Neli,

 

thanks for your reply and example. After i posted my question we decided to collect the information for a new entry by using a modal pop up instead which appears to be working fine. Should i eve need to incorporate the data capture into the no data template i will use your example thank you.

 

Kind Regards

Martina

[roy]

Hello

I would like to piggy back on this thread.

I have the same requirment as OP but instead of one input in the nodatatemplate i need multiple. for example first name last name and a date field, maybe even a dropdown. 

Is this possible/recommended?

Thanks

Roy

[Neli]

Hi Roy,

I have replied in the support thread on the same topic. For convenience I will paste my reply here as well. I would suggest you to keep the conversation in a single thread. 

You can add the needed fields in the noDataTemplate depending on the requirements. In case you need to have a DropDownList or other widget in the noDataTemplate, you will need to initialize it after the template is visible. In order to ensure that the input element for the DropDownList is visible by the time you are trying to initialize it, you could use a setTimeout function.

function onFiltering(){
  setTimeout(function(){
    var display = $('.k-nodata').css('display');
    var ddl = $("#unitPrice").kendoDropDownList().data("kendoDropDownList");

    $('#inp').click(function(){
       $('#inp').focus();
    })
  }, 0)
}

In the linked Dojo, in the noDataTemplate there is a field which value is the same as the entered in the input field. Also there is a DropDownList through which the user can select the value of the unit price of the product. 

Regards,
Neli
Progress Telerik

[roy]

neli thanks this looks like just the ticket!

I will give it a go if i hit any road blocks ill reply here.