Checkbox selection does not persist in form

[Sonali]

I am applying filters on my grid using external form window in my UI. The form window contains one checkbox and radio buttons. The checkbox and radio button works fine when I select them and submit the form. But when I reopen the form window, all other selections persist except the checkbox and radio button.

I am using kendo version 2017.1.118 and jquery version 3.0.0. The external controller is written in C#.

I have attached 3 screenshots here- opening the form window for the 1st time, applying filters and submitting the form, and reopening the window after previous submission.

(Note that the "mins" radio button is selected by default)

Here is my script where I include the dom elements of the form window:

01.<script id="logFilterWindowTemplate" type="text/x-kendo-template">
02.    <div id="popupWindow" class="k-popup-edit-form">
03.        <div class="timesection">
04.            <div id="timewindow">
05.                <div class="heading">By Time Window</div>
06.                <div class="k-edit-label"><label>Last:</label></div>
07.                <div class="k-edit-field">
08.                    <div><input class="filter lastntime-filter" id="timetext" /></div>
09.                    <div class="radiotime">
10.                        <input type="radio" id="mins" name="lastntime" value="mins" checked="checked" /><label for="mins"> mins</label>
11.                        <input type="radio" id="hours" name="lastntime" value="hours" /><label for="hours"> hours</label>
12.                        <input type="radio" id="days" name="lastntime" value="days" /><label for="days"> days</label>
13.                    </div>
14.                </div>
15.            </div>
16.            <div id="timerange">
17.                <div class="heading">By Time Range</div>
18.                <div class="k-edit-label"><label>Start Time: </label></div>
19.                <div class="k-edit-field"><input id="startdate" name="startdate" class="filter start-date-time-filter" placeholder="Select log start time" /><span class="k-invalid-msg validation-msg" id="startvalidation" data-for="startdate"></span></div>
20.                <div class="k-edit-label"><label>End Time: </label></div>
21.                <div class="k-edit-field"><input id="enddate" name="enddate" class="filter end-date-time-filter" placeholder="Select log end time" /><span class="k-invalid-msg validation-msg" id="endvalidation" data-for="enddate"></span></div>
22.            </div>
23.        </div>
24.        <div class="otherfilters">
25.            <div class="sub-filter1">
26.                <div class="k-edit-label"><label>Tenant: </label></div>
27.                <div class="k-edit-field"><span id="monitoringTenantTemplate" class="filter tenant-filter"></span></div>
28.                <div class="k-edit-label"><label>Role: </label></div>
29.                <div class="k-edit-field"><span id="monitoringRoleTemplate" class="filter role-filter"></span></div>
30.                <div class="k-edit-label"><label>User: </label></div>
31.                <div class="k-edit-field"><span id="monitoringUserTemplate" class="filter user-filter"></span></div>
32.            </div>
33.            <div class="sub-filter2">
34.                <div class="k-edit-label"><label>Level: </label></div>
35.                <div class="k-edit-field"><span id="levelTemplate" class="filter level-filter"></span></div>
36.                <div class="k-edit-label"><label>Server: </label></div>
37.                <div class="k-edit-field"><span id="serverTemplate" class="filter server-filter"></span></div>
38.                <div class="k-edit-label"><label>Thread: </label></div>
39.                <div class="k-edit-field"><input class="filter thread-filter" placeholder="20,30" width="30" /></div>
40.            </div>
41.        </div>
42.        <div class="messagesection">
43.            <div class="k-edit-label"><label>Message: </label></div>
44.            <div class="k-edit-field"><textarea class="filter message-filter" placeholder="Search log text" rows="3"></textarea><div><input type="checkbox" id="msgCheck"><label for="msgCheck">Use regex to search</label></div></div>
45.        </div>
46.        <div class="footer">
47.            <div class="k-edit-buttons k-state-default export-button">
48.                <button class="k-button k-button-icontext k-grid-export-data" id="exportbutton">Export</button>
49.            </div>
50.            <div id="alerttext"></div>
51.            <div class="k-edit-buttons k-state-default apply-clear-buttons">
52.                <button class="k-button k-button-icontext k-grid-clear-filters">Clear</button>
53.                <button class="k-button k-button-icontext k-primary k-grid-apply-filters" id="applybutton">Apply</button>
54.            </div>
55.        </div>
56.    </div>
57.</script>

[Preslav]

Hi Sonali,

Based on the provided description, I believe that your app has some JavaScript logic to handle the persistence of the inputs and it is missing similar logic for the checkbox/radio buttons. Please, correct me if I am wrong.

If this is the case, in order to persist the selection for the checkbox/radio buttons I would suggest handling the opening of the window, and based on current data, apply the current selection to them.

Please, give this a try, and let me know if you need any further assistance.

 

Regards,
Preslav
Progress Telerik