Search code examples
pythonpython-2.7kivykivy-language

content dynamically set in one boxlayout


test.py

import kivy

kivy.require('1.9.0')  # replace with your current kivy version !
import sqlite3 as lite
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import BooleanProperty, ListProperty, ObjectProperty,NumericProperty
from kivy.lang import Builder
from kivy.uix.dropdown import DropDown

from kivy.uix.recycleview.views import RecycleDataViewBehavior
from kivy.uix.button import Button
from kivy.uix.recyclegridlayout import RecycleGridLayout
from kivy.uix.behaviors import FocusBehavior
from kivy.uix.recycleview.layout import LayoutSelectionBehavior
from kivy.uix.popup import Popup
from kivy.core.window import Window
Window.maximize()
from kivy.clock import Clock
from kivy.uix.treeview import TreeView, TreeViewLabel, TreeViewNode


class EditStatePopup(Popup):
    col_data = ListProperty(["?", "?", "?"])
    index = NumericProperty(0)

    def __init__(self, obj, **kwargs):
        super(EditStatePopup, self).__init__(**kwargs)
        self.index = obj.index
        self.col_data[0] = obj.rv_data[self.index]["StateId"]
        self.col_data[1] = obj.rv_data[self.index]["StateName"]
        self.col_data[2] = obj.rv_data[self.index]["StateCode"]

    def package_changes(self, stateName, stateCode):
        self.col_data[1] = stateName
        self.col_data[2] = stateCode


class SelectableRecycleGridLayout(FocusBehavior, LayoutSelectionBehavior,
                                  RecycleGridLayout):
    ''' Adds selection and focus behaviour to the view. '''


class SelectableButton(RecycleDataViewBehavior, Button):
    ''' Add selection support to the Button '''
    index = None
    selected = BooleanProperty(False)
    selectable = BooleanProperty(True)
    rv_data = ObjectProperty(None)
    start_point = NumericProperty(0)

    def __init__(self, **kwargs):
        super(SelectableButton, self).__init__(**kwargs)
        Clock.schedule_interval(self.update, .0005)


    def update(self, *args):
        self.text = self.rv_data[self.index][self.key]

    def refresh_view_attrs(self, rv, index, data):
        ''' Catch and handle the view changes '''
        self.index = index
        return super(SelectableButton, self).refresh_view_attrs(rv, index, data)

    def on_touch_down(self, touch):
        ''' Add selection on touch down '''
        if super(SelectableButton, self).on_touch_down(touch):
            return True
        if self.collide_point(*touch.pos) and self.selectable:
            return self.parent.select_with_touch(self.index, touch)

    def apply_selection(self, rv, index, is_selected):
        self.selected = is_selected
        self.rv_data = rv.data



    def on_press(self):
        popup = EditStatePopup(self)
        popup.open()


class RV(BoxLayout):
    data_items = ListProperty([])
    col1 = ListProperty()
    col2 = ListProperty()
    col3 = ListProperty()

    def __init__(self, **kwargs):
        super(RV, self).__init__(**kwargs)
        self.get_states()

    def update(self):
        self.col1 = [{'StateId': str(x[0]), 'StateName': x[1], 'StateCode': str(x[2]), 'key': 'StateId'} for x in self.data_items]
        self.col2 = [{'StateId': str(x[0]), 'StateName': x[1], 'StateCode': str(x[2]), 'key': 'StateName'} for x in self.data_items]
        self.col3 = [{'StateId': str(x[0]), 'StateName': x[1], 'StateCode': str(x[2]), 'key': 'StateCode'} for x in self.data_items]


    def get_states(self):

        rows = [(1, 'Andaman and Nicobar Islands ', 35), (2, 'Andhra Pradesh', 28), (3, 'Arunachal Pradesh', 12), (4, 'Assam', 18), (5, 'Bihar', 10), (6, 'Chandigarh', 4), (7, 'Chattisgarh', 22)]

        i = 0
        for row in rows:
            self.data_items.append([row[0], row[1], row[2], i])
            i += 1
        print(self.data_items)
        self.update()

