I'm currently fine-tuning a project that involves MySQL and Telerik, and I've hit a roadblock when it comes to understanding the nuances between CHAR and VARCHAR. Specifically, I'm interested in how these choices may impact UI development with Telerik controls. Can someone help me decode these intricacies?
Let's start by sharing a CodeIgniter model snippet and MySQL table structure:
class Customer_model extends CI_Model {
public function add_customer($customer_id, $customer_name, $email) {
$data = array(
'customer_id' => $customer_id,
'customer_name' => $customer_name,
'email' => $email
);
$this->db->insert('customers', $data);
return $this->db->insert_id();
}
}
CREATE TABLE customers (
id INT AUTO_INCREMENT PRIMARY KEY,
customer_id CHAR(8),
customer_name VARCHAR(50),
email VARCHAR(255)
);
Question 1: CHAR vs. VARCHAR in MySQL
I've opted for CHAR(8) for customer_id and VARCHAR(50) for customer_name. Could someone shed light on the primary distinctions between CHAR and VARCHAR in MySQL, particularly concerning storage efficiency and how these choices might influence Telerik controls used in UI development?
Question 2: Telerik and MySQL Integration
Considering Telerik controls in the UI development landscape, are there specific considerations when working with VARCHAR fields like customer_name or email in MySQL? How do these considerations align with best practices for Telerik UI components, and are there potential pitfalls to be mindful of during integration?
Question 3: Effective Data Handling using Telerik.
In the context of data transmission between MySQL and Telerik, as seen here, how does the decision between CHAR and VARCHAR affect the effectiveness of data retrieval or processing within Telerik controls? Are there any ideas or best practices for managing variable-length fields in Telerik UI components?
Question 4: The impact on Telerik Grids and Forms.
Finally, when developing Telerik Grids or Forms, how do the MySQL data types used effect the layout, performance, and validation? Are there any special obstacles or benefits to using CHAR or VARCHAR fields in MySQL when working with Telerik UI components?
Your expertise on these questions will be invaluable as I strive for a seamless integration of MySQL data and Telerik controls in my UI development. Thanks a bunch for sharing your insights!
how to set ragdgridview row numbers in the highlighted cells ,tried RowIndicatorVisibility="Visible" but not working in c#
Hello,
As per your documentation and example - https://docs.telerik.com/blazor-ui/components/multiselect/overview - if a user enters a text to filter the items from a multiselect list, then text will disappear as soon as the user clicks away from the multiselect box.
However, I've implemented the same functionality in my project, but for whatever reason the text still persists when I click away from the box.
Please see my code below:
<TelerikMultiSelect Data="@ClientNames"
@bind-Value="@ClientValues "
Placeholder="ALL"
Filterable="true"
ClearButton="true" AutoClose="false">
</TelerikMultiSelect>
@code{
List<string>? ClientNames { get; set; } = new() {"John", "Elena" , "Michael" };
List<string>? ClientValues { get; set; } = new();
}
Please screenshot attached (Screenshot 2024-01-11 124224.png).
The behaviour is the same in Microsoft Edge and Google Chrome.
Please advise.
Many thanks,
Astig
Hi ,
We are evaluating Telerik Reporting for our .NET 8 ERP application.
Could you please provide Win UI3 Example with Binding ObjectDataSource where Report is embedded in to the winui3 sample and bind local dto object and render also locally .
We tried from our end but unable to use binding ObjectDataSource.
We have attached sample for your reference.
import React, { useRef, useState } from "react";
import { Editor, EditorTools, EditorUtils, ProseMirror } from "@progress/kendo-react-editor";
import "@progress/kendo-theme-default/dist/all.css";
import { Button } from "@progress/kendo-react-buttons";
import { Dialog, DialogActionsBar } from "@progress/kendo-react-dialogs";
import { Input } from "components/atoms/input/Input";
export default function KendoEditor({ type, updateData, initalVal }) {
const [isDialogVisible, setDialogVisible] = useState(false);
const [customData, setCustomData] = useState("");
const [value, setValue] = useState("test");
var initialValue =
type === "header" || type === "footer" ? initalVal?.data?.content : initalVal?.content;
const editorRef = useRef(null);
const {
Bold,
Italic,
Underline,
Strikethrough,
Subscript,
Superscript,
ForeColor,
BackColor,
CleanFormatting,
AlignLeft,
AlignCenter,
AlignRight,
AlignJustify,
Indent,
Outdent,
OrderedList,
UnorderedList,
NumberedList,
BulletedList,
Undo,
Redo,
FontSize,
FontName,
FormatBlock,
Link,
Unlink,
InsertImage,
ViewHtml,
InsertTable,
InsertFile,
SelectAll,
Print,
Pdf,
TableProperties,
TableCellProperties,
AddRowBefore,
AddRowAfter,
AddColumnBefore,
AddColumnAfter,
DeleteRow,
DeleteColumn,
DeleteTable,
MergeCells,
SplitCell,
} = EditorTools;
const { Schema, EditorView, EditorState } = ProseMirror;
const nonEditable = {
name: "nonEditable",
inline: true,
group: "inline",
content: "inline+",
marks: "",
attrs: {
contenteditable: { default: null },
class: { default: null },
style: { default: null },
id: { default: null },
},
atom: true,
parseDOM: [{ tag: "span.uneditable", priority: 51 }],
toDOM: (node) => [
"span",
{
contenteditable: false,
class: "uneditable",
style:
"user-select: none; opacity: 0.5; background-color: red;text-weight:600;padding:2px;",
id: node.attrs.id,
},
0,
],
};
const toggleSidebar = (type, props) => {
return (
<Button
onClick={() => {
setDialogVisible(true);
// setActiveProperties(type);
}}
onMouseDown={(e) => e.preventDefault()}
onPointerDown={(e) => e.preventDefault()}
title="Insert Custom Data"
imageUrl="https://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png"
imageAlt="KendoReact Buttons Snowboarding icon"
/>
);
};
const handleInsertCustomData = () => {
const { view } = editorRef.current;
const schema = view.state.schema;
// get the new node from the schema
const nodeType = schema.nodes.nonEditable;
// create a new node with the custom data
const node = nodeType.createAndFill(
{
class: "uneditable", // Keep the existing classes
style: "user-select: none; opacity: 0.5; background-color: red;", // Add red background color
id: "nernksf", // Add unique ID using new Date()
},
schema.text(customData)
);
// Insert the new node
EditorUtils.insertNode(view, node);
view.focus();
// Close the dialog
setDialogVisible(false);
setCustomData("");
};
console.log(initialValue);
const onMount = (event) => {
const { viewProps } = event;
const { plugins, schema } = viewProps.state;
let nodes = schema.spec.nodes.addToEnd("nonEditable", nonEditable);
const mySchema = new Schema({ nodes: nodes, marks: schema.spec.marks });
console.log(type, initialValue);
const doc = EditorUtils.createDocument(mySchema, initialValue ? initialValue : "");
return new EditorView(
{ mount: event.dom },
{
...event.viewProps,
state: EditorState.create({ doc, plugins }),
}
);
};
//console.log(value);
const handleEditorChange = (event) => {
const data = event?.html;
//console.log(data);
setValue(data);
if (type === "header" || type === "footer") {
updateData({ visible: initalVal?.visible, data: { ...initalVal?.data, data } });
} else {
updateData({ ...initalVal, data });
}
};
return (
<div>
<Editor
ref={editorRef}
onMount={onMount}
onChange={handleEditorChange}
tools={[
[Bold, Italic, Underline, Strikethrough],
[Subscript, Superscript],
ForeColor,
BackColor,
[CleanFormatting],
[AlignLeft, AlignCenter, AlignRight, AlignJustify],
[Indent, Outdent],
[OrderedList, UnorderedList],
[NumberedList, BulletedList],
FontSize,
FontName,
FormatBlock,
[SelectAll],
[Undo, Redo],
[Link, Unlink, InsertImage, ViewHtml],
[InsertTable, TableProperties, TableCellProperties],
[AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
[DeleteRow, DeleteColumn, DeleteTable],
[MergeCells, SplitCell],
[
(props) => toggleSidebar("dataSourceProperties", props),
(props) => toggleSidebar("formulaProperties", props),
(props) => toggleSidebar("letterProperties", props),
(props) => toggleSidebar("conditionBuilder", props),
],
]}
contentStyle={{
height: 320,
}}
//value={initialValue}
/>
{isDialogVisible && (
<Dialog
title="Insert Custom Data"
onClose={() => setDialogVisible(false)}
visible={isDialogVisible}
>
<div>
<Input
type="text"
value={customData}
onChange={(e) => setCustomData(e.target.value)}
label="Enter name"
/>
<DialogActionsBar>
<button
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
onClick={() => setDialogVisible(false)}
>
No
</button>
<button
className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
onClick={handleInsertCustomData}
>
Yes
</button>
</DialogActionsBar>
</div>
</Dialog>
)}
</div>
);
}
Our multiselect widget in all Telerik reports stopped working after we updated following packages
API :
1] Telerik.Reporting : 14.2.20.916 -> 16.2.22.1109
2] Telerik.Reporting.OpenXmlRendering : 14.2.20.916 -> 16.2.22.1109
3] Telerik.Reporting.Services.AspNetCore : 14.2.20.916 -> 16.2.22.1109
UI :
1] Telerik.UI.for.AspNet.Core : 2021.1.119 -> 2022.3.1109
We have migrated our reports to the new schema version as suggested (http://schemas.telerik.com/reporting/2022/3.1) we have tried creating fresh report with the newer schema version in Telerik report designer.
Issue :
After updating in all our Telerik reports with multi select widget when we try to select the available options by selecting them, they get selected (Background of options turns blue) but the validation message for the widget still indicates no options has been selected, and the report preview button doesn't get unlocked indicating that it's expecting some option to be selected.
The only way to get it working is to use the buttons above the widget for "select-all", and the button for "clear-selection" also seems to be working, but that is not feasible at all for our use case. It renders the purpose of multi-select tool completely useless.
The navbar and sidebar in telerik documentation pages keeps hiding after few seconds from opening/reloading a page.
Attached a screenshot showing the missing navbar and sidebar.
Hi, I need help. I'm using fiddlercore and C# I need to change a response on a website but it doesn't work.
In this case, I have a link that has texts in the response, such as text1 changing to text2,
but nothing happens, the site opens without the changes. Am I missing something? Thank you very much.
private void FiddlerApplication_AfterSessionComplete(Session oSession)
{
if (oSession.fullUrl.Contains("https:www.mysite/change.json") && oSession.HTTPMethodIs("GET"))
{
oSession.bBufferResponse = true;
oSession.utilDecodeResponse();
AppendTextRichBox2(GetSessionDetails(oSession));
ModifyResponse(oSession, "text1", "text2");
}
}
private void ModifyResponse(Session oSession, string oldValue, string newValue)
{
string responseBody = oSession.GetResponseBodyAsString();
responseBody = responseBody.Replace(oldValue, newValue);
oSession.utilSetResponseBody(responseBody);
}
Hello,
I would like to apply server-side pagination and display data in a grid. I am using Blazor and data is being fetched via an api request.
Already implemented:
Each api request brings a "requestResponse" which will contain "totalPages" and the "data" (the records). The "totalPages" is calculated on the server side based on the total number of records and page size. The page size is always 50 in this case. So e.g. if there are 400 records in a collection, the request will fetch: "totalPages" = 8, data = 50 records.
What I want to achieve:
The final result should be a grid which is pageable. The grid should display number of pages equal to the "totalPages" from the api response. Each click on a page should trigger another api request (ideally fire an event that calls a method that takes as an argument the page number).
I saw documentation about OnRead event: https://docs.telerik.com/blazor-ui/components/grid/manual-operations but I couldn't make it work as when the component is initialized, the event doesn't fire. I cannot fire it within OnInitializedAsync() as I would need to pass GridReadEventArgs to the event and that is not possible in OnInitializedAsync() when the component is first initialized. If I'm not using GridReadEventArgs as argument, then how would the grid know the "totalPages"?
Am I going in the right direction with OnRead? Is there another way, perhaps trigger the api within a PageChanged event? Then how would I be able to set the desired number of pages?
Any help would be appreciated.
Thank you.
Kind regards,
Astig