Hi, I have recently started working with Kendo and so far have been really impressed with it. The grid is quite robust and I am looking forward to obtaining a license and using the Kendo UI elements in my next project.
I have a couple of quick questions regarding the Kendio UI Grid (Web), which I was hoping someone could assist me with.
Firstly, I have been able to work with the columns pretty well so far and have been able to switch the datasource from a static html table to an array or json style data structure, which is a good step in the right direction.
For the project I am planning on using Kendo for, I need to basically display a list of contacts with the following requirements:
1) the table will be populated either by json or xml which will be output by a separate php script, this seems quite straightforward and I have done this with various libraries already so it is really just a matter of figuring out the syntax which I need to adhere to for the same protocol to work with Kendo's grid component.
2) a column containing inline action buttons must be added to the end of the table
3) a column containing checkboxes must be prepended to the table, this is basically to allow me to select multiple items. This must be able to be shown or hidden on command.
Now, I have accomplished all of the above when using a static HTML table before initializing it as a Kendo grid. However I am stumped so far in trying to accomplish the same when initializing the table using an empty div. I have tried creating a template and then setting the column's template to be equal to that, but this has resulted in either a) the html structure I put in place simply being output as a string in the column or b) the html I put in place is not being processed correctly, mainly in the case of the class names.
By the way here is an example of the code I have tried to use to set the actions template:
<script id="actions_tmpl" type="text/x-kendo-tmpl">
<div class="table_action chat_action"></div>
<div class="table_action mail_action"></div>
<div class="table_action edit_action"></div>
</script>
columns: [ { title: "", template: kendo.template($("#check_tmpl").html()) },
{ title: "Contact Name", field: "Name" },
{ title: "Company Name", field: "Company" },
{ title: "Phone", field: "Phone" },
{ title: "Email Address", field: "Email" },
{ title: "Address", field: "Address" },
{ title: "Actions", width: 78, template: kendo.template($("#actions_tmpl").html()) } ]
When you inspect the grid after it's initialization, the html exists, but the class names dont seem to come into effect for some reason?? Each div: .chat_action, .mail_action, .edit_action should display a small icon but this doesn't seem to be processed correctly as of yet.
One more issue that I am experiencing is the following, because I need to have the multiple select option implemented in the grid, there needs to be a top-level select all option but I haven't found a way so far to set the column header template or a way around that.
Any ideas would be hugely appreciated,
Thank you!
I have a couple of quick questions regarding the Kendio UI Grid (Web), which I was hoping someone could assist me with.
Firstly, I have been able to work with the columns pretty well so far and have been able to switch the datasource from a static html table to an array or json style data structure, which is a good step in the right direction.
For the project I am planning on using Kendo for, I need to basically display a list of contacts with the following requirements:
1) the table will be populated either by json or xml which will be output by a separate php script, this seems quite straightforward and I have done this with various libraries already so it is really just a matter of figuring out the syntax which I need to adhere to for the same protocol to work with Kendo's grid component.
2) a column containing inline action buttons must be added to the end of the table
3) a column containing checkboxes must be prepended to the table, this is basically to allow me to select multiple items. This must be able to be shown or hidden on command.
Now, I have accomplished all of the above when using a static HTML table before initializing it as a Kendo grid. However I am stumped so far in trying to accomplish the same when initializing the table using an empty div. I have tried creating a template and then setting the column's template to be equal to that, but this has resulted in either a) the html structure I put in place simply being output as a string in the column or b) the html I put in place is not being processed correctly, mainly in the case of the class names.
By the way here is an example of the code I have tried to use to set the actions template:
<script id="actions_tmpl" type="text/x-kendo-tmpl">
<div class="table_action chat_action"></div>
<div class="table_action mail_action"></div>
<div class="table_action edit_action"></div>
</script>
columns: [ { title: "", template: kendo.template($("#check_tmpl").html()) },
{ title: "Contact Name", field: "Name" },
{ title: "Company Name", field: "Company" },
{ title: "Phone", field: "Phone" },
{ title: "Email Address", field: "Email" },
{ title: "Address", field: "Address" },
{ title: "Actions", width: 78, template: kendo.template($("#actions_tmpl").html()) } ]
When you inspect the grid after it's initialization, the html exists, but the class names dont seem to come into effect for some reason?? Each div: .chat_action, .mail_action, .edit_action should display a small icon but this doesn't seem to be processed correctly as of yet.
One more issue that I am experiencing is the following, because I need to have the multiple select option implemented in the grid, there needs to be a top-level select all option but I haven't found a way so far to set the column header template or a way around that.
Any ideas would be hugely appreciated,
Thank you!