Tag Archives: jquery

Kendo autocomplete box and server filtering

Standard

Hello all,
A very simple thought today but as it took me some time to figure it out, I thought that little post could make you spare some.

I used the autocomplete box from kendo UI bound with a remote datasource. Based on the user input, server returned a set of matching words, processing quotes for example for a google-like exact search. But the autocomplete box kept filtering client-side too, looking for quotes in the results set and filtering all my server results…. I finally figured out that setting “serverFiltering = true” on the datasource itself stopped the client-side filtering !
Happy coding !

var dataSource = new kendo.data.DataSource({
      transport: {
         read: { url : "http....",
        },
      success: function (response) {
         o.success(response);
       }
 },
 serverFiltering: true, //set it to true to stop client-side filtering
 total: 5, //five results only
 optionLabel: "Type in a...",
 });

myAutoComplete.kendoAutoComplete({
 dataSource: dataSource,
 dataTextField: "toto",
 dataValueField: "titi",
 …
 )} ;

Dynamic web forms with jquery

Standard

Let’s say you want to enable the user to create his own forms with the fields and the questions of his choice. The user should just choose the fields  from a list  and those fields should be sortable, draggable, deletable so that he can move them, change their order by simply dragging and dropping objects.
Well, see google documents, add new form, something like this, no ? well I can show you the basics with jquery to build dynamic forms.

To sum up, we want a sortable dynamic list of fields. First of all, you need to inject html in the webpage areas you define. Then we will enable sorting and dropping and throwing away.

First, here’s the list from which the user chooses the fields :

<select id="fieldtoadd" style="float:left">
<option value="">add new field...</option>
<option value="text">text</option>
<option value="textarea">multiple line text</option>
<option value="radiobutton">multiple choice</option>
<option value="checkbox">checkbox</option>
<option value="uploadfile">upload a file</option>
</select>

here’s the <div> element where to inject the fields :


<div id="fieldslist" style="float:left"></div>

Read the rest of this entry