New to Kendo UI for jQuery? Start a free 30-day trial

SmartBox.searchSettings

configuration

Configures the initial settings for the Search mode.

smartBox.searchSettings

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    searchSettings: {
      enabled: true,
      placeholder: "Search products...",
      delay: 500
    }
  }
});
</script>

smartBox.searchSettings.delay

Number

Determines the delay in milliseconds between the user typing a new search value and the component emitting the search event.

Default: 300

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    searchSettings: {
      delay: 500
    }
  }
});
</script>

smartBox.searchSettings.enabled

Boolean

Enables or disables the Search mode in the SmartBox.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    searchSettings: {
      enabled: false
    },
    semanticSearchSettings: {
      enabled: true
    }
  }
});
</script>

smartBox.searchSettings.history

Boolean|Object

Sets the settings for the history queries in Search mode. Overrides the global smartBox.history setting for this mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    searchSettings: {
      history: {
        size: 10
      }
    }
  }
});
</script>

smartBox.searchSettings.placeholder

String

The placeholder of the input in Search mode.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "ProductName" },
    { field: "UnitPrice" }
  ],
  dataSource: {
    data: [
      { ProductName: "Tea", UnitPrice: 10 },
      { ProductName: "Coffee", UnitPrice: 15 }
    ]
  },
  search: {
    fields: [{ name: "ProductName", operator: "contains" }]
  },
  toolbar: ["smartBox"],
  smartBox: {
    searchSettings: {
      placeholder: "Type to search products..."
    }
  }
});
</script>