This is a migrated thread and some comments may be shown as answers.
have problem in creating grid from a table
5 Answers 6 Views
This is a migrated thread and some comments may be shown as answers.
fereshteh
Top achievements
Rank 1
fereshteh asked on 19 Aug 2020, 07:35 AM
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?
 
 
 

5 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 20 Aug 2020, 11:32 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
fereshteh
Top achievements
Rank 1
answered on 23 Aug 2020, 05:00 AM

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>
 
 
 
0
Accepted
Petar
Telerik team
answered on 25 Aug 2020, 03:34 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
fereshteh
Top achievements
Rank 1
answered on 31 Aug 2020, 07:11 AM
thank you for your answer.
i will try to do so and will ask question again if i need     
 
 
 
0
Petar
Telerik team
answered on 31 Aug 2020, 10:54 AM

Hi Fereshteh,

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

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
fereshteh
Top achievements
Rank 1
Answers by
Petar
Telerik team
fereshteh
Top achievements
Rank 1
Share this question
or