def populate_tree_view(tree_view, parent, node):
    if parent is None:
        tree_node = tree_view.add_node(TreeViewLabel(text=node['node_id'],
                                                     is_open=True))
    else:
        tree_node = tree_view.add_node(TreeViewLabel(text=node['node_id'],
                                                     is_open=True), parent)

    for child_node in node['children']:
        populate_tree_view(tree_view, tree_node, child_node)

rows = [(1, 'Andaman and Nicobar Islands ', 35), (2, 'Andhra Pradesh', 28), (3, 'Arunachal Pradesh', 12), (4, 'Assam', 18), (5, 'Bihar', 10), (6, 'Chandigarh', 4), (7, 'Chattisgarh', 22)]

tree = []

for r in rows:
    tree.append({'node_id': r[1], 'children': []})



class TreeviewGroup(Popup):
    treeview = ObjectProperty(None)
    tv = ObjectProperty(None)
    h = NumericProperty(0)
    #ti = ObjectProperty()

    def __init__(self, **kwargs):
        super(TreeviewGroup, self).__init__(**kwargs)
        self.tv = TreeView(root_options=dict(text=""),
                       hide_root=False,
                       indent_level=4)
        for branch in tree:
            populate_tree_view(self.tv, None, branch)
        #self.remove_widgets()
        self.treeview.add_widget(self.tv)
        Clock.schedule_once(self.update, 1)

    def remove_widgets(self):
        for child in [child for child in self.treeview.children]:
            self.treeview.remove_widget(child)

    def update(self, *args):
        self.h = len([child for child in self.tv.children]) * 24

class EditCityPopup(Popup):
    col_data = ListProperty(["?", "?", "?", "?", "?"])
    index = NumericProperty(0)
    popup = ObjectProperty(None)

    def __init__(self, obj, **kwargs):
        super(EditCityPopup, self).__init__(**kwargs)
        self.index = obj.index
        self.col_data[0] = obj.rv_data_city[self.index]["cityId"]
        self.col_data[1] = obj.rv_data_city[self.index]["stateId"]
        self.col_data[2] = obj.rv_data_city[self.index]["cityName"]
        self.col_data[3] = obj.rv_data_city[self.index]["shortName"]
        self.col_data[4] = obj.rv_data_city[self.index]["pinCode"]

    def package_changes(self, stateId, cityName, shortName, pinCode):
        self.col_data[1] = stateId
        self.col_data[2] = cityName
        self.col_data[3] = shortName
        self.col_data[4] = pinCode

    def display_states_treeview(self, instance):
        if len(instance.text) > 0:
            if self.popup is None:
                self.popup = TreeviewGroup()
            self.popup.open()

class SelectableButtonCity(RecycleDataViewBehavior, Button):
    ''' Add selection support to the Button '''
    index = None
    selected = BooleanProperty(False)
    selectable = BooleanProperty(True)
    rv_data_city = ObjectProperty(None)
    start_point = NumericProperty(0)

    def __init__(self, **kwargs):
        super(SelectableButtonCity, self).__init__(**kwargs)
        Clock.schedule_interval(self.update, .0005)


    def update(self, *args):
        self.text = self.rv_data_city[self.index][self.key]

    def refresh_view_attrs(self, rv, index, data):
        ''' Catch and handle the view changes '''
        self.index = index
        return super(SelectableButtonCity, self).refresh_view_attrs(rv, index, data)

    def on_touch_down(self, touch):
        ''' Add selection on touch down '''
        if super(SelectableButtonCity, self).on_touch_down(touch):
            return True
        if self.collide_point(*touch.pos) and self.selectable:
            return self.parent.select_with_touch(self.index, touch)

    def apply_selection(self, rv, index, is_selected):
        ''' Respond to the selection of items in the view. '''
        self.selected = is_selected
        self.rv_data_city = rv.data


    def on_press(self):
        popup = EditCityPopup(self)
        popup.open()

