have problem in creating grid from a table

[fereshteh]

hello everybody.
i have a problem in my grid which was created from a table.
in my table i have a row which contains a cell with textBox . i attached an event listener to this textBox in my script tag.
my problem is that this event listener does not fire when it should but if i put this input out of the table , the event listener fires properly.
what is the problem with that? does grid removes event listeners ?
please help me. how can i fix this?

 

 

 

[Petar]

Hi Fereshteh,

Can you share the Grid's definition and the code that you use to add the event listener to the mentioned textbox?

What I assume is happening in the described scenario is that the selector that you use to bind the event listener is no more valid after the Grid is initialized or maybe you should add this event listener after the Grid is completely initialized.

I can help with the current case after having the asked above details.

Looking forward to your reply.

Regards,
Petar
Progress Telerik

[fereshteh]

hello again,
thank you so much for you answer.
in our project we need to create some tags which each of them create an element . for example we created a textbox  tag which will instantiate kendo textbox and create input base on it. in each tag we receive some attribute that will describe the way kendo widget works and we instantiate the widget in jquery $(document).ready function.

sometimes we need to bind some events to created element. for example here for textBox which was created with kendo textbox widget, we need to bind change event to the created input tag and do what ever the project needs and here is the place which we face the problem.

each time the grid is binding to the data source , it will dynamically add the element to the rows and non of eventlisteners that we binded in textbox tag will work , because this element is dynamically create.

we have alot of elements like textbox and we can not bind eventlisteners to each of them in dataBound event of grid . we are searching for a way that we can stop grid from re creating the data source and rebinding it.
i will attach both textbox and grid files to the reply.

and thank you again

textbox:

<%-- attributes --%>
<%@ attribute name="id" required="true" type="java.lang.String" %>
<%@ attribute name="onChange" required="false" type="java.lang.Object" %>

<input id="${id}" onkeyup="checkKeyUpFunction(event)"/>

<script>
    $(document).ready(function () {
        const wrapper = $("#${id}");
        const options = {
            label: 'some lable',
        };

        const input = wrapper.kendoTextBox(options).data('kendoTextBox');

        <c:if test="${not empty onChange}">
            /*
            * we use oninput event because it occurs immediately after the value of an element has changed,
            * while onchange occurs when the element loses focus, after the content has been changed.
            * */
            $("#${id}").on('input', function (e) {
                ${onChange}(e);
            })
        </c:if>

    });
</script>

grid:

<%@ attribute name="id" required="true" type="java.lang.String" %>


<table id="${id}">
    <%-- here we give all the rows that the client enterd in his table witch can be textbox , button ... --%>
    <jsp:doBody/>
</table>

<script>
    $(document).ready(function () {
        const wrapper = $("#${id}");
        const options = {
            sortable: true,
            scrollable: true,
            resizable: true,
        };

        // initialize table
        const tableData = wrapper.kendoGrid(options).data("kendoGrid");

    });
</script>

 

 

 

[Petar]

Hi Fereshteh,

Based on the provided details, I think that the only possible solution is to use the dataBound event. Every time a new row is added to the Grid, the data is synced with the DataSource. This clears the event listeners and is the reason why they have to be set back in the dataBound event's function. 

What you can do is to add a given CSS class to the different elements. You can use the CSS class to add event listeners to all elements of a given type, not one-by-one.  

Regards,
Petar
Progress Telerik

[fereshteh]

thank you for your answer.
i will try to do so and will ask question again if i need     

 

 

 

[Petar]

Hi Fereshteh,

Take your time to implement the targeted functionality and let me know if you have additional questions. 

Regards,
Petar
Progress Telerik