Products

[Markov]

Hi Joko,

You can use this:

<script>
import “smart-webcomponents/source/modules/smart.splitter.js”;
import {onMount} from ‘svelte’;
onMount(() => {
const splitter = document.querySelector(“#splitter”);
splitter.innerHTML = `
<smart-splitter id=”splitter” live-resize>
<smart-splitter-item id=”item0″>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for its pattern of dark vertical stripes on reddish-orange fur with a lighter underside.</p>
</smart-splitter-item>
<smart-splitter-item id=”item1″>
<h2>BENGAL TIGER</h2>
<img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Tiger_in_Ranthambhore.jpg/220px-Tiger_in_Ranthambhore.jpg&#8221; />
<p>The Bengal tiger’s coat is yellow to light orange, with stripes ranging from dark brown to black; the belly and the interior parts of the limbs are white, and the tail is orange with black rings.</p>
<p>Males have an average total length of 270 to 310 cm (110 to 120 in) including the tail, while females measure 240 to 265 cm (94 to 104 in) on average. The tail is typically 85 to 110 cm</p>
</smart-splitter-item>
</smart-splitter>`;
})

</script>

<h1>Welcome to SvelteKit</h1>
<div id=”splitter”>
</div>

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Yes, you can use scrollTop and scrollLeft properties of the gantt chart.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Please, take a look at https://www.htmlelements.com/docs/svelte/ for svelte integration.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi matdjon,

No, this is not possible. A column may have only 1 data field.

Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Lukas,

It is available only in my post 🙂

[Markov]

The guide below details how to implement Custom Window Editor for Scheduler in Blazor.

In the cases when you need to create additional custom fields, which are not supported by the default Editing Window, Smart.Scheduler allows you to replace it with an entirely custom one, which will handle the update/insert operations instead.

Create Scheduler and Custom Window
First, we need to create our Scheduler. The code below setups a basic Scheduler with multiple Events:

<Scheduler @ref=scheduler DataSource="dataSource" View="SchedulerViewType.Month"></Scheduler>

@code{
    Scheduler scheduler;
    List<SchedulerDataSource> dataSource = new List<SchedulerDataSource>()
        {
            new SchedulerDataSource()
            {
                Id = "1",
                Label = "Google AdWords Strategy",
                DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+1, 10, 0, 0),
                DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day +1, 11, 30, 0),
                BackgroundColor = "#E67C73",

            },
            new SchedulerDataSource()
            {
                Id = "3",
                Label = "New Brochures",
                DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+3, 12, 0, 0),
                DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+3, 15, 0, 0),
                BackgroundColor = "#8E24AA"
            },
            new SchedulerDataSource()
            {
                Id = "3",
                Label = "Brochure Design Review",
                DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+6, 15, 30, 0),
                DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+6, 18, 15, 0),
            },
    };

}
Then we should add the HTML of our Custom Editing Window. The Window in this demo features a Text Input, DateTime Pickers, DropDownList inputs and a Star Rating Input:

<Window @ref="window" Modal="true">
    <h3>@heading</h3>
    <table>
        <tr>
            <td>
                <div class="smart-control">
                    <label>Label<br /></label>
                    <Input @ref="labelInput" Placeholder="Event label"></Input>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <div class="smart-control">
                    <label>Date Start</label>
                    <DateTimePicker @ref="dateStartInput" FormatString="D" CalendarButton="true"
                                            DropDownAppendTo="body"></DateTimePicker>
                </div>
            </td>
            <td>
                <div class="smart-control">
                    <label>Date End</label>
                    <DateTimePicker @ref="dateEndInput" FormatString="D" CalendarButton="true"
                                    DropDownAppendTo="body"></DateTimePicker>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="smart-control">
                    <label>Department</label>
                    <DropDownList @ref="departmentInput">
                        <ListItem Value="sales">Sales</ListItem>
                        <ListItem Value="marketing">Marketing</ListItem>
                        <ListItem Value="finance">Finance</ListItem>
                        <ListItem Value="technical">IT</ListItem>
                    </DropDownList>
                </div>
            </td>
            <td>
                <div class="smart-control">
                    <label>Office Location</label>
                    <DropDownList @ref="locationInput">
                        <ListItem Value="new_york">New York</ListItem>
                        <ListItem Value="los_angeles">Los Angeles</ListItem>
                        <ListItem Value="chicago">Chicago</ListItem>
                        <ListItem Value="houston">Houston</ListItem>
                    </DropDownList>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="smart-control">
                    <label>Background Color</label>
                    <ColorInput @ref="backgroundColorInput"></ColorInput>
                </div>
            </td>
            <td>
                <div class="smart-control">
                    <label>Rating </label>
                    <Rating @ref="ratingInput"></Rating>
                </div>
            </td>
        </tr>
    </table>
    <div style="margin-top: 20px;">
        <Button @ref="cancelButton" OnClick="CloseWindow">Cancel</Button>
        <Button @ref="saveButton" OnClick="SaveChanges">Save</Button>
    </div>