class RVCITY(BoxLayout):
    data_items_city = ListProperty([])
    col1 = ListProperty()
    col2 = ListProperty()
    col3 = ListProperty()
    col4 = ListProperty()
    col5 = ListProperty()

    def __init__(self, **kwargs):
        super(RVCITY, self).__init__(**kwargs)
        self.get_cities()

    def update(self):
        self.col1 = [{'cityId': str(x[0]), 'stateId': str(x[1]), 'cityName': str(x[2]), 'shortName': str(x[3]), 'pinCode': str(x[4]), 'key': 'cityId'} for x in self.data_items_city]
        self.col2 = [{'cityId': str(x[0]), 'stateId': str(x[1]), 'cityName': str(x[2]), 'shortName': str(x[3]), 'pinCode': str(x[4]), 'key': 'stateId'} for x in self.data_items_city]
        self.col3 = [{'cityId': str(x[0]), 'stateId': str(x[1]), 'cityName': str(x[2]), 'shortName': str(x[3]), 'pinCode': str(x[4]), 'key': 'cityName'} for x in self.data_items_city]
        self.col4 = [{'cityId': str(x[0]), 'stateId': str(x[1]), 'cityName': str(x[2]), 'shortName': str(x[3]), 'pinCode': str(x[4]), 'key': 'shortName'} for x in self.data_items_city]
        self.col5 = [{'cityId': str(x[0]), 'stateId': str(x[1]), 'cityName': str(x[2]), 'shortName': str(x[3]), 'pinCode': str(x[4]), 'key': 'pinCode'} for x in self.data_items_city]


    def get_cities(self):

        rows = [(1, 'Bihar', 'Patna', 'Patna', 801108), (2, 'Andaman and Nicobar Islands ', 'Port Blair', 'PB', 744101), (3, 'Assam', 'Guwahati', 'Guwahati', 781001), (4, 'Assam', 'Nagaon', 'Nagaon', 782120), (5, 'Chandigarh', 'Amritsar', 'Amritsar', 143502), (6, 'Andhra Pradesh', 'Visakhapatnam', 'VP', 531219), (7, 'Chattisgarh', 'Bilaspur', 'Bilaspur', 495001)]
        i = 0
        for row in rows:
            self.data_items_city.append([row[0], row[1], row[2], row[3], row[4], i])
            i += 1
        print(self.data_items_city)
        self.update()

class EditAreaPopup(Popup):
    col_data = ListProperty(["?", "?", "?"])
    index = NumericProperty(0)
    popup = ObjectProperty(None)

    def __init__(self, obj, **kwargs):
        super(EditAreaPopup, self).__init__(**kwargs)
        self.index = obj.index
        self.col_data[0] = obj.rv_data_area[self.index]["areaId"]
        self.col_data[1] = obj.rv_data_area[self.index]["cityId"]
        self.col_data[2] = obj.rv_data_area[self.index]["areaName"]

    def package_changes(self, stateId, cityName):
        self.col_data[1] = stateId
        self.col_data[2] = cityName


    def display_city_treeview(self, instance):
        if len(instance.text) > 0:
            if self.popup is None:
                self.popup = TreeviewGroup()
            #self.popup.filter(instance.text)
            self.popup.open()


