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

Ai.aiAssistant.promptTextArea

configuration

Configuration options for the TextArea component used in the AI Assistant prompt view.

ai.aiAssistant.promptTextArea

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
   columns: [{ field: "name" }],
   dataSource: [{ name: "Jane Doe" }],
   toolbar: ["aiAssistant"],
   ai: {
     aiAssistant: {
       promptTextArea: {
         resize: "vertical",
         rows: 4,
         placeholder: "Ask AI about your grid data...",
         fillMode: "outline",
         rounded: "medium",
         size: "large",
         maxLength: 1000,
         label: {
           content: "Grid AI Prompt",
         }
       }
     },
     service: "https://demos.telerik.com/service/v2/ai/grid/smart-state"
   }
});
</script>

ai.aiAssistant.promptTextArea.fillMode

String

Specifies the fill mode of the textarea. Available options: "solid", "outline", "flat", "none".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        fillMode: "outline"
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.inputMode

String

Specifies the input mode attribute for mobile keyboards.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        inputMode: "text"
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.label

Object

Specifies the label configuration for the textarea.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        label: {
          content: "Enter your prompt",
          floating: true
        }
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.maxLength

Number

Specifies the maximum number of characters allowed in the textarea.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        maxLength: 500
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.overflow

String

Specifies the overflow behavior. Available options: "auto", "hidden", "visible", "scroll".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        overflow: "auto"
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.placeholder

String

Specifies the placeholder text for the textarea.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        placeholder: "Type your AI prompt here..."
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.resize

String

Specifies the resize behavior. Available options: "none", "both", "horizontal", "vertical".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        resize: "vertical"
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.rounded

String

Specifies the border radius. Available options: "small", "medium", "large", "full", "none".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        rounded: "medium"
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.rows

Number

Specifies the number of visible text lines.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        rows: 4
      }
    }
  }
});
</script>

ai.aiAssistant.promptTextArea.size

String

Specifies the size of the component. Available options: "small", "medium", "large", "none".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  ai: {
    aiAssistant: {
      promptTextArea: {
        size: "large"
      }
    }
  }
});
</script>

Related Members