Making dynamic views

Hi webix team,

In this snippet id "mainContainer" having the 3 rows . Each row having 4 columns and column contain the key values.

In short I want 3 rows with 4 columns. Now I am getting only one row with 4 columns.
Please provide me the solution.

Thanks in advance.


  • Thank you so much intregal

  • edited January 5

    Hi intregal,

    Here in 1 row I am having 16 columns now.
    But I want like 1 row having 4 columns(i.e 1 row 4 columns with 4 rows =16 data).
    Means structure will be like each row having 4 columns and 4 rows. If data is of 17 there will be 4 columns with 5 rows.(This structure is of single row.. repeated for other 2 rows as well)
    Also each row(maincontainer rows having header)


  • Also each row(maincontainer rows having header)

  • Hello!
    Please, clarify your use-case
    According to the current description (assuming that each 'cell' has only text content), the implementation looks like dataview. Maybe you can try to implement it by such widgets as DataLayout or datatable.

  • @Nastja

    My data is not fix. according to the data I want to create the row(now its 3 in my code). Also inside each row column count is fix(i.e. 4 in my code) but the rows inside each row will depends again on data.(suppose I am having 20 data in 1 row. It should get divide like 4 columns * 5 rows, 2nd row having 25 data then it will like 4 columns * 7 rows).Like this.

  • Can you please show a sample of your data?
    As dataview has "xCount" ( propery, the reason to use a separate template for each record is not clear.
    Check the snippet, please:

  • @ Nastja

    I did it using dataview like this

    But I made it static.I want it dynamic.
    Also in single row I am having year and ratings key:vlaue (i.e.2) but I want 4 key:value pair and 5th key:value pair will go to next line like that.
    How I can do it dynamically?


  • Hi webix team,
    In this snippet I want the dynamic view because now I make it like arr[0],arr[1] like this.It should be dynamic.
    Also In single row I want only 2 column(or maybe 4).If its more than 2 it will go to next line.

    Please reply me I am stuck on it.

    Any help will be appreciated.
    Thanks in advance

  • Unfortunately, using onAfterRender is not the best choice in this situation.
    As 'template' can be a function, it already suits for the described scenario. Here is an example.
    If the returned string has to be created dynamically, you can iterate through keys and add a needed piece of html to this string depending on a key index or value.

  • Hi,
    My case is thar my keys are not fix. Sometimes i will get 2 keys 7 keys maybe 15 keys in that case i can not do like arr(1) or arr(2). It should be dynamic

  • There's no ready to use solution for building a complex dynamic template.

    The main pattern, i.e. usage of

       return "result"

    is the same as described above.

    The only task here is the algorithm which will return a proper string from any dataset, but again, unfortunately, we have no ready example for it.

  • But is it posible?

  • Please provide me the example for same.
    I tried but not able to attach to the template.

  • You can make your template dynamic by implementing a bit more complex logic there: But still the solution for achieving this structure within dataview cells is the template.

  • edited January 9

    Thank you so much.
    Working perfect.

  • edited January 22

    Hi webix tam,
    In this snippet I want the webix buttons after webix_strong class which will be inline..
    I make the comment in snippet

  • As a solution, you can extend the template with clickable areas styled as Webix buttons (via webixbutton class). It is the recommended solution for such kind of tasks.
    Please check the following example:

  • Thanks listopad. I will try it.

  • edited January 25

    Hi webix team,

    In this snippet I want to do like this

    1. If I am dragging any title of dataview (e.g LaFerrari,MyProject1,MyProject2,etc) It should be droppable on tree (id="treeId").At that time I want the Id of that title which is in (LaFerrari having id in json project1,MyProject1 id is project2 in json, etc)

    2. If suppose in my json I am having references key.. references having the array and I put the comment in snippet.

    3. On edit button click I want the Name,Description, and References values to edit it. maybe in popup

    I am stuck on this functionanlity. Please reply me.
    Any help will be appreciable.


  • edited January 26

    1. You need to use Drag-and-Drop Mode.
    drag: true - enables drag-n-drop within the component, allows taking items into its other instances and different components on the page; multiselect: true - the selection of several items regardless of their hierarchy

    1. It's possible to add other references by creating an array and using loop template as you made in sample with two columns
    2. There is better to use Data Binding and setCursor to select an item for editing.

    Example with binding:

  • Hi Webix team,

    In this snippet I am having the references array. So I need to show it in list view against the key References. Also References position always should be to the right side.
    For one object my height is 150, but if there is more content its not showing the scroll. e.g. now I can not see id, iid1,iid2 data

  • Hi Webix team,

    In this snippet if I am clicking on more button It giving the message but if I am pressing the enter button still it showing the message. I don't want any event on enter key for more button.


  • edited March 12

    Hi webix team,

    Please reply me.
    I am stuck and it gives so weird output.


  • This is native HTML functionality, when space/enter is pressed while a button element has focus, browser will trigger mouse-click action for the button ( and here the Webix starts and handles mouse-click )

    As far as I can see, the only solution will be to replace input element with some other tag.

  • Thanks maksim :)

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!