class SelectableButtonArea(RecycleDataViewBehavior, Button):
    ''' Add selection support to the Button '''
    index = None
    selected = BooleanProperty(False)
    selectable = BooleanProperty(True)
    rv_data_area = ObjectProperty(None)
    start_point = NumericProperty(0)

    def __init__(self, **kwargs):
        super(SelectableButtonArea, self).__init__(**kwargs)
        Clock.schedule_interval(self.update, .0005)


    def update(self, *args):
        self.text = self.rv_data_area[self.index][self.key]

    def refresh_view_attrs(self, rv, index, data):
        ''' Catch and handle the view changes '''
        self.index = index
        return super(SelectableButtonArea, self).refresh_view_attrs(rv, index, data)

    def on_touch_down(self, touch):
        ''' Add selection on touch down '''
        if super(SelectableButtonArea, self).on_touch_down(touch):
            return True
        if self.collide_point(*touch.pos) and self.selectable:
            return self.parent.select_with_touch(self.index, touch)

    def apply_selection(self, rv, index, is_selected):
        ''' Respond to the selection of items in the view. '''
        self.selected = is_selected
        self.rv_data_area = rv.data
        #print("selection changed to {0}".format(rv.data[1]))


    def on_press(self):
        popup = EditAreaPopup(self)
        popup.open()

class RVAREA(BoxLayout):
    data_items_area = ListProperty([])
    col1 = ListProperty()
    col2 = ListProperty()
    col3 = ListProperty()

    def __init__(self, **kwargs):
        super(RVAREA, self).__init__(**kwargs)
        self.get_areas()

    def update(self):
        self.col1 = [{'areaId': str(x[0]), 'cityId': str(x[1]), 'areaName': str(x[2]),  'key': 'areaId'} for x in self.data_items_area]
        self.col2 = [{'areaId': str(x[0]), 'cityId': str(x[1]), 'areaName': str(x[2]),  'key': 'cityId'} for x in self.data_items_area]
        self.col3 = [{'areaId': str(x[0]), 'cityId': str(x[1]), 'areaName': str(x[2]),  'key': 'areaName'} for x in self.data_items_area]


    def get_areas(self):

        rows = [(1, 'Amritsar', 'area1')]
        i = 0
        for row in rows:
            self.data_items_area.append([row[0], row[1], row[2], i])
            i += 1
        print(self.data_items_area)
        self.update()

class CustDrop(DropDown):
    def __init__(self, **kwargs):
        super(CustDrop, self).__init__(**kwargs)
        self.select('')

class MainMenu(BoxLayout):
    states_cities_or_areas = ObjectProperty()
    rv = ObjectProperty(None)
    dropdown = ObjectProperty(None)
    #Define City Variable
    rvcity = ObjectProperty(None)
    #Area City Variable
    rvarea = ObjectProperty(None)

    def display_states(self):
        self.dropdown.dismiss()
        self.remove_widgets()
        self.rv = RV()
        self.states_cities_or_areas.add_widget(self.rv)

    def display_cities(self):
        self.dropdown.dismiss()
        self.remove_widgets()
        self.rvcity = RVCITY()
        self.states_cities_or_areas.add_widget(self.rvcity)

    def display_areas(self):
        self.dropdown.dismiss()
        self.remove_widgets()
        self.rvarea = RVAREA()
        self.states_cities_or_areas.add_widget(self.rvarea)

    def remove_widgets(self):
        self.states_cities_or_areas.clear_widgets()

class FactApp(App):
    title = "test"

    def build(self):
        self.root = Builder.load_file('test.kv')
        return MainMenu()



if __name__ == '__main__':
    FactApp().run()

test.kv

#:kivy 1.10.0
#:import CoreImage kivy.core.image.Image
#:import os os

<EditStatePopup>:
    title: "Update State"
    size_hint: None, None
    size: 500, 200
    auto_dismiss: False

    BoxLayout:
        orientation: "vertical"
        GridLayout:
            cols: 2
            backgroun_color: 0, 0.517, 0.705, 1
            spacing: 10, 10
            Label:
                text: "Id"
            Label:
                id: stateId
                text: root.col_data[0]
            Label:
                text: "State Name"
            TextInput:
                id: stateName
                text: root.col_data[1]
            Label:
                text: "State Code"
            TextInput:
                id: stateCode
                text: root.col_data[2]

            Button:
                size_hint: 1, 1
                text: "Ok"
                on_release:
                    root.package_changes(stateName.text, stateCode.text)
                    app.root.update_states(root)
                    root.dismiss()

            Button:
                size_hint: 1, 1
                text: "Cancel"
                on_release: root.dismiss()

