Telerik Forums
Community Forums Forum
0 answers
62 views

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!

jhonson
Top achievements
Rank 1
Iron
Iron
 asked on 30 Jan 2024
1 answer
82 views

how to set ragdgridview row numbers in the highlighted cells ,tried RowIndicatorVisibility="Visible" but not working in c#

 

Dimitar
Telerik team
 answered on 26 Jan 2024
0 answers
81 views

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

 

n/a
Top achievements
Rank 1
Iron
Iron
Iron
 updated question on 11 Jan 2024
1 answer
74 views

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.

 

 

Todor
Telerik team
 answered on 10 Jan 2024
0 answers
84 views
I want to convert a numeric to string using = CStr(Sum(Fields.CURYEXTCOST).  Example: $123,000 ->  one Hundred and twenty three thousand. 
George
Top achievements
Rank 1
 asked on 08 Jan 2024
1 answer
234 views
Here's my current code, where on the button clicks I'm opening a popup in which the user can type anything and insert it into the cursor position, it's working fine.

Problem:- When I save my text like this <p>I’m looking for the parsing to keep my deeply nested div structure but the deepest div allows inline content. For some reason, a new div gets injected though. Which I’m later removing. I’d rather not have that hack though. My name is&nbsp;<span contenteditable="false" class="uneditable" style="user-select: none; opacity: 0.5; background-color: red; padding: 2px;" id="12312381829919">rahul</span>.</p>
where rahul is a custom value inserted using a popup with properties like id & style 

but when I parse this value onMount from API, the editor doesn't keep my style and id properties and when inspected the text in the editor looks like 

<p>I’m looking for the parsing to keep my deeply nested div structure but the deepest div allows inline content. For some reason, a new div gets injected though, which I’m later removing. I’d rather not have that hack though. My name is&nbsp;<span contenteditable="false" class="uneditable" >rahul</span>.</p>

which Is without ID and style tag 

here's my code for 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>
  );
}

0 answers
68 views

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.

Krunal
Top achievements
Rank 1
 asked on 04 Jan 2024
1 answer
60 views

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.

 

Hetali
Telerik team
 answered on 03 Jan 2024
1 answer
138 views
Hello. I need some help.  I have my website where I want

 

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);
        }

Nick Iliev
Telerik team
 answered on 01 Jan 2024
1 answer
690 views

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

Radko
Telerik team
 answered on 25 Dec 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?