</Window>

@code{
    Scheduler scheduler;
    Window window;
    string heading = "Create an Event";
    Input labelInput;
    DateTimePicker dateStartInput, dateEndInput;
    DropDownList departmentInput, locationInput;
    ColorInput backgroundColorInput;
    Rating ratingInput;
    Button cancelButton, saveButton;

    bool editing = false; int editingIndex = -1;
}
Finally, add the CSS to format the content inside:

smart-window {
    --smart-window-default-height: 450px;
    --smart-window-default-width: 600px;
    --smart-window-header-height: 35px;
}

.smart-window .smart-content-container>.smart-content {
    align-items: baseline;
}

#repeat-editor {
    margin-top: 10px;
}

#repeat-editors>div {
    margin-top: 10px;
}

#repeat-editors smart-date-time-picker {
    width: 100px;
}

#repeat-editors smart-number-input {
    width: 100px;
}

smart-radio-button {
    margin-left: 10px;
    padding: 5px;
}

.radio-button-wrapper {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.submit-btn {
    margin-left: 15px;
    --smart-background: #005b98;
    --smart-background-color: white;
}

table td {
    padding-top: 10px;
}
Replace Default Window
In order to replace the default Window, we will need to use onReady and the OnEditDialogOpening event.

In the OnReady Event, use JSInterop to call the "preventWindowOpening" JS function, which we will later create.
@inject IJSRuntime JS

<Scheduler @ref=scheduler DataSource="dataSource" View="SchedulerViewType.Month" OnEditDialogOpening="OnEditDialogOpening" OnReady="OnReady"></Scheduler>

@code{
    ...
    private void OnReady(Scheduler scheduler)
    {
        JS.InvokeVoidAsync("preventWindowOpening");
    }
}
In the _Host.cshtml, add the "preventWindowOpening" JS function, which will simply prevent the default window from opening:
<script>
    (function (global) {
        global.preventWindowOpening = function () {
            const scheduler = document.querySelector('smart-scheduler');
            scheduler.addEventListener('editDialogOpening', function(event){
                event.preventDefault();
            });
        }
    })(window);
</script>
Next, attach the "OnEditDialogOpening" event to the Scheduler.
The function will first check whether the users is attempting to insert a new Event or modify an existing one. If the operation is insertion, it will open an empty Editing Window.
If it is editing, the function will find the index of the selected Event and open the Editing Window with the Event's data filled-in.
private async void OnEditDialogOpening(Event ev){
    SchedulerEditDialogOpeningEventDetail args = ev["Detail"];
    Dictionary<string, string> item = args.Item.ToObject<Dictionary<string, string>>();
    editing = item.ContainsKey("label");
    if (editing)
    {
        FillWindow(item);
        var events = await scheduler.GetDataSourceAsync();
        //find the index of the item in the events array using the id property
        for(int i = 0; i < events.Count(); i++)
        {
            //System.Text.Json.JsonElement currentEvent = events[i];
            SchedulerDataSource currentEvent = events.ElementAt(i) as SchedulerDataSource;
            if (item["id"] == currentEvent.Id)
            {
                editingIndex = i;
            }
        }
    }
    else
    {
        ResetWindow(item["dateStart"], item["dateEnd"]);
    }
    window.Open();

}
Custom Window
Repeating Events
Smart.Scheduler Events can also be set as repeating. For example, a birthday reminder every year or a work meeting every Monday morning. Now we will add the editors, which will allow the user to set the repeating options.

function repeatChange(event) {
    const checked = event.detail.value;
    const element = document.querySelector('#editing-window "#repeat-editor"');
    if (checked) {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
    setRepeatEditor("daily");
}

function repeatFreqChange(event) {
    let selectedValue = event.detail.value.toLowerCase();
    this.setRepeatEditor(selectedValue);
}

function setRepeatEditor(type) {
    const window = document.querySelector('#editing-window "#repeat-editor"');
    window.innerHTML = "";
    const repeatFreqEditor = document.createElement("div");
    const repeatFreqLabel = document.createElement("div");
    let word;
    switch (type) {
        case "hourly":
            word = "hours";
            break;
        case "daily":
            word = "days";
            break;
        case "weekly":
            word = "weeks";
            break;
        case "monthly":
            word = "months";
            break;
        case "yearly":
            word = "years";
            break;
    }
    repeatFreqLabel.innerHTML = <code>Repeat every (${word})</code>;
    repeatFreqEditor.appendChild(repeatFreqLabel);
    const repeatInterval = document.createElement("smart-number-input");
    repeatInterval.id = "repeatInterval";
    repeatInterval.min = 1;
    repeatFreqEditor.appendChild(repeatInterval);

    window.appendChild(repeatFreqEditor);

    if (type === "weekly" || type === "monthly" || type === "yearly") {
        const repeatOnEditor = document.createElement("div");
        const repeatOnLabel = document.createElement("label");
        repeatOnLabel.innerHTML = "Repeat on ";
        repeatOnEditor.appendChild(repeatOnLabel);
        if (type === "weekly") {
            const repeatOn = document.createElement("smart-button-group");
            repeatOn.id = "repeatOn";
            repeatOn["selectionMode"] = "zeroOrMany";
            repeatOn.dataSource = [{
                    label: "Mon",
                    value: "1"
                },
                {
                    label: "Tue",
                    value: "2"
                },
                {
                    label: "Wed",
                    value: "3"
                },
                {
                    label: "Thu",
                    value: "4"
                },
                {
                    label: "Fri",
                    value: "5"
                },
                {
                    label: "Sat",
                    value: "6"
                },
                {
                    label: "Sun",
                    value: "0"
                }
            ];
            repeatOnEditor.appendChild(repeatOn);
        } else if (type === "monthly") {
            const repeatOn = document.createElement("smart-number-input");
            repeatOn.id = "repeatOn";
            repeatOn.min = 1;
            repeatOn.max = 31;
            repeatOnEditor.appendChild(repeatOn);
        } else if (type === "yearly") {
            repeatOnEditor.style.display = "flex";
            repeatOnEditor.style.alignItems = "center";
            const repeatOn = document.createElement("smart-drop-down-list");
            repeatOn.id = "repeatOn";
            repeatOn.dataSource = [{
                    label: "January",
                    value: "0"
                },
                {
                    label: "February",
                    value: "1"
                },
                {
                    label: "March",
                    value: "2"
                },
                {
                    label: "April",
                    value: "3"
                },
                {
                    label: "May",
                    value: "4"
                },
                {
                    label: "June",
                    value: "5"
                },
                {
                    label: "July",
                    value: "6"
                },
                {
                    label: "August",
                    value: "7"
                },
                {
                    label: "September",
                    value: "8"
                },
                {
                    label: "October",
                    value: "9"
                },
                {
                    label: "November",
                    value: "10"
                },
                {
                    label: "December",
                    value: "11"
                }
            ];
            repeatOnEditor.appendChild(repeatOn);
            const repeatOnDay = document.createElement("smart-number-input");
            repeatOnDay.id = "repeatOnDay";
            repeatOnDay.min = 1;
            repeatOnDay.max = 31;
            repeatOnEditor.appendChild(repeatOnDay);
        }

        window.appendChild(repeatOnEditor);
    }
    const endRepeatEditor = document.createElement("div");
    const endRepeatLabel = document.createElement("div");
    endRepeatLabel.innerHTML = "End repeat";
    endRepeatEditor.appendChild(endRepeatLabel);
    const neverWrapper = document.createElement("div");
    neverWrapper.classList.add("radio-button-wrapper");
    neverWrapper.innerHTML =
        "<smart-radio-button group-name='repeat' id='never' checked>Never</smart-radio-button>";
    endRepeatEditor.appendChild(neverWrapper);
    const onWrapper = document.createElement("div");
    onWrapper.classList.add("radio-button-wrapper");
    onWrapper.innerHTML =
        

<smart-radio-button group-name=’repeat’ id=’on’>On</smart-radio-button>
<smart-date-time-picker id=’dateOfRepeat’ formatString=”dd MM yyyy” calendar-button drop-down-append-to=”body” disabled></smart-date-time-picker>`;
endRepeatEditor.appendChild(onWrapper);
const afterWrapper = document.createElement(“div”);
afterWrapper.classList.add(“radio-button-wrapper”);
afterWrapper.innerHTML =
“<smart-radio-button group-name=’repeat’ id=’after’>After</smart-radio-button><smart-number-input id=’repeatAfter’ min=’1′ disabled></smart-number-input>occurrences”;
endRepeatEditor.appendChild(afterWrapper);
Array.from(endRepeatEditor.querySelectorAll(“smart-radio-button”)).forEach(
(button) => {
button.addEventListener(“checkValue”, (event) => {
const target = event.target;
//disable the other inputs
if (target.id === “never”) {
(onWrapper.querySelector(
“smart-date-time-picker”
)).disabled = true;
(afterWrapper.querySelector(
“smart-number-input”
)).disabled = true;
} else if (target.id === “on”) {
(onWrapper.querySelector(
“smart-date-time-picker”
)).disabled = false;
(afterWrapper.querySelector(
“smart-number-input”
)).disabled = true;
} else if (target.id === “after”) {
(onWrapper.querySelector(
“smart-date-time-picker”
)).disabled = true;
(afterWrapper.querySelector(
“smart-number-input”
)).disabled = false;
}
});
}
);
window.appendChild(endRepeatEditor);
}
Repeat Editors
Reset & Fill Window Content
The ResetWindow function is called when the user attempts to insert a new Event. It empties all fields and sets the date inputs to the time slot selected by the user:

private void ResetWindow(string dateStart, string dateEnd)
{
heading = “Create an Event”;
labelInput.Value = “”;
dateStartInput.SetDate(DateTime.ParseExact(dateStart, “MM/dd/yyyy HH:mm:ss”, null));
dateEndInput.SetDate(DateTime.ParseExact(dateEnd, “MM/dd/yyyy HH:mm:ss”, null));
departmentInput.SelectedIndexes = new int[] { 0 };
locationInput.SelectedIndexes = new int[] { 0 };
backgroundColorInput.Value = “”;
ratingInput.Value = 1;
}
The FillWindow receives a scheduler event and fill the event’s data inside the Winow Fields:

private void FillWindow(Dictionary schedulerEvent)
{
heading = “Edit an Event”;
labelInput.Value = schedulerEvent[“label”];
dateStartInput.SetDate(DateTime.ParseExact(schedulerEvent[“dateStart”], “MM/dd/yyyy HH:mm:ss”, null));
dateEndInput.SetDate(DateTime.ParseExact(schedulerEvent[“dateEnd”], “MM/dd/yyyy HH:mm:ss”, null));
departmentInput.Select(schedulerEvent.GetValueOrDefault(“department”, “sales”));
locationInput.Select(schedulerEvent.GetValueOrDefault(“location”, “new_york”));
backgroundColorInput.Value = schedulerEvent.GetValueOrDefault(“backgroundColor”, “”);
ratingInput.Value = int.Parse(schedulerEvent.GetValueOrDefault(“rating”, “1”));
}
Fill Window Content
Save Changes
Finally, we need to add the saveChanges() function which will be called when the user clicks the ‘Save’ button.
The function should take the values from the editors and cheched whether it should modify an existing Event or create a new one.

private async void SaveChanges()
{
object eventObject = new {
id = (DateTime.Now).ToString(“yyyyMMddHHmmssffff”),
label = labelInput.Value,
dateStart = await dateStartInput.GetDate(),
dateEnd = await dateEndInput.GetDate(),
department = departmentInput.SelectedValues[0],
location = locationInput.SelectedValues[0],
backgroundColor = backgroundColorInput.Value,
rating = ratingInput.Value
};
if (editing && editingIndex > -1)
{
scheduler.UpdateEvent(editingIndex, eventObject);
}
else
{
scheduler.AddEvent(eventObject);
}
window.Close();
}
Now, the custom Editing Window is complete. The full code is below:
@page “/”
@inject IJSRuntime JS
<PageTitle>Scheduler</PageTitle>

<Scheduler @ref=scheduler DataSource=”dataSource” View=”SchedulerViewType.Month” OnEditDialogOpening=”OnEditDialogOpening” OnReady=”OnReady”></Scheduler>

<Window @ref=”window” Modal=”true”>
<h3>@heading</h3>
<table>
<tr>
<td>
<div class=”smart-control”>
<label>Label<br /></label>
<Input @ref=”labelInput” Placeholder=”Event label”></Input>
</div>
</td>
<td></td>
</tr>
<tr>
<td>
<div class=”smart-control”>
<label>Date Start</label>
<DateTimePicker @ref=”dateStartInput” FormatString=”D” CalendarButton=”true”
DropDownAppendTo=”body”></DateTimePicker>
</div>
</td>
<td>
<div class=”smart-control”>
<label>Date End</label>
<DateTimePicker @ref=”dateEndInput” FormatString=”D” CalendarButton=”true”
DropDownAppendTo=”body”></DateTimePicker>
</div>
</td>
</tr>
<tr>
<td>
<div class=”smart-control”>
<label>Department</label>
<DropDownList @ref=”departmentInput”>
<ListItem Value=”sales”>Sales</ListItem>
<ListItem Value=”marketing”>Marketing</ListItem>
<ListItem Value=”finance”>Finance</ListItem>
<ListItem Value=”technical”>IT</ListItem>
</DropDownList>
</div>
</td>
<td>
<div class=”smart-control”>
<label>Office Location</label>
<DropDownList @ref=”locationInput”>
<ListItem Value=”new_york”>New York</ListItem>
<ListItem Value=”los_angeles”>Los Angeles</ListItem>
<ListItem Value=”chicago”>Chicago</ListItem>
<ListItem Value=”houston”>Houston</ListItem>
</DropDownList>
</div>
</td>
</tr>
<tr>
<td>
<div class=”smart-control”>
<label>Background Color</label>
<ColorInput @ref=”backgroundColorInput”></ColorInput>
</div>
</td>
<td>
<div class=”smart-control”>
<label>Rating </label>
<Rating @ref=”ratingInput”></Rating>
</div>
</td>
</tr>
</table>
<div style=”margin-top: 20px;”>
<Button @ref=”cancelButton” OnClick=”CloseWindow”>Cancel</Button>
<Button @ref=”saveButton” OnClick=”SaveChanges”>Save</Button>
</div>
</Window>

@code{
Scheduler scheduler;
Window window;
string heading = “Create an Event”;
Input labelInput;
DateTimePicker dateStartInput, dateEndInput;
DropDownList departmentInput, locationInput;
ColorInput backgroundColorInput;
Rating ratingInput;
Button cancelButton, saveButton;

bool editing = false; int editingIndex = -1;

List<SchedulerDataSource> dataSource = new List<SchedulerDataSource>()
{
new SchedulerDataSource()
{
Id = “1”,
Label = “Google AdWords Strategy”,
DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+1, 10, 0, 0),
DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day +1, 11, 30, 0),
BackgroundColor = “#E67C73”,

},
new SchedulerDataSource()
{
Id = “3”,
Label = “New Brochures”,
DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+3, 12, 0, 0),
DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+3, 15, 0, 0),
BackgroundColor = “#8E24AA”
},
new SchedulerDataSource()
{
Id = “3”,
Label = “Brochure Design Review”,
DateStart = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+6, 15, 30, 0),
DateEnd = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day+6, 18, 15, 0),
},
};

private void ResetWindow(string dateStart, string dateEnd)
{
heading = “Create an Event”;
labelInput.Value = “”;
dateStartInput.SetDate(DateTime.ParseExact(dateStart, “MM/dd/yyyy HH:mm:ss”, null));
dateEndInput.SetDate(DateTime.ParseExact(dateEnd, “MM/dd/yyyy HH:mm:ss”, null));
departmentInput.SelectedIndexes = new int[] { 0 };
locationInput.SelectedIndexes = new int[] { 0 };
backgroundColorInput.Value = “”;
ratingInput.Value = 1;
}

private void FillWindow(Dictionary<string, string> schedulerEvent)
{
heading = “Edit an Event”;
labelInput.Value = schedulerEvent[“label”];
dateStartInput.SetDate(DateTime.ParseExact(schedulerEvent[“dateStart”], “MM/dd/yyyy HH:mm:ss”, null));
dateEndInput.SetDate(DateTime.ParseExact(schedulerEvent[“dateEnd”], “MM/dd/yyyy HH:mm:ss”, null));
departmentInput.Select(schedulerEvent.GetValueOrDefault(“department”, “sales”));
locationInput.Select(schedulerEvent.GetValueOrDefault(“location”, “new_york”));
backgroundColorInput.Value = schedulerEvent.GetValueOrDefault(“backgroundColor”, “”);
ratingInput.Value = int.Parse(schedulerEvent.GetValueOrDefault(“rating”, “1”));
}

private async void OnEditDialogOpening(Event ev){
SchedulerEditDialogOpeningEventDetail args = ev[“Detail”];
Dictionary<string, string> item = args.Item.ToObject<Dictionary<string, string>>();
editing = item.ContainsKey(“label”);
if (editing)
{
FillWindow(item);
var events = await scheduler.GetDataSourceAsync();
//find the index of the item in the events array using the id property
for(int i = 0; i < events.Count(); i++)
{
//System.Text.Json.JsonElement currentEvent = events[i];
SchedulerDataSource currentEvent = events.ElementAt(i) as SchedulerDataSource;
if (item[“id”] == currentEvent.Id)
{
editingIndex = i;
}
}
}
else
{
ResetWindow(item[“dateStart”], item[“dateEnd”]);
}
window.Open();

}

private void OnReady(Scheduler scheduler)
{
JS.InvokeVoidAsync(“replaceWindow”);
}

private void CloseWindow()
{
window.Close();
}

private async void SaveChanges()
{
object eventObject = new {
id = (DateTime.Now).ToString(“yyyyMMddHHmmssffff”),
label = labelInput.Value,
dateStart = await dateStartInput.GetDate(),
dateEnd = await dateEndInput.GetDate(),
department = departmentInput.SelectedValues[0],
location = locationInput.SelectedValues[0],
backgroundColor = backgroundColorInput.Value,
rating = ratingInput.Value
};
if (editing && editingIndex > -1)
{
scheduler.UpdateEvent(editingIndex, eventObject);
}
else
{
scheduler.AddEvent(eventObject);
}
window.Close();
}

}

<style>
smart-window {
–smart-window-default-height: 450px;
–smart-window-default-width: 600px;
–smart-window-header-height: 35px;
}

.smart-window .smart-content-container>.smart-content {
align-items: baseline;
}

#repeat-editor {
margin-top: 10px;
}

#repeat-editors>div {
margin-top: 10px;
}

#repeat-editors smart-date-time-picker {
width: 100px;
}

#repeat-editors smart-number-input {
width: 100px;
}

smart-radio-button {
margin-left: 10px;
padding: 5px;
}

.radio-button-wrapper {
display: flex;
align-items: center;
margin-top: 5px;
}

.submit-btn {
margin-left: 15px;
–smart-background: #005b98;
–smart-background-color: white;
}

table td {
padding-top: 10px;
}
</style>`

[Markov]

Hi,

Does your theme include a style for a calendar?

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

In case you have an active subscription, please send an email to support@jqwidgets.com and we can take a look at the provided code.

Best Regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can look at https://www.htmlelements.com/demos/grid/editing-cell/. The quantity and unit price columns are with number edit.

Regards,
Markov

[Markov]

Hi,

The Grid has onLoad callback. In page onload it is not necessary the Grid to be rendered as you may have code to render it dynamically. Page onload only ensures that a given script is loaded.

Regards,
Markov

[Markov]

Hi,

This may happen when you call this method before the Grid is rendered. Make sure you call it after the Grid is created.

Regards,
Markov

[Markov]

Hi,

At runtime you can also get/set it.

[Markov]

Hi,

The width of the calendar can be customized with CSS by setting its width property and the width property determines how many calendars will be displayed per row. The Calendar internally uses Flex layout so, if you send us a more detailed sample how you use it, we can customize it per your requirements.

Regards,
Markov

https://www.htmlelements.com/

[Markov]

Hi,

Not exactly, the templateElement can be used for pointing to a HTMLTemplate which could be a complex DOM structure, too, but with formatFunction, you have more control over what’s displayed as you can customize it dynamically and easily.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

The refresh method refreshes the table which means that it re-renders all DOM elements in it and layouts them. If it just an utility method which someone may need to use if there’s a visual glitch in some scenario not covered by us internally.

Best regards,
Markov

https://www.htmlelements.com/

[Author]

Posts