<TreeViewLabel>:
    size_hint_y: None
    height: 24
    on_touch_down:
        app.root.stateName.text = self.text
        app.root.popup.dismiss()

<TreeviewGroup>:
    id: treeview
    treeview: treeview
    title: "Select State"
    size_hint: .3,.3
    size: 800, 800
    auto_dismiss: False

    BoxLayout
        orientation: "vertical"
        ScrollView:
            size_hint: 1, .9
            BoxLayout:
                size_hint_y: None
                id: treeview
                height: root.h
        Button:
            size_hint: 1, 0.1
            text: "Close"
            on_release: root.dismiss()

<SelectableButton>:
    canvas.before:
        Color:
            rgba: (0, 0.517, 0.705, 1) if self.selected else (0, 0.517, 0.705, 1)
        Rectangle:
            pos: self.pos
            size: self.size


<MyRV@RecycleView>:
    viewclass: 'SelectableButton'
    SelectableRecycleGridLayout:
        cols: 1
        default_size: None, dp(26)
        default_size_hint: 1, None
        size_hint_y: None
        height: self.minimum_height
        orientation: 'vertical'
        multiselect: True
        touch_multiselect: True

<RV>:
    BoxLayout:
        orientation: "vertical"

        GridLayout:
            size_hint: 1, None
            size_hint_y: None
            height: 25
            cols: 3

            Label:
                size_hint_x: .1
                text: "Id"
            Label:
                size_hint_x: .5
                text: "State Name"
            Label:
                size_hint_x: .4
                text: "State Code"

        BoxLayout:
            MyRV:
                size_hint_x: .1
                data: root.col1
            MyRV:
                size_hint_x: .5
                data: root.col2
            MyRV:
                size_hint_x: .4
                data: root.col3

<EditCityPopup>:
    title: "Update State"
    size_hint: None, None
    size: 500, 400
    auto_dismiss: False

    BoxLayout:
        orientation: "vertical"
        GridLayout:
            cols: 2
            backgroun_color: 0, 0.517, 0.705, 1
            spacing: 10, 10
            Label:
                text: "City Id"
            Label:
                id: cityId
                text: root.col_data[0]
            Label:
                text: "State Id"
            TextInput:
                id: stateId
                text: root.col_data[1]
                on_focus: root.display_states_treeview(self)
            Label:
                text: "city Name"
            TextInput:
                id: cityName
                text: root.col_data[2]
            Label:
                text: "Short Name"
            TextInput:
                id: shortName
                text: root.col_data[3]
            Label:
                text: "Pin Code"
            TextInput:
                id: pinCode
                text: root.col_data[4]

            Button:
                size_hint: 1, 1
                text: "Ok"
                on_release:
                    root.package_changes(stateId.text, cityName.text, shortName.text, pinCode.text)
                    app.root.update_cities(root)
                    root.dismiss()

            Button:
                size_hint: 1, 1
                text: "Cancel"
                on_release: root.dismiss()

<MyRvCity@RecycleView>:
    viewclass: 'SelectableButtonCity'
    SelectableRecycleGridLayout:
        cols: 1
        default_size: None, dp(26)
        default_size_hint: 1, None
        size_hint_y: None
        height: self.minimum_height
        orientation: 'vertical'
        multiselect: True
        touch_multiselect: True


<RVCITY>:
    BoxLayout:
        orientation: "vertical"

        GridLayout:
            size_hint: 1, None
            size_hint_y:None
            height: 25
            cols: 5

            Label:
                size_hint_x: .1
                text: "City Id"
            Label:
                size_hint_x: .2
                text: "State Name"
            Label:
                size_hint_x: .3
                text: "City Name"
            Label:
                size_hint_x: .2
                text: "Short Name"
            Label:
                size_hint_x: .2
                text: "Pin Code"

        BoxLayout:
            MyRvCity:
                size_hint_x: .1
                data: root.col1
            MyRvCity:
                size_hint_x: .2
                data: root.col2
            MyRvCity:
                size_hint_x: .3
                data: root.col3
            MyRvCity:
                size_hint_x: .2
                data: root.col4
            MyRvCity:
                size_hint_x: .2
                data: root.col5

<EditAreaPopup>:
    title: "Update State"
    size_hint: None, None
    size: 500, 400
    auto_dismiss: False

    BoxLayout:
        orientation: "vertical"
        GridLayout:
            cols: 2
            backgroun_color: 0, 0.517, 0.705, 1
            spacing: 10, 10
            Label:
                text: "City Id"
            Label:
                id: cityId
                text: root.col_data[0]
            Label:
                text: "State Id"
            TextInput:
                id: stateId
                text: root.col_data[1]
                on_focus: root.display_states_treeview(self)
            Label:
                text: "city Name"
            TextInput:
                id: cityName
                text: root.col_data[2]

            Button:
                size_hint: 1, 1
                text: "Ok"
                on_release:
                    root.package_changes(stateId.text, cityName.text, shortName.text, pinCode.text)
                    app.root.update_cities(root)
                    root.dismiss()

            Button:
                size_hint: 1, 1
                text: "Cancel"
                on_release: root.dismiss()


<MyRvArea@RecycleView>:
    viewclass: 'SelectableButtonArea'
    SelectableRecycleGridLayout:
        cols: 1
        default_size: None, dp(26)
        default_size_hint: 1, None
        size_hint_y: None
        height: self.minimum_height
        orientation: 'vertical'
        multiselect: True
        touch_multiselect: True

<RVAREA>:
    BoxLayout:
        orientation: "vertical"

        GridLayout:
            size_hint: 1, None
            size_hint_y: None
            height: 25
            cols: 3

            Label:
                size_hint_x: .1
                text: "Area Id"
            Label:
                size_hint_x: .5
                text: "City Name"
            Label:
                size_hint_x: .4
                text: "Area Name"

        BoxLayout:
            MyRvArea:
                size_hint_x: .1
                data: root.col1
            MyRvArea:
                size_hint_x: .5
                data: root.col2
            MyRvArea:
                size_hint_x: .4
                data: root.col3



<DropdownButton@Button>:
    border: (0, 16, 0, 16)
    text_size: self.size
    valign: "middle"
    padding_x: 5
    size_hint_y: None
    height: '30dp'
    background_color: 90 , 90, 90, 90
    color: 0, 0.517, 0.705, 1



<MenuButton@Button>:
    text_size: self.size
    valign: "middle"
    padding_x: 5
    size : (80,30)
    size_hint : (None, None)
    background_color: 90 , 90, 90, 90
    background_normal: ''
    color: 0, 0.517, 0.705, 1
    border: (0, 10, 0, 0)


<MainMenu>:
    states_cities_or_areas: states_cities_or_areas
    dropdown: dropdown

    BoxLayout:
        orientation: 'vertical'
        #spacing : 10

        BoxLayout:
            canvas.before:
                Rectangle:
                    pos: self.pos
                    size: self.size

            size_hint_y: 1

            MenuButton:
                id: btn
                text: 'Test'
                size : (60,30)
                on_release: dropdown.open(self)

            CustDrop:
                id: dropdown
                auto_width: False
                width: 150

                DropdownButton:
                    text: 'Test1'
                    size_hint_y: None
                    height: '32dp'
                    on_release: root.display_states()

                DropdownButton:
                    text: 'Test2'
                    size_hint_y: None
                    height: '32dp'
                    on_release: root.display_cities()
                DropdownButton:
                    text: 'Test3'
                    size_hint_y: None
                    height: '32dp'
                    on_release: root.display_areas()

        BoxLayout:
            canvas.before:
                Rectangle:
                    pos: self.pos
                    size: self.size

                Color:
                    rgb: (1,1,1)

            Label:
                size_hint_x: 45

        BoxLayout:
            id: states_cities_or_areas
            size_hint_y: 10

        Label:
            size_hint_y: 1

Can anyone help me?

  1. When i click on test then sub menu will be open.When i click on state then it look like good.But i click on city then distance increase between 'Test' and Row.

  2. when i click on 'city' then show rows of city.when i click on any row then it looks Select state(treeview) show behind of 'update state'

I want it up on update state when anyone type anything in 'state Id'

  1. i am using treeview in select state.how to add scrollbar in select state.when state increase then scroll will be good option

After update code I have a more error.

1. When i select state from select state then it's not put that string in state Name.Its showing error
File "/usr/share/kivy-examples/gst_fact/test.kv", line 50, in

app.root.stateName.text = self.text

AttributeError: 'MainMenu' object has no attribute 'stateName'


Solution

  • I want to when i click on anyone(state,city,area) then row show top position like Image_1.

    It's because you have set the rules of your main menu in your kv to reserve the space for each box city, state and area. You can remove these rules and add only one box which I called states_cities_or_areas:

    ...
    
    <MainMenu>:
        states_cities_or_areas: states_cities_or_areas
        dropdown: dropdown
    
        BoxLayout:
            orientation: 'vertical'
            #spacing : 10
            BoxLayout:
                canvas.before:
                    Rectangle:
                        pos: self.pos
                        size: self.size
    
                size_hint_y: 5
    
                MenuButton:
                    id: btn
                    text: 'Test'
                    size : (60,30)
                    on_release: dropdown.open(self)
    
                CustDrop:
                    id: dropdown
                    auto_width: False
                    width: 150
    
                    DropdownButton:
                        text: 'State'
                        size_hint_y: None
                        height: '32dp'
                        on_release: root.display_states()
    
                    DropdownButton:
                        text: 'City'
                        size_hint_y: None
                        height: '32dp'
                        on_release: root.display_cities()
                    DropdownButton:
                        text: 'Area'
                        size_hint_y: None
                        height: '32dp'
                        on_release: root.display_areas()
    
            BoxLayout:
                size_hint_y: 2.5
                canvas.before:
                    Rectangle:
                        pos: self.pos
                        size: self.size
    
                    Color:
                        rgb: (1,1,1)
    
                Label:
                    size_hint_x: 45
    
            BoxLayout:
                id: states_cities_or_areas
                size_hint_y: 89
            Label:
                size_hint_y: 1
    
    ...
    

    then change some methods and attributes of the mainmenu in the .py:

    ...
    class MainMenu(BoxLayout):
        states_cities_or_areas = ObjectProperty()
        rv = ObjectProperty(None)
        dropdown = ObjectProperty(None)
        #Define City Variable
        rvcity = ObjectProperty(None)
        #Area City Variable
        rvarea = ObjectProperty(None)
    
        def display_states(self):
            self.dropdown.dismiss()
            self.remove_widgets()
            self.rv = RV()
            self.states_cities_or_areas.add_widget(self.rv)
    
        def display_cities(self):
            self.dropdown.dismiss()
            self.remove_widgets()
            self.rvcity = RVCITY()
            self.states_cities_or_areas.add_widget(self.rvcity)
    
        def display_areas(self):
            self.dropdown.dismiss()
            self.remove_widgets()
            self.rvarea = RVAREA()
            self.states_cities_or_areas.add_widget(self.rvarea)
    
        def remove_widgets(self):
            self.states_cities_or_areas.clear_widgets()
    
    ...
    

    I have noticed that the tiles of colums of city was not displayed, you can display it with this in the kv:

    ...
    
    <RVCITY>:
        BoxLayout:
            orientation: "vertical"
    
            GridLayout:
                size_hint: 1, None
                size_hint_y: None
                height: 25
                cols: 5
    ...
    

    when i click on 'city' then show rows of city.when i click on any row then it looks Select state(treeview) show behind of 'update state' like image_4 I want it up on update state when anyone type anything in 'state Id' like image_5

    It's because the StateId text input is already on_text before the the popup opens. I suggest you to replace on_text with on_focus:

    ...
    <EditCityPopup>:
        title: "Update State"
        size_hint: None, None
        size: 500, 400
        auto_dismiss: False
    
        BoxLayout:
            orientation: "vertical"
            GridLayout:
                cols: 2
                backgroun_color: 0, 0.517, 0.705, 1
                spacing: 10, 10
                Label:
                    text: "City Id"
                Label:
                    id: cityId
                    text: root.col_data[0]
                Label:
                    text: "State Id"
                TextInput:
                    id: stateId
                    text: root.col_data[1]
                    on_focus: root.display_states_treeview(self) 
    ...
    

    i am using treeview in select state.how to add scrollbar in select state.when state increase then scroll will be good option

    You just have to put the treeview in a scrollview:

    ...
    <TreeViewLabel>:
    size_hint_y: None
        height: 24
        on_touch_down:
            app.root.stateName.text = self.text
            app.root.select_node(self)
            app.root.popup.dismiss()
    
    <TreeviewGroup>:
        treeview: treeview
        title: "Select State"
        size_hint: .3,.3
        auto_dismiss: False
        BoxLayout
            orientation: "vertical"
            ScrollView:
                size_hint: 1, .9
                BoxLayout:
                    size_hint_y: None
                    id: treeview
                    height: root.h
            Button:
                size_hint: 1, 0.1
                text: "Close"
                on_release: root.dismiss()
    

    and in the .py:

    ...
    
    class TreeviewGroup(Popup):
        treeview = ObjectProperty(None)
        tv = ObjectProperty(None)
        h = NumericProperty(0)
        #ti = ObjectProperty()
    
        def __init__(self, **kwargs):
            super(TreeviewGroup, self).__init__(**kwargs)
            self.tv = TreeView(root_options=dict(text=""),
                       hide_root=True,
                       indent_level=4)
            for branch in tree:
                populate_tree_view(self.tv, None, branch)
            #self.remove_widgets()
            self.treeview.add_widget(self.tv)
            Clock.schedule_once(self.update, 1)
    
        def remove_widgets(self):
            for child in [child for child in self.treeview.children]:
                self.treeview.remove_widget(child)
    
        def update(self, *args):
            self.h = len([child for child in self.tv.children]) * 24
    

    Update

    FOR THE 4TH POINT;

    to pass the stateName to the other popup,keep the instance of the first popup when you create the 2nd:

    ...
    class TreeviewGroup(Popup):
        treeview = ObjectProperty(None)
        tv = ObjectProperty(None)
        h = NumericProperty(0)
        #ti = ObjectProperty()
        popup = ObjectProperty()
    ...
    
    class EditCityPopup(Popup):
    
    ...
    
    def display_states_treeview(self, instance):
        if len(instance.text) > 0:
            if self.popup is None:
                self.popup = TreeviewGroup()
                self.popup.popup = self
            self.popup.open()
    

    To reach the first popup in the kv make those changes:

    in the .py:

    ...
    class MyBoxLayout(BoxLayout):
        rooot = ObjectProperty()
    ...
    

    In the kv:

    ...
    <TreeViewLabel>:
        size_hint_y: None
        height: 24
        on_touch_down:
            root.parent.parent.rooot.popup.col_data[1] = self.text
            #app.root.select_node(self)
            root.parent.parent.rooot.popup.popup.dismiss()
    
    <TreeviewGroup>:
        id: treeview
        treeview: treeview
        title: "Select State"
        size_hint: .3,.3
        size: 800, 800
        auto_dismiss: False
    
        BoxLayout
            orientation: "vertical"
            ScrollView:
                size_hint: 1, .9
                MyBoxLayout:
                    size_hint_y: None
                    id: treeview
                    height: root.h
                    rooot: root
    ...